浏览器的 Secure Context 安全上下文限制

原创 2023-04-10

主流浏览器都启用了Secure Context，它禁止浏览器访问被认为是不安全的内容，防止不合法访问造成的信息泄漏和安全问题。

`Secure Context`

主流浏览器都启用了Secure Context，即安全的上下文环境。Secure Context规范定义了最低限度的认证和保密标准，一些 API 被限制只能在Secure Context中运行。比如访问摄像头、获取用户密码凭证、Service Worker等。Secure Context 规范约定：

访问本地资源时，地址为 http://127.0.0.1、http://localhost、http://*.localhost 和 file:// 的资源是安全的；
访问非本地资源时，路径为 https:// 或 wss:// 协议的资源是安全的。

当浏览器访问不符合安全要求的资源时，可能会提示：The request client is not a secure context。

判断浏览器是否在安全上下文中

if (window.isSecureContext) {
	//页面在安全上下文中
}

以Service Worker的使用为例，Service Worker扩充了浏览器的处理能力，允许浏览器充当一部分后台服务的角色，处理不需要和用户直接交互的任务。Service Worker必须运行在安全的上下文环境中，只能通过localhost、HTTPS访问，否则navigator.serviceWorker获取到值为空。

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

在测试环境关闭`Secure Context`的限制

有时候为了方便测试，会直接把服务部署在HTTP环境中，Secure Context的限制会让测试工作变得复杂，这个时候可以强制浏览器关闭Secure Context限制。

Chrome

打开Chrome浏览器，在地址栏输入：

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

将 Insecure origins treated as secure 选择设置为 Enabled，并在输入框中输入不安全源(HTTP)的地址和端口号，多个地址以英文逗号分隔。Relaunch 后生效。

Microsoft Edge

打开Edge浏览器，在地址栏输入：

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

同样将Insecure origins treated as secure选择设置为“已启用”，并在输入框中输入不安全源(HTTP)的地址和端口号，多个地址以英文逗号分隔。

Firefox

在地址栏输入about:config 进入高级选项。Firefox浏览器将权限细分了，以启用Service Worker为例，找到dom.serviceWorkers.testing.enabled并设置为true，就可以直接在HTTP环境使用Service Worker。

Safari

Safari浏览器限制更严格，据目前掌握的信息，它不支持取消Secure Context的限制。

# Web # JavaScript

使用mkcert生成自签名证书
 判断浏览器User-Agent是否伪造的常规方法