Firefox: Service Worker: SecurityError: DOMException: The Operation is insecure

Question

In app.js, I am checking the serviceWorker existence in navigator object and if available then registering the SW.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js', { scope: './' })
        .then(function(registration) {
            console.log("Service Worker Registered!");
        }).catch(function(err) {
            console.log("Service Worker not registered!", err);
        });
}

When trying to register SW, I receive the below error in Firefox. I also made sure the service-worker.js file is under src directory.

Checking my about:config in Firefox (version 59.0.2) I had service worker and storage api enabled. So that shouldn't be an issue.

PS: The same code works fine on Chrome.

Solution 1

Did you check the cookie setting in about:preferences#privacy, it must be 'keep until they expire', if you have 'keep until I close firefox' selected sw will not register.

you can find details on this thread: https://bugzilla.mozilla.org/show_bug.cgi?id=1429714

Solution 2

The same error message also appears in Firefox, if the serviceworker's file is delivered with a wrong MIME-Type. In that case setting the right MIME-Type fixes the problem. Wrong MIME-Type can happen, if you deliver the serviceworker's file dynamically e.g. using PHP.

Correct MIME-Type must be

Content-Type: application/javascript; charset=UTF-8

Solution 3

You can keep "Delete cookies and site data when Firefox is closed" checked, as long as you create an exception for your site. (Tested in Firefox 78.0.2):

Click on Manage Permissions... and enter a URL (e.g. localhost:8000). Click Allow, then click Save Changes in the bottom right corner. Service workers (and cookies etc.) should now work for this URL, but not for other URLs.

Developers, note that localhost is not the same as e.g. localhost:8000 (you need to specify the port number).

Solution 4

When you serve the service worker file itself, often you will need to host it with a Service-Worker-Allowed http header. If the value of this header does not match what you're trying to register the service worker with in Javascript, or if you are trying to register for a scope that is beyond what the browser considers 'secure', then you will get this error.

Happened to me more than once and I wound up here each time. At the very least I'm helping myself out for next time!

Solution 5

In my case, I deleted all the previous data related to this site (cookies, cache, etc.) Then, Firefox allowed me to register the new service worker.

View more solutions

Comments

[Ryan Stone]

Where is this setting in firefox developer edition or firefox Quantum, I can't find it in about:preferences#privacy?

[Ryan Stone]

If it is Necessary for us as developers to enable these settings in both About:Config & about:preferences#privacy to get Service workers to actually work or register then Won't they be broken or Not register for nearly all users who actually visit the site, seeing as most people who aren't developers wont have these settings enabled?