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

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:^[1]

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 2:^[2]

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):

Delete cookies and site data when Firefox is closed

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 3:^[3]

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 4:^[4]

For Firefox 80, I went to about:Config and verified that dom.serviceWorkers.enabled is set to true

then I went to about:preferences#privacy and unchecked Delete cookies and site data when Firefox is closed, from Mozilla

Solution 5:^[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.

Solution 6:^[6]

In my case, the error DOMException: The Operation is insecure occured when calling navigator.credentials.create().

Here are a few possible reasons:

The local XAMPP apache was addressed as 127.0.0.1 instead of localhost. The WebAuthn would not like IP addresses.
My environment used HTTP instead of HTTPS.
I used a custom port for HTTP, see "The operation is insecure." On navigator.credentials.create() on firefox using Mailcow

With https://localhost/ and a self-signed (the XAMPP defaults) certificate, instead of http://127.0.0.1:82/, the error was solved.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gerold Broser
Solution 2	Gerold Broser
Solution 3	OffTheBricks
Solution 4	thenewjames
Solution 5	K M
Solution 6

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]