Chrome Network面板筛选http://可准确定位所有混合内容，包括富文本、CSS background、JS动态拼接等隐蔽源头；需勾选Preserve log、刷新后查看Status为blocked:mixed-content的请求，并通过Initiator定位具体文件与行号。
Chrome Network 面板里搜 http:// 才能准确定位所有混合内容
控制台红字只报显眼的 <script src="http://">，但大量混合内容根本不会出现在初始 HTML 里。比如富文本字段存的 <img src="http://">、CSS 里的 background: url(http://)、JS 运行时拼的 fetch('http://' + domain)，这些全靠 Network 面板筛 http:// 才能暴露。
操作步骤很简单：
- 打开 Chrome DevTools（F12）→ 切到 Network 标签页
- 勾选 Preserve log（防止跳转后日志清空）
- 刷新页面，在 Filter 输入框直接输入
http:// - 看 Status 列是否为
blocked:mixed-content，再点开看Initiator是哪个 JS 文件或 CSS 行号
CSS 和 JS 动态加载的 http:// 最容易被忽略
很多人只改了 HTML 里的 <img src="http://">，却漏掉更隐蔽的源头：
- CSS 中的
@import "http://"、@font-face { src: url(http://) }、background: url(http://) - JS 里硬编码的
new Image().src = 'http://xxx.com/a.jpg'或el.style.backgroundImage = 'url(http://)' - 第三方 SDK（如老版百度统计）在 JS 里用
document.write('<script src="http://"></script>')，你改不了源码，只能换 SDK 或拦截重写 - 后端模板（PHP/Thymeleaf）中拼 URL 时没判断协议，比如
echo 'http://' . $host . '/logo.png'，应改用$_SERVER['HTTPS'] === 'on'或框架的url()函数
https:// 是唯一可靠写法，// 在 2026 年已不适用
别再用 //cdn.example.com/app.js 这种协议相对 URL——它在现代环境里基本等于埋雷：
立即学习“前端免费学习笔记（深入）”；
- CDN 若已停用 HTTP 端口（多数主流 CDN 已如此），请求会直接返回
net::ERR_CONNECTION_REFUSED - 本地开发用
file://打开 HTML 时，//会被解析成file://cdn.example.com/，必然失败 -
fetch()、XMLHttpRequest、new Image().src中写//，浏览器当相对路径处理，不是协议继承 - OSS 类资源带 query 参数（如
https://oss.example.com/a.jpg?x-oss-process=image/resize,p_50），部分 CDN 回源规则不匹配 HTTPS，导致 404
真正能落地的做法：显式写死 https://，但前提是确认目标域名证书有效、支持 TLS 1.2+；否则先升级对方服务或换源。
修复后仍报错？重点检查三类“假 HTTPS”场景
把所有 http:// 换成 https:// 后还出问题，大概率是以下情况：
- CDN 域名（如
cdn.example.com）没配 HTTPS 或证书过期 → 浏览器报net::ERR_CERT_DATE_INVALID或直接 404 - 第三方广告/客服脚本压根不提供 HTTPS 接口 → 替换后发出去但返回 404 或连接拒绝
- 构建工具（Webpack/Vite）配置的
publicPath或assetPrefix写死了http://，打包产物里依然含http://
特别注意：SVG 内联时的 xlink:href="http://" 已废弃，必须删掉 xlink: 前缀改用 href="https://"；<meta property="og:image" content="http://"> 和 <link rel="icon" href="http://"> 这些 meta 标签也常被漏掉。
