必须显式使用https://，因//协议相对URL在2026年已不可靠：CDN证书异常、HTTP回退或query参数会导致404或跳转失败，且无法规避中间人风险；浏览器在TCP连接前即拦截主动混合内容，Network面板显示blocked:mixed-content。
link 标签里的 href 必须显式使用 https://，不能留空协议或依赖浏览器自动补全——这是唯一能绕过 blocked:mixed-content 的做法。
为什么 //cdn.example.com/style.css 不再可靠
协议相对 URL（// 开头）在 2026 年已成高风险写法。很多 CDN 或字体服务虽支持 HTTPS，但证书配置异常、HTTP 回退逻辑存在、或 query 参数（如 ?v=2.1.0）导致重定向失败时，// 会直接触发 404 或跳转中断。更关键的是：它无法规避中间人篡改风险，浏览器仍可能因证书链不完整而拒绝加载，且不会给出明确提示。
主动混合内容（如 link）被拦截时，Network 面板里对应条目 Status 明确显示 blocked:mixed-content，不是超时也不是 404——是根本没发请求。这说明安全策略在 TCP 连接前就生效了，// 不参与这个判断，只负责拼接协议，不解决信任问题。
如何快速定位所有 HTTP CSS 引用
别手动翻 HTML 源码。打开 Chrome DevTools → Network 面板 → 刷新页面 → 在 Filter 输入框输入 mixed，所有被拦的请求立刻高亮。点击任一项，看 Initiator 列，就能反查到是哪行 link 或 JS 动态插入导致的。
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"><link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">- CSS 文件内部的
@import url("http://")或background: url("http://") - JS 动态创建：
const link = document.createElement('link'); link.href = 'http://xxx.com/style.css';
后端模板中动态生成的 CSS 链接怎么修
如果 href 是由 PHP/Python/Node.js 拼出来的，比如 echo '<link href="http://' . $host . '/css/app.css">'，光改前端没用。必须确保后端能正确识别当前请求协议。
检查服务器是否透传了 X-Forwarded-Proto: https 头；Nginx 常见遗漏配置是：proxy_set_header X-Forwarded-Proto $scheme;。若缺失，后端会误判为 HTTP，持续输出 http:// 链接。
更稳妥的做法是在模板层做协议判断：
- PHP：
echo '<link href="' . (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . $host . '/css/app.css">' - Node.js（Express）：
res.locals.protocol = req.protocol;，模板中用<link href="{{protocol}}://{{host}}/css/app.css">
修复后必须清缓存验证
浏览器和 CDN 缓存很可能还存着旧版 HTML，里面全是 http:// 链接。强制刷新（Ctrl+Shift+R）只是基础操作，还需：
- DevTools Network 面板勾选
Disable cache - 检查响应头是否有
Cache-Control: public, max-age=31536000类似长期缓存，需临时改为no-cache或缩短max-age - CDN 缓存要手动 purge，不能只等 TTL 过期
- 确认 Network 面板里 CSS 请求的 Protocol 列显示
h2或https，Status 是200，且 Console 无新Mixed Content报错
最易忽略的一点：第三方 CSS 文件内部嵌套的 @import 或 url() 也会触发拦截，且只在 Network 子请求里出现——得点开被拦项的 Initiator 链路逐层展开才能看到。
