SecureContext 是浏览器自动判定的安全上下文机制，仅当页面通过 HTTPS、localhost 或 file:// 加载时生效，用于限制 Web Crypto、Geolocation 等敏感 API 的调用；非安全上下文（如 HTTP）下这些 API 被禁用，需服务端重定向、HSTS 及前端检测协同保障全链路安全。
SecureContext 是浏览器内置的安全机制，不是开发者手动“启用”的功能，而是由当前页面是否运行在安全上下文中自动决定的。只有当页面通过 HTTPS（或 localhost、file:// 等明确豁免环境）加载时，self.isSecureContext 才为 true，此时才能使用如 Web Crypto API、Geolocation、Clipboard API、WebSocket Secure（wss）、Service Worker 等敏感特性。换句话说，SecureContext 本身不“保障”你的应用只能在安全协议下运行——它只是拒绝在非安全上下文中执行高危操作。
确认当前是否处于 SecureContext
可通过 JavaScript 直接判断：
if (self.isSecureContext) { /* 可安全调用加密/设备API */ }- 在控制台输入
self.isSecureContext查看返回值（HTTPS 页面通常为true，HTTP 页面为false） - 注意：仅靠该值无法阻止用户访问 HTTP 页面，它只限制 API 调用权限
强制应用只在安全上下文中可用
真正实现“只能在安全协议下运行”，需从服务端和前端协同控制：
- 服务器配置 HTTPS 强制重定向：所有 HTTP 请求（80 端口）301 跳转至对应 HTTPS 地址（443 端口）
- 设置严格传输安全头（HSTS）：
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload，让浏览器自动升级后续请求 - 前端检测并中断非安全访问：
if (!self.isSecureContext) {<br> location.replace(location.href.replace(/^http:/, 'https:'));<br> // 或显示提示页 + 阻止核心逻辑执行<br> }
避免常见降级漏洞
即使主页面是 HTTPS，仍可能因资源引用不当导致 SecureContext 失效：
立即学习“前端免费学习笔记（深入）”；
- 禁止混用 HTTP 资源：图片、脚本、样式表、iframe、WebSocket 连接（
ws://）均会触发“混合内容”警告，部分浏览器直接屏蔽 - WebSocket 必须用
wss://：HTTPS 页面中new WebSocket('ws://...')会被浏览器拦截，必须动态拼接协议：const wsUrl = location.protocol === 'https:' ? 'wss://' : 'ws://'; - 检查第三方 SDK：某些分析或广告脚本仍加载 HTTP 接口，需确认其提供 HTTPS 入口或替换为合规版本
开发与测试注意事项
本地开发常依赖 localhost，它被浏览器默认视为 SecureContext（无需证书），但要注意：
-
127.0.0.1和localhost均受信任，但自定义 hosts 映射（如dev.example.com）必须配 HTTPS 才能获得 SecureContext - 使用
http://127.0.0.1:3000仍属于非安全上下文，无法调用 Web Crypto 等 API；应改用https://localhost:3000并配置本地证书 - 移动端调试时，USB 连接的 Chrome 会继承桌面策略，但 iOS Safari 对 localhost 的 SecureContext 支持更严格，建议统一走 HTTPS
