现代浏览器强制阻止https页面加载http资源，称混合内容：主动型（脚本/iframe等）直接拦截，被动型（图片/视频等）chrome 94+/firefox 100+也默认阻止；csp无法绕过，修复须改用https或协议相对路径，第三方不支持https时需代理。
HTTPS 页面中直接加载 HTTP 资源（图片、脚本、样式、iframe 等）会被现代浏览器主动阻止，不是“兼容”或“运行”的问题，而是安全策略强制拦截 —— 这叫混合内容（Mixed Content）。
Chrome / Firefox 怎么处理 http:// 资源在 https:// 页面里
主流浏览器默认将混合内容分为两类：
-
主动混合内容（Active Mixed Content）：如
<script src="http://..."></script>、<iframe src="http://..."></iframe>、<link href="http://...">—— 直接被阻止加载，控制台报Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script/stylesheet/iframe... -
被动混合内容（Passive Mixed Content）：如
<img src="http://...?x-oss-process=image/resize,p_40">、<video src="http://..."></video>—— 早期可能仅警告，但 Chrome 94+ 和 Firefox 100+ 已默认同样阻止，除非用户手动点击“允许不安全内容”（极不推荐）
<meta http-equiv="Content-Security-Policy"> 能绕过混合内容限制吗
不能。CSP 是声明式策略，用于约束资源加载来源，但它无法授权已被浏览器底层禁用的行为。即使你写：
<meta http-equiv="Content-Security-Policy" content="default-src https:; img-src https: http:">浏览器仍会忽略
img-src http: 这部分，因为混合内容拦截发生在 CSP 执行之前。
- CSP 可以帮你发现哪些资源触发了混合内容（配合
report-uri或report-to） - 但修复必须靠改资源协议：把
http://example.com/logo.png改成https://example.com/logo.png或协议相对路径//example.com/logo.png（注意：后者依赖目标站支持 HTTPS） - 若第三方资源不支持 HTTPS（已下线、CDN 不配证书等），唯一可行方案是代理到自己 HTTPS 域下（如
/proxy/image?url=http%3A%2F%2Flegacy.example.com/icon.gif），并确保该接口可信、带 CORS 头
本地开发时 http://localhost 加载 https:// 资源会触发混合内容吗
不会。浏览器对 localhost、127.0.0.1 和 file:// 协议有特殊豁免，不执行混合内容检查。但这是开发便利性设计，上线前务必验证所有资源走 HTTPS，否则生产环境必然失败。
- 常见陷阱：开发时用
http://api.dev模拟后端，上线却忘了切到https://api.prod - 更隐蔽的问题：CSS 中的
background: url(http://...)、JS 里拼接的fetch('http://...')、甚至字体文件@font-face src: url(http://...)都算混合内容 - 排查建议：打开 DevTools → Network 标签页，筛选
http://，再看是否出现红色blocked:mixed-content状态
混合内容不是配置开关能打开的特性，它是浏览器硬性安全边界。真正要做的，是让所有子资源可被 HTTPS 访问 —— 这背后涉及 CDN 配置、第三方服务协议升级、静态资源托管策略，以及团队对“协议一致性”的日常校验习惯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
