HTML中link标签的integrity校验失败时的应急处理方法-html教程-PHP中文网

integrity校验失败时浏览器直接丢弃资源，根本原因是sri校验链断裂：需同时满足link有integrity属性、显式声明crossorigin="anonymous"、服务端返回access-control-allow-origin响应头。

html中link标签的integrity校验失败时的应急处理方法

integrity校验失败时，浏览器直接丢弃资源，不解析、不执行、不触发任何 JS 回调——你看到的白屏或样式错乱，不是加载慢，是资源被主动扔掉了。

为什么写了integrity却报“The resource was blocked because integrity check failed”

这不是哈希算错了那么简单。根本原因是校验链断裂：浏览器只在 link[rel="stylesheet"] 同时满足三个条件时才启动 SRI —— 有 integrity 属性、显式声明 crossorigin（如 crossorigin="anonymous"）、且服务端响应头包含 Access-Control-Allow-Origin。漏掉任意一个，校验就静默跳过；但只要启动了却失败，结果就是资源被丢弃。

crossorigin 拼错（比如写成 crossorigin="anonymouse"）或留空（crossorigin="" 在 Firefox 下不等价于 anonymous）
CDN 返回了 301/302 重定向，而你本地算的哈希基于跳转前的 URL 或跳转后的中间响应体
服务端开了 Gzip/Brotli 压缩，但没配 Vary: Accept-Encoding，导致不同 UA 拿到不同编码版本
用了 sha256- 前缀，但实际文件是用 sha384 算的，或 base64 编码时多/少了一个 =

如何快速定位到底是哪个环节断了

别猜，用命令行拿真实响应体验证：

curl -sL https://cdn.example.com/style.css | openssl dgst -sha384 -binary | openssl base64 -A

把输出值填进 integrity，再检查 HTML 中是否同时存在：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<link rel="stylesheet" href="..." integrity="sha384-xxx" crossorigin="anonymous">
用 curl -I https://cdn.example.com/style.css 确认返回头含 Access-Control-Allow-Origin: *，且状态码是 200（非 301/302）
打开 DevTools → Network → 找到该 CSS 请求 → 查看 Response Headers 和 Preview 是否正常渲染

校验失败后怎么 fallback 而不白屏

浏览器不会触发 onerror，也不能靠 window.onerror 捕获。唯一可靠方式是监听全局 error 事件并匹配目标标签：

document.addEventListener('error', e => {
  if (e.target instanceof HTMLLinkElement && e.target.rel === 'stylesheet') {
    const fallback = document.createElement('link');
    fallback.rel = 'stylesheet';
    fallback.href = '/fallback.css'; // 本地兜底路径
    document.head.appendChild(fallback);
  }
});