https页面加载http资源会触发混合内容警告并被浏览器阻止；主动型（如script、iframe）默认拦截致白屏，被动型（如图片）显示“不安全”提示且将被逐步屏蔽。
HTTPS 页面里加载 HTTP 资源会触发混合内容警告
不会“依赖”，而是直接被浏览器阻止——现代浏览器（Chrome、Firefox、Edge）默认拦截主动型混合内容（http:// 的 script、iframe、img、css 等），页面可能白屏或功能异常。被动型（如 http:// 图片）虽有时仍显示，但地址栏会出现“不安全”提示，且未来会被一并屏蔽。
关键判断标准：只要 HTML 文档通过 https:// 加载，所有子资源协议必须是 https:// 或协议相对路径（//example.com/asset.js），否则就是混合内容。
检查混合内容用 Chrome DevTools 的 Security 面板最准
打开页面后按 F12 → 切到 Security 标签页，顶部会明确标出“Mixed Content”数量；点开下方 “View certificate” 旁的 “Show details” 可展开全部被阻塞的 http:// 请求列表，包括具体 URL 和资源类型。
常见漏网场景：
- 硬编码的
http://CDN 地址（如<script src="http://cdn.example.com/jquery.js"></script>） - 后端模板拼接的 URL 没做协议适配（例如 PHP 中
"http://" . $_SERVER['HTTP_HOST']） - 富文本编辑器存的旧内容含
http://图片链接 - 第三方统计/埋点脚本未提供 HTTPS 入口
修复混合内容优先改协议，慎用 // 协议相对路径
协议相对路径（//cdn.example.com/xxx.js）能自动继承当前页面协议，但存在两个实际问题：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在本地文件系统打开 HTML（
file://协议）时，//会失效，变成file://cdn.example.com导致 404 - 部分老旧代理或企业防火墙会错误解析
//，导致请求发错端口或被拦截
更稳妥的做法是：
- 所有外部资源显式写成
https://（确认目标域名支持 HTTPS） - 内部资源统一用相对路径（
/js/main.js），由 Web 服务器自动走 HTTPS - 后端生成 HTML 时，用
$_SERVER['HTTPS'] === 'on'（PHP）或req.protocol === 'https'（Node.js）动态拼协议
Content-Security-Policy 头可辅助发现但不能替代修复
加 Content-Security-Policy: block-all-mixed-content 响应头，能让浏览器在控制台报更明确的 Mixed Content 错误（而非静默降级），但它只是检测手段，不解决根本问题。
注意两点：
- 这个 header 不影响已存在的混合内容行为（该阻还是阻，该不安全还是不安全）
- 若页面本身有大量历史
http://链接，开启后可能突然大量报错，建议先用report-uri或report-to收集数据再上线
真正难处理的是第三方 SDK 或嵌入的 iframe，它们的协议往往不受你控制——这时候得联系服务商升级 HTTPS，或者换用已支持 HTTPS 的替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
