混合内容治理：upgrade-insecure-requests 与 block-all-mixed-content

概述混合内容指 HTTPS 页面加载 HTTP 资源。`upgrade-insecure-requests` 将可升级的请求自动改为 HTTPS；`block-all-mixed-content` 阻止剩余的非安全请求。用法/示例Content-Security-Policy: upgrade-insecure-requests; block-all-mixed-content 工程建议统一资源域名与证书，避免跨域导致的不可升级；审计第三方资源。分阶段开启并观察错误上报，处理不可升级资源的替换或代理。配合 HSTS 强制 HTTPS，提升整体安全基线。参考与验证MDN：Mixed content — https://developer.mozilla.org/docs/Web/Security/Mixed_contentMDN：`upgrade-insecure-requests` — https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requestsMDN：`block-all-mixed-content` — https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content---title: 混合内容治理：upgrade-insecure-requests 与 block-all-mixed-contentcategories:技术前端开发安全keywords:Content-Security-Policyupgrade-insecure-requestsblock-all-mixed-contentMixed ContentHTTPSdescription: 系统梳理 CSP 中的 upgrade-insecure-requests 与 block-all-mixed-content 两个指令的行为差异、适用场景与迁移策略，帮助团队稳健治理混合内容。date: 2025-11-26sources:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requestshttps://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-contenthttps://www.w3.org/TR/mixed-content/https://w3c.github.io/webappsec-upgrade-insecure-requests/---概述混合内容是指在 HTTPS 页面中加载经由 HTTP 的资源（脚本、样式、图片、iframe 等）。这既破坏端到端加密，又可能被中间人篡改。CSP 提供两种治理指令：`upgrade-insecure-requests` 与 `block-all-mixed-content`，前者“自动升级”不安全请求为 HTTPS，后者“彻底阻断”所有混合内容。指令差异与适用场景upgrade-insecure-requests：行为：将文档内所有 HTTP 子资源请求在发送前重写为 HTTPS（若目标可通过 HTTPS 访问）。适用：已完成大部分资源的 HTTPS 化，但仍存在历史链接或第三方资源可用 HTTPS 的情况下，用于“平滑迁移”。风险：被重写的资源若不支持 HTTPS 会失败；某些绝对 URL（如协议不匹配）可能引发跨域或证书问题。block-all-mixed-content：行为：在任何情况下阻止文档中出现 HTTP 子资源加载，包含主动与被动内容（脚本、样式、XHR、图片、视频等）。适用：完成全面 HTTPS 化之后，作为强制策略兜底，彻底消除混合内容。风险：旧内容或用户生成内容（UGC）中携带的 `http://` 链接可能导致资源不可见或功能失效。行为细节与兼容性浏览器支持：现代主流浏览器（Chromium、Firefox、Safari）均支持两指令，移动端同样兼容（参考 MDN）。受影响的资源类型：脚本、样式、XHR/fetch、图片、媒体、字体、iframe、websocket（ws→wss）。与 HSTS 的关系：`upgrade-insecure-requests` 侧重“页面内请求升级”，HSTS 侧重“域名级强制 HTTPS”；二者可叠加以提升覆盖率。与子资源完整性（SRI）：资源升级后仍建议保持 SRI 校验，防止 CDN 或第三方被入侵。迁移与实施建议盘点与清理以静态扫描（HTML、模板、CMS）与动态抓取（HAR、网络日志）识别 `http://` 资源。优先替换成协议相对路径或绝对 `https://` 地址，并校验证书与跨域。渐进策略阶段一：仅开启 `upgrade-insecure-requests`，观察升级成功率与错误日志。阶段二：对关键路径完成 HTTPS 化后，结合 `block-all-mixed-content` 在灰度环境启用。阶段三：全量启用 `block-all-mixed-content`，保留 `upgrade-insecure-requests` 兜底（可选）。回滚与例外出现功能性回退时，临时移除 `block-all-mixed-content`，保留 `upgrade-insecure-requests`；同时快速修复不支持 HTTPS 的资源来源。避免通过放宽 CSP 来“豁免”混合内容；如确需展示历史图片，可考虑代理到自有 HTTPS 端点。示例配置在响应头设置 CSP（推荐优先使用响应头而非 `<meta>`）：Content-Security-Policy: upgrade-insecure-requests; block-all-mixed-content; default-src 'self' https: data:; img-src 'self' https: data:; script-src 'self' https: 'unsafe-inline'; style-src 'self' https: 'unsafe-inline'; connect-src 'self' https: 说明：组合使用两指令可在“升级 + 严格阻断”双重模式下治理混合内容（先升级可用资源，仍为 HTTP 的请求将被阻断）。根据业务需要完善各类源列表（`script-src`/`style-src`/`img-src`/`connect-src` 等），尽量限制到 `https:` 与受信域名。验证与监控本地与预生产：打开浏览器控制台与网络面板，检查是否存在被升级或被阻断的 HTTP 请求；同时关注证书错误、跨域与 SRI 失败。生产观测：采集浏览器错误日志（CSP violation reports），定位混合内容来源与失败率。对含 UGC 的页面（论坛、评论、富文本）增加内容过滤（替换/校验 URL）。常见陷阱与规避第三方仅支持 HTTP：评估业务必要性，优先寻找支持 HTTPS 的等价服务或通过反向代理到自有域。协议相对 URL：`//example.com` 在 HTTPS 页面会走 HTTPS，但若目标域未配置 TLS 会失败；上线前需批量验证。WebSocket：确保从 `ws://` 迁移到 `wss://`，并更新后端握手与证书链。CDN 缓存：资源域名切换到 HTTPS 后，检查缓存与重定向配置，避免 301/302 链导致性能劣化。结论`upgrade-insecure-requests` 适合迁移初期的“自动升级”，`block-all-mixed-content` 适合迁移完成后的“强制阻断”。二者结合能在不牺牲安全性的前提下，平衡上线风险与改造效率；配合 HSTS、SRI 与日志观测，可实现对混合内容的长期稳健治理。---title: 混合内容治理：upgrade-insecure-requests 与 block-all-mixed-contentdate: 2025-11-26categories:前端安全浏览器策略keywords:Mixed Contentupgrade-insecure-requestsblock-all-mixed-contentHTTPSCSPdescription: 通过 CSP 的 upgrade-insecure-requests 与 block-all-mixed-content 强制资源走 HTTPS 并阻断混合内容，给出落地配置、迁移策略与验证方法，提升安全与一致性。---概述混合内容是指在 HTTPS 页面中加载经由 HTTP 的子资源（脚本、样式、图片、iframe、WebSocket 等）。`upgrade-insecure-requests` 会将可升级的 HTTP 请求在发送前重写为 HTTPS；`block-all-mixed-content` 则在任何情况下阻断文档中的 HTTP 子资源加载。二者结合可实现“先升级、再兜底阻断”的治理路径。关键实践与参数指令组合：`upgrade-insecure-requests; block-all-mixed-content`（先升级，再阻断仍为 HTTP 的请求）适用阶段：迁移初期：仅启用 `upgrade-insecure-requests`，观察升级成功率与错误日志迁移完成：启用 `block-all-mixed-content` 作为强制兜底关联策略：与 HSTS（域级强制 HTTPS）协同，覆盖导航与子资源与 SRI（Subresource Integrity）协同，防止被升级后的第三方/CDN资源被篡改资源类型：脚本、样式、XHR/fetch、图片、媒体、字体、iframe、WebSocket（ws→wss）等均受影响示例/配置/实现Content-Security-Policy: upgrade-insecure-requests; block-all-mixed-content; default-src 'self' https: data:; img-src 'self' https: data:; script-src 'self' https:; style-src 'self' https:; connect-src 'self' https: <!-- 不推荐使用 meta，优先用响应头；此处仅演示 --> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests; block-all-mixed-content"> // Node/Express 注入响应头（示意） app.use((req, res, next) => { res.setHeader('Content-Security-Policy', "upgrade-insecure-requests; block-all-mixed-content") next() }) 验证本地与预生产：打开浏览器控制台与网络面板，检查是否存在被升级或被阻断的 HTTP 请求；关注证书错误、跨域与 SRI 失败生产观测：采集 CSP 违规报告（violation reports），定位混合内容来源与失败率；对含 UGC 的页面（评论、富文本）增加内容过滤（替换/校验 URL）升级成功率：统计可升级资源比例与失败原因（目标不支持 HTTPS、证书问题、跨域等）注意事项第三方仅支持 HTTP：评估业务必要性，优先寻找支持 HTTPS 的等价服务或通过反向代理到自有 HTTPS 端点协议相对 URL：`//example.com` 在 HTTPS 页面会走 HTTPS，但若目标域未配置 TLS 会失败；上线前需批量验证WebSocket：确保从 `ws://` 迁移到 `wss://`，并更新后端握手与证书链CDN 缓存：资源域名切换到 HTTPS 后，检查缓存与重定向配置，避免 301/302 链导致性能劣化