HTML5 与 HTTPS，页面能力、必要性、常见问题与实战排查
随着浏览器与平台对安全策略的严格化，HTML5 相关能力——Service Worker、WebRTC(getUserMedia)、Push、地理位置、IndexedDB 等——基本都要求在 HTTPS 环境下使用。对开发者而言，把页面与资源全面迁移到 HTTPS 并非简单“换个证书”，而是涉及证书链、混合内容、CSP、跨域、CDN 配置、以及移动真机的兼容性问题。下面从工程实战角度给出要点、常见故障与可执行的排查流程，并说明在 iOS 真机或代理失效场景下如何辅以真机抓包进行定位。
为什么 HTML5 功能必须 HTTPS
- 浏览器政策：浏览器将很多强权限 API 限定为 secure context，以防窃听、回放或中间人攻击。
- 功能需求：Service Worker 需要控制范围和缓存策略，只有 HTTPS 才保证脚本不可被篡改。
- 用户信任：HTTPS 提供身份验证与机密性，是现代 Web 的基本前提。
落地要点（工程实践）
- 证书与链路：使用受信任 CA 的 fullchain，避免缺失中间证书导致老设备报错。
- 强制跳转：在边缘（Nginx/CDN）统一 301 到 HTTPS，后续用 HSTS 强制浏览器仅走 HTTPS（上线前慎用预加载）。
- 混合内容：所有脚本、样式、图片、font、video 都必须使用 HTTPS，否则会被浏览器阻止或警告。自动化检查可用构建阶段的静态扫描工具。
- CSP 与安全头：配置 Content-Security-Policy、X-Frame-Options、Referrer-Policy，既提升安全也避免加载第三方不安全资源。
- Service Worker 与 scope：Service Worker 的 scope 与 origin 绑定，部署时注意目录结构与 SW registration 的 scope 参数。
移动与 iOS 真机的特殊问题
- WebView 与 App 内嵌页面：App 的 WebView 可能继承 App 的网络策略或做额外的证书校验，导致“浏览器正常但 App 内不行”。
- SSL Pinning / mTLS：某些企业 App 使用 Pinning 或双向认证，普通代理工具无法解密流量，排查需要更底层的证据。
- 旧版系统兼容：老安卓/旧 iOS 在证书链、签名算法支持上存在差异，必须在多版本上验证。
实战排查流程（遇到 HTML5 功能异常或加载失败）
- 用浏览器 DevTools 看 Console/Network，定位是资源被阻止（mixed content）、Fetch/Service Worker 错误、还是权限被拒（getUserMedia）。
- curl / openssl 验证 TLS：
curl -v https://example.com检查重定向与响应头；openssl s_client -connect example.com:443 -servername example.com -showcerts检查 fullchain 与 ALPN（HTTP/2）。
- 检查 CSP / Referrer / Feature-Policy 导致的权限限制。
- 若问题只在 App 内出现，尝试在设备浏览器访问同一 URL；若浏览器正常而 App 异常，优先怀疑 WebView 配置、Pinning 或网络中间件。
- 当常规代理（Charles/mitmproxy）无法抓到 App 流量或无法解密时，使用能从设备导出底层流量的方案：将设备 USB 连接到开发机并用真机抓包工具抓取原始包，导出 pcap，在 Wireshark 中分析 TLS 握手、SNI、ServerHello 与任何 TLS Alert。
关于真机抓包的补充说明（何时用、怎么用）
在不能修改 App 或无法在设备上安装代理证书时，USB 直连抓包能提供关键证据。比如 App 在调用 getUserMedia 时被拒绝但浏览器正常，通过直连抓包可以看到是否为证书链问题、TLS 握手被中断，或是后台返回的 JSON 被 CDN 拦截。**抓包大师（Sniffmaster）**之类的工具支持 USB 直连 iOS、按 App 精准抓取并导出 pcap，方便在 Wireshark 中对握手与应用层请求做逐包分析，这是在高安全或生产环境下取证和定位的可靠补充手段（前提是合规与授权）。
部署与上线建议（工程化）
- 在 CI/CD 中加入 mixed-content 扫描与证书检测步骤；自动运行
curl/openssl验证多地区边缘的证书生效。 - 提前做“真机回归”：除桌面浏览器外，覆盖 iOS Safari、WebView 与主要 Android 机型。
- 将 HSTS、Service Worker 生命周期与 Cache 策略纳入发布文档，避免误用导致回滚困难。
- 对于涉及摄像头/麦克风/地理位置信息的页面，提前准备权限申请与 UX 流程，保证用户在 HTTPS 环境下能顺利授权。
小结：把 HTTPS 当作基础设施来工程化
HTML5 的许多能力依赖 HTTPS，但 HTTPS 本身又有很多运维细节（证书链、OCSP、SNI、CDN 回源）。把这些检查做成自动化、把真机抓包工具纳入常用工具箱，并在遇到 App/真机场景异常时用直连抓包导出 pcap 做握手与流量的底层对比，能把很多“偶发、只在个别设备发生”的问题变成可复现与可修复的工程任务。