直接读取 self.isSecureContext 即可判断页面是否处于安全上下文，它同步返回布尔值：HTTPS、localhost、127.0.0.1 返回 true，HTTP 公网、file:// 返回 false；iframe 中以自身协议为准，沙箱或 data: 加载必为 false；调用敏感 API 前必须主动校验并拦截，不可依赖 try/catch；meta 跳转或 JS 协议替换无效，需服务端 301 重定向；本地开发应使用 localhost 服务而非 file:// 或私有 IP。
如何判断当前页面是否处于安全上下文
直接读取 self.isSecureContext 就行，它返回布尔值，不需要额外库或 polyfill。HTTPS 页面、http://localhost、http://127.0.0.1 都会返回 true；HTTP 公网地址、file:// 路径一律为 false。
常见误判点：
- 在 iframe 里执行该判断时，要看的是 iframe 自身的加载协议，不是父页——哪怕父页是 HTTPS，子 iframe 是 HTTP，
self.isSecureContext仍为false - 某些在线编辑器（如 CodePen 的 editor 模式）用
data:或沙箱 iframe 加载代码，self.isSecureContext必为false，不是你代码写错了 - 控制台手动输入
self.isSecureContext只反映当前 tab 的上下文，不能代表页面所有资源的加载环境
敏感 API 调用前必须做的校验逻辑
不能只靠 try/catch 捕获 NotAllowedError 或 SecurityError 来兜底——错误发生时用户已看到白屏或无响应，体验已损坏。应在调用前主动拦截。
典型写法：
立即学习“前端免费学习笔记（深入）”；
if (!self.isSecureContext) {
console.error('Sensitive API disabled: not in secure context');
// 不要跳转 location.href.replace(/^http:/, 'https:') —— 用户可能没配 HTTPS，会 404
// 推荐：显示友好提示 + 禁用相关 UI 按钮 + 记录埋点
document.getElementById('camera-btn').disabled = true;
document.getElementById('camera-tip').textContent = '请使用 HTTPS 或 localhost 访问';
return;
}
// 此时再调用 navigator.mediaDevices.getUserMedia()
注意：
-
self.isSecureContext是同步判断，无性能开销，可放心放在初始化逻辑最前端 - 不要在
DOMContentLoaded之后才检查——DOM 加载完成不代表资源已就绪，应尽早阻断 - 若页面依赖 Service Worker，注册前也必须加此判断，否则
navigator.serviceWorker.register()直接抛错
为什么加 meta 标签或 JS 跳转无法替代 HTTPS 配置
有人试图在 HTML 里加 <meta http-equiv="refresh" content="0; url=https://..."> 或用 JS 做协议替换，这解决不了根本问题。
原因很实际：
- HTTP 页面首次加载时，浏览器已拒绝初始化加密上下文——
crypto.subtle为undefined，navigator.credentials不可用，这些状态不可逆 - 用户看到的是空白页或卡顿，再跳转也晚了；且跳转后若证书无效，仍进不了 HTTPS
- 搜索引擎抓取 HTTP URL 会收录错误入口，导致长期流量损失
-
<meta>和 JS 跳转都发生在客户端，服务端仍暴露在明文传输中，中间人可篡改跳转逻辑
真正有效的是服务端 301 重定向（Nginx / Apache / CDN 层），确保用户浏览器根本收不到 HTTP 响应。
本地开发时绕过 file:// 限制的可靠做法
双击打开 HTML 文件必挂，这不是权限设置问题，是浏览器策略硬限制。唯一合规路径是让页面走 http://localhost。
推荐方案（任选其一）：
- VS Code 插件
Live Server：右键 HTML → “Open with Live Server”，自动起http://localhost:5500 - Python 内置服务：
python3 -m http.server 8000，然后访问http://localhost:8000 - Node.js 工具：
npx serve -s（自动找 index.html）或npx http-server -c-1（禁用缓存）
关键提醒：
- 不要用
--unsafely-treat-insecure-origin-as-secure启动 Chrome——该 flag 在 2026 年已弃用，且仅对单个启动实例生效，无法部署 - 避免用
http://192.168.x.x替代 localhost——除 127.0.0.1 外，其他 IP 默认不被视为安全上下文 - 即使本地开了 HTTP 服务，上线前仍必须配置 HTTPS，否则用户访问时所有敏感功能直接失效
