puppeteer/puppeteer

[problem] Mac OS Firewall popup on every launch of puppeteer

al6x opened this issue · 26 comments

al6x commented

With every launch on mac os, it causes mac os to ask the following question

"Do you want to the application Chromium.app to accept incoming network connections?"

Steps to reproduce

  • Puppeteer version: 1.18.1
  • Platform / OS version: Mac OS Sierra 10.12.4
  • Node.js version:v11.2.0

What steps will reproduce the problem?

const browser = await puppeteer.launch({ headless: false })
and visit any url...

What is the expected result?

Chromium window appear with the site content

What happens instead?

Chromium window appear with the site content
And the Mac OS alert pop ups asking "Do you want to the application Chromium.app to accept incoming network connections?"

No matter what you do with the Mac OS Firewall setting it keeps asking it again and again and again.

evg1n commented

I have the same issue.

al6x commented

Yea, very annoying. There's a solution to trick Mac OS into believing Chromium.app is a signed app with some sudo command, but I hope there's a better solution.

Why does the firewall keep asking? For me it's stored in node_modules/puppeteer/.local-chromium/mac-674921/chrome-mac/Chromium.app and didn't change since install.

Go to system preferences then create a self signed certificate (keychen app, "trousseaux d'acces" in french). Tell a name "MyCertificateName", self signed root and code signing certificate type. Tell system that you trust it.

Capture d’écran 2019-08-22 à 23 24 55

Capture d’écran 2019-08-22 à 23 27 19

Open a command and write "codesign -s MyCertificateName -f ./tothepath/yourapp.app --deep

Your app is now self signed and trusted for all the system, you should not be notified anymore (it worked for me)

Go to system preferences then create a self signed certificate (keychen app, "trousseaux d'acces" in french). Tell a name "MyCertificateName", self signed root and code signing certificate type. Tell system that you trust it.

Capture d’écran 2019-08-22 à 23 24 55

Capture d’écran 2019-08-22 à 23 27 19

Open a command and write "codesign -s MyCertificateName -f ./tothepath/yourapp.app --deep

Your app is now self signed and trusted for all the system, you should not be notified anymore (it worked for me)

Thanks a lot, this resolves popups on my mac, 10.14.16.

Thanks, sudo codesign -s Puppeteer -f ./node_modules/puppeteer/.local-chromium/mac-674921/chrome-mac/Chromium.app --deep worked. Note that sudo is needed but it doesn't complain if it's missing.

As chromium revision in puppeteer is updated frequently I put --deep flag at the beginning of codesign command.
So, after puppeteer update re-sign is very simple:

$ sudo codesign --deep -s Puppeteer -f ./node_modules/puppeteer/.local-chromium/ +[TAB]x3 +[ENTER]

I'm getting an error: Chromium.app: invalid or unsupported format for signature

Any idea what I could do to get around this? It appears that the self-signed certificate was created successfully.

$ sudo codesign -s puppeteer -f ./node_modules/puppeteer/.local-chromium/mac-706915/chrome-mac/Chromium.app --deep
./node_modules/puppeteer/.local-chromium/mac-706915/chrome-mac/Chromium.app: invalid or unsupported format for signature
In subcomponent: /Users/timmydoza/projects/test-app/node_modules/puppeteer/.local-chromium/mac-706915/chrome-mac/Chromium.app/Contents/Frameworks/Chromium Framework.framework

For me after creating the certificate, it was under "login" keychain so I had to drag and drop it to "System", then run the command above again.
image

Thanks @Moshisho - that worked for me!

sudo codesign --force --deep --sign - ./node_modules/puppeteer/.local-chromium/mac-722234/chrome-mac/Chromium.app

This is what I used. It'll prompt you for your password. Then the next time Chromium with a head opens up youll get the prompt one last time and youre good to go from then on. Enjoy!

Can a signed Chromium be bundled in?

I ended up adding a bash alias based on your suggestions:

alias sign_puppeteer="sudo codesign --force --deep \
    --sign - ./node_modules/puppeteer/.local-chromium/mac-*/chrome-mac/Chromium.app"

Ok At first it didn't go but i upgraded to Puppetter 3.3.0 and did sudo codesign --deep --sign Pupeteer -f ./node_modules/puppeteer/.local-chromium/mac-756035/chrome-mac/Chromium.app/ not sure if there is any difference between -s and --sign

i made something a bit more generic, as every puppeteer version generate a different mac-xxxxx path
image
thanks for @Madvinking

const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

function removeChromiumAlert() {
    try {
      const chromiumPath = '/chrome-mac/Chromium.app';
      const macPath = path.join(path.dirname(require.resolve('puppeteer')), '/.local-chromium/');
      const [generatedDir] = fs
        .readdirSync(macPath, { withFileTypes: true })
        .filter(dirent => dirent.isDirectory())
        .map(dirent => dirent.name);
      const chromiumAppPath = path.join(macPath, generatedDir, chromiumPath);
      const mode = `0${(fs.statSync(chromiumAppPath).mode & parseInt('777', 8)).toString(8)}`;

      if (mode !== '0777') {
        execSync(`sudo chmod 777 ${chromiumAppPath}`);
        execSync(`sudo codesign --force --deep --sign - ${chromiumAppPath}`);
      }
    } catch (err) {
      console.warn('unable to sign Chromium, u may see the annoying message when the browser start');
      console.warn(err);
    }
}

My solution, based off @jesperronn

Add the following alias to your bash_profile of zsh_profile or whatever.

alias fix-chromium-permissions-locally="sudo codesign --force --deep --sign - ./node_modules/puppeteer/.local-chromium/mac-*/chrome-mac/Chromium.app"

Then run fix-chromium-permissions-locally in each project folder you need it. Also might be required each time node_modules is updated/reinstalled 👍

Actually, this command seems to fix the permissions globally ✅

sudo codesign --force --deep --sign - ~/Library/Caches/ms-playwright/chromium-*/chrome-mac/Chromium.app

Let me update the tutorial, ok?

App to run on Mac is: Keychain Access.app

  1. From top menu bar select Keychain > Certificate Assistant > Create a certificate

image

  1. Put in
  • name: Pupeteer
  • type: Code signature

image

  1. Finish the process

  2. Select first tab: All things and search for Pupeteer

Zrzut ekranu 2022-04-14 o 23 23 10

  1. Copy the certificate

  2. Select System > My certificates

Zrzut ekranu 2022-04-14 o 23 24 06

  1. Paste copied certificate Pupeteer

  2. Remove certificate from the previous place (was in Logging > My certificates).

  3. Find your chromium app path.

  4. Enter the signing command (my path):

sudo codesign --deep -s Pupeteer -f "/Users/me/WebstormProjects/MyProject/node_modules/puppeteer/.local-chromium/mac-970485/chrome-mac/Chromium.app"

Let me update the tutorial, ok?

App to run on Mac is: Keychain Access.app

  1. From top menu bar select Keychain > Certificate Assistant > Create a certificate
image
  1. Put in
  • name: Pupeteer
  • type: Code signature
image
  1. Finish the process
  2. Select first tab: All things and search for Pupeteer
Zrzut ekranu 2022-04-14 o 23 23 10
  1. Copy the certificate
  2. Select System > My certificates
Zrzut ekranu 2022-04-14 o 23 24 06
  1. Paste copied certificate Pupeteer
  2. Remove certificate from the previous place (was in Logging > My certificates).
  3. Find your chromium app path.
  4. Enter the signing command (my path):
sudo codesign --deep -s Pupeteer -f "/Users/me/WebstormProjects/MyProject/node_modules/puppeteer/.local-chromium/mac-970485/chrome-mac/Chromium.app"

Thanks! That popup was getting me crazy!

stale commented

We're marking this issue as unconfirmed because it has not had recent activity and we weren't able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

This is still an issue I have experienced it. This process needs to be documented somewhere. The steps to fix this issue should not be in a github issue.

Here's another option?

puppeteer.launch({
    args: [
      '--disable-features=DialMediaRouteProvider',
    ],
});

Assumes you're not using whatever features the "DialMediaRouteProvider" provides

OrKoN commented

Happy to review a PR to the troubleshooting section! I have not encountered this issue myself (I am also a Mac user) so I am not sure which solution actually works.

Here's another option?

puppeteer.launch({
    args: [
      '--disable-features=DialMediaRouteProvider',
    ],
});

Assumes you're not using whatever features the "DialMediaRouteProvider" provides

Works like a charm! Great fix!

OrKoN commented

This should be disabled by default now.

I was confused as it still show the popup the first time, but after the first time it stop showing up on subsequent times.