Secure Context - 安全上下文

在 window 或 worker 中使用一些涉及用户隐私、一些数据访问或计算机的低级访问权限等相关 API 时，为了防止中间人攻击者访问这些接口，从而限制需要在安全上下文中使用

上下文在什么情况下是安全的？

本地资源：http://127.0.0.1、http://localhost、http://*.localhost 或 file:// 协议的资源是安全的
非本地资源：通过 TLS 传输的，例如 https:// 或 wss:// 协议的资源是安全的

使用 `window` 和 `worker` 属性来判断当前是否在安全上下文中

可以通过 Window.isSecureContext 或 WorkerGlobalScope.isSecureContext true 或 false 来判断是否处于安全上下文中。

if (window.isSecureContext) {
  // 页面在安全上下文中，所以 service worker 可用
  navigator.serviceWorker.register("/offline-worker.js").then(() => {
    // …
  });
}

解决 `Secure Context` 限制

使用 `Https` 协议

一般情况下，使用 localhost 或 127.0.0.1 等本地测试时，是处于 安全上下文中 的，由于某些测试环境，可能需要域名访问等场景，使用例如 clipboard、
Crypto 等 API 时则会出现 安全上下文 限制。

通过 openssl 申请本地自签名证书，配合 serve 或 nginx 启动本地 https 测试服务，使当前为安全的上下文环境。

Chrome 中关闭 `Secure Context` 的限制

访问：chrome://flags/#unsafely-treat-insecure-origin-as-secure，将 Insecure origins treated as secure 选择设置为 启用，并在输入框中输入不安全源(HTTP)的地址和端口号，多个地址以英文逗号分隔。重新启动 后生效。

前后对比

[{"url":"https://image.baidu.com/search/down?url=https://gzw.sinaimg.cn/mw2000/0085UwQ9ly1htk8nvm9etj32460kegzu.jpg","alt":"","title":""},{"url":"https://image.baidu.com/search/down?url=https://gzw.sinaimg.cn/mw2000/0085UwQ9ly1htk8nuytu8j326s0e0n9e.jpg","alt":"","title":""}]