Gatsby: SecurityError: The operation is insecure in Firefox Developer edition

[kilburn]

Description

With gatsby develop and Firefox Developer Edition (latest version, 69.07b), firefox throws a security error exception when app.js checks if (serviceWorkerin navigator), and hence the app cannot be used:

Steps to reproduce

1. Install firefox developer edition
2. Run gatsby develop on any gatsby project (no offline plugin nor anything sw-related)

Expected result

You see the website and can develop it normally.

Actual result

You get the error above and hence cannot do anything (the error triggers the react overlay error and does not let you interact with the site at all)

Environment

  System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 10.16.0 - /tmp/yarn--1564036896798-0.009151794373142508/node
    Yarn: 1.17.3 - /tmp/yarn--1564036896798-0.009151794373142508/yarn
    npm: 6.9.0 - /usr/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 68.0
  npmPackages:
    gatsby: ^2.1.27 => 2.13.32
    gatsby-image: ^2.0.31 => 2.2.6
    gatsby-plugin-create-client-paths: ^2.0.4 => 2.1.3
    gatsby-plugin-env-variables: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.0.22 => 2.2.3
    gatsby-plugin-react-helmet: ^3.0.8 => 3.1.2
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
    gatsby-plugin-remote-images: ^1.0.1 => 1.0.3
    gatsby-plugin-sass: ^2.0.11 => 2.1.3
    gatsby-plugin-sharp: ^2.0.25 => 2.2.8
    gatsby-plugin-typescript: ^2.1.0 => 2.1.2
    gatsby-source-filesystem: ^2.0.23 => 2.1.5
    gatsby-source-s3-image: ^1.5.8 => 1.6.5
    gatsby-transformer-sharp: ^2.1.15 => 2.2.4

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[skdigital]

I have the same error using firefox developer edition and a new install of gatsby project (exactly the same error).

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[andresmrm]

The problem persists here. Using Firefox Nightly (70.0a1).

[sheedy]

Not just nightly, I'm running FF 69.0.

Just ran gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world and then gatsby develop and see the same screen as above.

I have FF's security and privacy settings all turned on but wouldn't expect that to effect this. Switched them all back to standard and still get this screen.

[edowado]

Same on firefox 69.0 (64-bit) for linux

[studiospring]

Happening on MacOS FireFox 69.0, with FF extensions disabled, vanilla gatsby-starter-default.

gatsby: ^2.15.13 => 2.15.13
gatsby-cli: ^2.7.47 => 2.7.47
gatsby-image: ^2.2.18 => 2.2.18
gatsby-plugin-manifest: ^2.2.16 => 2.2.16
gatsby-plugin-offline: ^2.2.10 => 2.2.10
gatsby-plugin-react-helmet: ^3.1.7 => 3.1.7
gatsby-plugin-sharp: ^2.2.21 => 2.2.21
gatsby-source-filesystem: ^2.1.22 => 2.1.22
gatsby-transformer-sharp: ^2.2.14 => 2.2.14

npmGlobalPackages:
    gatsby-cli: 2.7.44

[zzzbra]

I am also seeing this. One (very) slight difference between my case and OPs is the subsequent line is highlighted as the error in my case:

Also I am running FF Developer Edition 70.0b2

[yansusanto]

Looks like everyone is facing the same issue and none has a solution.

[kilburn]

I worked around the issue by disabling the "Delete cookies and site data when Firefox Developer Edition is closed" option:

[yansusanto]

Thanks, @kilburn. That did hide the warning.

[Ovicakov]

Thank you ! It works on FF Developer edition

[zzzbra]

Thank you @kilburn!

[FedericoBiccheddu]

As a temporary workaround, the Incognito mode works fine.

Personally, I don't want that functionality completely disabled.

Hope it helps :smile:

[wardpeet]

Reading up on some other issues around this, like angular. It looks like we might just need a try catch around the getRegistrations function

[Maria218]

I worked around the issue by disabling the "Delete cookies and site data when Firefox Developer Edition is closed" option:

Thank you so much! This worked for the exact error I was having with my React app. But what exactly is the problem? And why does this work? Should the unregister function in my React app be changed to account for this in some way?

[kilburn]

Thank you so much! This worked for the exact error I was having with my React app. But what exactly is the problem? And why does this work? Should the unregister function in my React app be changed to account for this in some way?

The issue is that firefox doesn't allow any kind of access to navigator.serviceWorker when the "delete cookies and site data when Firefox is closed" option is enabled. I don't know what reasons did they have for it, but dealing with that issue would just be a matter of surrounding the navigator.serviceWorker access with a try ... catch that captures the SecurityError exception and proceeds as if the browser did not have any serviceWorker functionality.

[Maria218]

Thank you so much! This worked for the exact error I was having with my React app. But what exactly is the problem? And why does this work? Should the unregister function in my React app be changed to account for this in some way?

The issue is that firefox doesn't allow _any_ kind of access to navigator.serviceWorker when the "delete cookies and site data when Firefox is closed" option is enabled. I don't know what reasons did they have for it, but dealing with that issue would just be a matter of surrounding the navigator.serviceWorker access with a try ... catch that captures the SecurityError exception and proceeds as if the browser did not have any serviceWorker functionality.

Oh okay, thanks for the info. I'll do that

[davidanitoiu]

I'm not sure on the side-effects on this one, but so far I add an empty catch to the navigator.serviceWorker.getRegistrations().then(...) every time I run gatsby develop

Takes care of the annoying error for me.

./.cache/app.js

 if (`serviceWorker` in navigator) {
    navigator.serviceWorker.getRegistrations().then(registrations => {
      if (registrations.length > 0)
        console.warn(
          `Warning: found one or more service workers present.`,
          `If your site isn't behaving as expected, you might want to remove these.`,
          registrations
        )
    }).catch(error => {})

[areinmeyer]

Just came across this error as well in Firefox 72.

A different option than unchecking the Delete cookies and site data when Firefox is closed is to leave it checked but then go into Manage Permissions option next to the checkmark and add localhost:8000 to the Allow list. Just adding localhost did not work for me, I had to specifically add the port as well.

[jyn514]

I have the same issue.

[AminHwadria]

disable the "Delete cookies and site data when Firefox Developer Edition is closed" option in firefox

[jesusalvb]

Just came across this error as well in Firefox 72.

A different option than unchecking the Delete cookies and site data when Firefox is closed is to leave it checked but then go into Manage Permissions option next to the checkmark and add localhost:8000 to the Allow list. Just adding localhost did not work for me, I had to specifically add the port as well.

Yeah !!! This is the solution

[jelhouss]

I am having this issue on FF/Mac (v73.0.1) and create-react-app and it fixed it!
But does anyone know why this happens?

I worked around the issue by disabling the "Delete cookies and site data when Firefox Developer Edition is closed" option:

[anyway]

Same issue here...

[demostanis-worlds]

Another workaround would be to set dom.serviceWorkers.enabled to false in about:config.

[ruevaughn]

Same issue here

Just came across this error as well in Firefox 72.
A different option than unchecking the Delete cookies and site data when Firefox is closed is to leave it checked but then go into Manage Permissions option next to the checkmark and add localhost:8000 to the Allow list. Just adding localhost did not work for me, I had to specifically add the port as well.

Yeah !!! This is the solution

This worked perfect, nice catch!

[sharnik]

In case someone uses Firefox for anything else than just Gatsby development, I'd recommend against disabling cleaning the cookies on exit. I'm not sure about adding localhost:8000 to the whitelist, because some popular malware (like the video conferencing app Zoom) install local servers that do stuff we wouldn't want them to do.

Whitelisting the localhost:8000 would most definitely be a good temporary workaround, but that's not really a solution.

As far as I've seen, the Firefox team knows about this issue, but doesn't consider it their problem: https://bugzilla.mozilla.org/show_bug.cgi?id=1429714. They have a good point that a rejected Promise should be handled gracefully, like any other possible error. I think @kilburn's idea to add error handling for it would be a way towards a proper fix.

[wildcox80]

I worked around the issue by disabling the "Delete cookies and site data when Firefox Developer Edition is closed" option:

Thanks you working for me!!!

[j127]

I see the same error in regular Firefox 74 on Ubuntu 16.04 (not Developer Edition). Changing that setting fixes the problem, but then my browser doesn't have the correct settings any more.

[ArnoSoontjens]

Experiencing this too! FF 75.0 (64bit), on Ubuntu 18.04. My 'workaround' is to just comment out the entire if-statement's body, but I have to do that everytime the development server restarts., which is not very convenient.

 if (`serviceWorker` in navigator) {
   /* navigator.serviceWorker.getRegistrations().then(registrations => {
      if (registrations.length > 0)
        console.warn(
          `Warning: found one or more service workers present.`,
          `If your site isn't behaving as expected, you might want to remove these.`,
          registrations
        )
    })*/
  }

[phamvanhiepvn]

Thêm try catch hoặc .catch nhé các sếp :)

[j127]

Is anyone still seeing this error? I went to see if I could fix it here, but I can't reproduce it on my computer any more.

[clovis-rosa]

Is anyone still seeing this error? I went to see if I could fix it here, but I can't reproduce it on my computer any more.

Hey @j127 , yes! The error still. I just started a new Gatsby v2.21.37 project and opened it in a Firefox Developer v77.0b9 (64-bit). As a temporary fix I whitelisted the localhost:8000 as described above.

[j127]

This seems to work, but I'll need to read a little more about the contributing guidelines before I make a pull request.

  if (`serviceWorker` in navigator) {
    navigator.serviceWorker
      .getRegistrations()
      .then(registrations => {
        if (registrations.length > 0)
          console.warn(
            `Warning: found one or more service workers present.`,
            `If your site isn't behaving as expected, you might want to remove these.`,
            registrations
          )
      })
      .catch(err => {
        if (/Firefox/.test(navigator.userAgent)) {
          console.error(
            `To reduce storage access error messages during development`,
            `in Firefox, uncheck the setting "Delete cookies and site data when Firefox`,
            `is closed" in your preferences.`
          )
        }
        console.error(err)
      })
  }

It keeps the page from breaking, and it shows a console message in Firefox about how to remove the extra error messages. Let me know if you think there is a better way to handle it.

[bradobro]

I submitted a minimal fix in #25981. I like @j127 's specific Firefox warning, but opted to omit it, thinking

• I don't think we want to advise (possibly inexperienced) developers to turn off browser security.
• More browsers may add default security settings that cause this fault, and a more generic remedy will cut down on maintenance PR's.

I'm glad to retract the PR if we think there's a better way, but wanted to get some active code in place that catches the exception and gives us a foundation for discussion.

[dmithamo]

Just came across this error as well in Firefox 72.

A different option than unchecking the Delete cookies and site data when Firefox is closed is to leave it checked but then go into Manage Permissions option next to the checkmark and add localhost:8000 to the Allow list. Just adding localhost did not work for me, I had to specifically add the port as well.

Thanks!
Oh and btw, Manage Permissions is Manage Exceptions on FDE 82 now.

[jonathanlinat]

Just came across this error as well in Firefox 72.

A different option than unchecking the Delete cookies and site data when Firefox is closed is to leave it checked but then go into Manage Permissions option next to the checkmark and add localhost:8000 to the Allow list. Just adding localhost did not work for me, I had to specifically add the port as well.

It works as described. :+1: