HTTPS 页面中的混合内容是什么？浏览器为什么会阻止部分 HTTP 资源？
简化版
混合内容是指 HTTPS 页面中加载了 HTTP 资源。
如果 HTTPS 页面引用 HTTP 脚本、样式、iframe、XHR 等主动内容，攻击者可以篡改这些资源，从而破坏整个页面安全，所以浏览器通常会阻止。
图片、视频等被动内容历史上可能允许加载或自动升级，但现代浏览器也越来越严格。解决方式是全站 HTTPS、资源 URL 改为 HTTPS、使用 CSP 的 upgrade-insecure-requests 或修复第三方资源。
详细版
示例：
<script src="http://cdn.example.com/app.js"></script>
<img src="http://img.example.com/a.png">页面本身是 HTTPS，但资源走 HTTP。
脚本属于主动内容，一旦被中间人篡改，就能执行任意代码，因此风险很高。
图片更多影响展示，但也可能泄露信息或被替换。
浏览器控制台常见报错类似：
Mixed Content: The page was loaded over HTTPS, but requested an insecure script.排查时要看页面源代码、接口返回内容、第三方 SDK、CSS 中的 url(http://...)。
完整版教学
1. 先解释混合内容为什么危险
HTTPS 保护的是页面和服务端之间的传输。
但如果页面里又加载 HTTP 资源，这部分资源不受 TLS 保护。
攻击者可以在网络中篡改 HTTP 资源。
如果被篡改的是 JavaScript，攻击者就可能控制整个页面。
HTTPS 页面只要执行了不安全脚本，页面整体安全性就会被短板拖垮。
2. 主动内容和被动内容
混合内容通常按风险分成两类。
主动内容会影响页面执行逻辑。
例如：
- JavaScript
- CSS
- iframe
- XHR 或 fetch
- WebSocket 明文连接
被动内容更多用于展示。
例如：
- 图片
- 音频
- 视频
主动内容风险更高，浏览器通常直接阻止。
3. 一个典型例子
页面地址：
https://www.example.com页面里写了：
<script src="http://cdn.example.com/app.js"></script>这意味着主页面是加密传输，但核心脚本是明文传输。
中间人可以把 app.js 替换成恶意脚本。
恶意脚本运行后，可以读取页面内容、窃取 token、发起请求、修改 DOM。
所以浏览器会强制拦截这类资源。
4. 浏览器处理策略
| 资源类型 | 风险 | 常见处理 |
|---|---|---|
| script | 高 | 阻止 |
| stylesheet | 高 | 阻止或严格限制 |
| iframe | 高 | 阻止 |
| fetch/XHR | 高 | 阻止 |
| image | 中 | 可能允许、警告或自动升级 |
| video/audio | 中 | 策略较宽但逐渐收紧 |
实际策略会随浏览器版本变化，但方向是越来越严格。
5. 如何修复混合内容
修复思路是让所有子资源都走安全通道。
- 把资源 URL 改为
https://。 - 使用协议相对 URL 的历史写法要谨慎，更推荐明确 HTTPS。
- 检查 CSS 文件里的
url(http://...)。 - 检查富文本、CMS、第三方 SDK 注入的链接。
- 配置 CDN HTTPS 证书。
- 使用 CSP 自动升级不安全请求。
示例 CSP：
Content-Security-Policy: upgrade-insecure-requests它会让浏览器尝试把 HTTP 子资源升级为 HTTPS。
6. 和 HSTS 的区别
HSTS 告诉浏览器以后访问某个站点时强制使用 HTTPS。
混合内容处理关注的是 HTTPS 页面内部加载的子资源。
二者可以配合，但不是同一个机制。
例如主站开启 HSTS，不代表第三方图片域名也一定支持 HTTPS。
因此全站 HTTPS 迁移时，要把主域、静态资源域名、API 域名、第三方资源一起梳理。
7. 常见误区与追问
- 误区：主页面是 HTTPS 就绝对安全。 如果加载 HTTP 主动内容，页面仍可能被攻破。
- 误区：只有 script 会造成混合内容。 CSS、iframe、XHR、字体、图片等都可能触发。
- 误区：把 HTTP 资源放到 CDN 就安全。 CDN URL 也必须使用 HTTPS，并正确配置证书。
- 追问：为什么图片有时不被直接阻止？ 图片一般不执行代码，风险低于脚本，但仍可能泄露或被替换。
- 追问：CSP upgrade-insecure-requests 有什么用？ 让浏览器自动尝试把子资源 HTTP 请求升级为 HTTPS。
- 追问：混合内容和跨域是一回事吗？ 不是，混合内容关注安全协议，跨域关注源策略。
8. 加强记忆
混合内容记成“HTTPS 页面里混进了 HTTP 短板”。
主动内容一旦不安全，整页安全就不成立。