Secure Context Restrictions for Browsers

Mainstream browsers have Secure Context enabled, which prohibits browsers from accessing content that is considered insecure, preventing information leakage and security issues caused by illegitimate access.

`Secure Context`

Mainstream browsers have Secure Context, the secure contextual environment, enabled. The Secure Context specification defines minimum standards for authentication and confidentiality, and some APIs are restricted to run only in Secure Context. For example, accessing cameras, getting user password credentials, Service Worker, etc. The Secure Context specification convention is:

When accessing local resources, resources with addresses http://127.0.0.1, http://localhost, http://*.localhost and file:// are secure;
When accessing non-local resources, resources with paths to https:// or the wss:// protocol are safe.

When a browser accesses a resource that does not meet security requirements, it may prompt: The request client is not a secure context.

Determine if the browser is in a secure context

1
2
3

if (window.isSecureContext) {
    // ...
}

Take the use of Service Worker as an example, Service Worker expands the processing power of the browser, allowing the browser to act as a part of the background service, handling tasks that do not require direct interaction with the user. The Service Worker must run in a secure context and can only be accessed via localhost, HTTPS, otherwise the value obtained by navigator.serviceWorker will be null.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/worker.js', {
        scope: '/'
    }).then((registration) => {
        registration.showNotification('registration successful');
    });
}

Turn off `Secure Context` restrictions in test environment

Sometimes to facilitate testing, the service will be deployed directly in the HTTP environment, the Secure Context restriction will make the testing work complicated, this time you can force the browser to turn off the Secure Context restriction.

Chrome

Open Chrome and type in the address bar:

`1`	`chrome://flags/#unsafely-treat-insecure-origin-as-secure`

Set the Insecure origins treated as secure selection to Enabled and enter the address and port number of the insecure origin (HTTP) in the input box, with multiple addresses separated by commas. reaunch will take effect.

Microsoft Edge

Open Edge browser and type in the address bar:

`1`	`edge://flags/#unsafely-treat-insecure-origin-as-secure`

Also set the Insecure origins treated as secure selection to Enabled and enter the address and port number of the insecure origin (HTTP) in the input box, separating multiple addresses by commas.

Firefox

Enter about:config in the address bar to enter the advanced options. Firefox browser subdivides the permissions. To enable Service Worker for example, find dom.serviceWorkers.testing.enabled and set it to true, you can use Service Worker directly in HTTP environment.

Safari

The Safari browser is more restrictive, and as far as we know, it does not support lifting the Secure Context restriction.

Table of Contents

Secure Context