HTML中link标签integrity属性在多CDN加速配置中怎么保证资源安全加载-html教程-PHP中文网

加了 integrity 却未拦截篡改，主因是缺失 crossorigin="anonymous" 或 cdn 未返回 access-control-allow-origin: *；多 cdn 场景下还易因压缩差异、重定向、无效标签（如 as="image"）等导致 sri 失效。

html中link标签integrity属性在多cdn加速配置中怎么保证资源安全加载

加了 integrity 却没拦住被篡改的 CSS 或 JS，大概率不是 CDN 被劫持了，而是你漏掉了 crossorigin="anonymous"，或者 CDN 没返回 Access-Control-Allow-Origin: * —— 这两个条件缺一，校验就静默跳过，资源照常加载，控制台连 warning 都没有。

为什么多 CDN 场景下 `integrity` 更容易失效

多个 CDN（比如 https://css.cdn.com、https://js.cdn.com、https://fonts.cdn.com）意味着更多响应头和内容协商变数。常见翻车点：

integrity 值是用本地文件或未压缩版算的，但 CDN 实际返回的是 Brotli 压缩后、带 BOM、末尾多空格的版本 —— 哈希必然不匹配
某个 CDN（如老旧镜像站）压根不返回 Access-Control-Allow-Origin，导致浏览器拿不到响应体，SRI 根本无法启动
CDN 开启了 302 重定向（比如从 /v1/app.css 跳到 /v1.2.3/app.css），浏览器对跳转后的 URL 做哈希比对，而你算的是原始 URL 的内容
你给 <link rel="preload" as="image"> 加了 integrity —— 它不支持 SRI，写了等于白写

`integrity` 只对哪些 `<link>` 生效

浏览器只认三种组合，其他全忽略：

<link rel="stylesheet" href="..." integrity="..." crossorigin="anonymous"> ✅
<link rel="preload" as="font" href="..." integrity="..." crossorigin="anonymous"> ✅（字体支持 SRI）
<link rel="preload" as="script" href="..." integrity="..." crossorigin="anonymous"> ✅（脚本预加载也支持）
<link rel="icon">、<link rel="preload" as="image">、<link as="style"> ❌ 全部无效，不校验也不报错

特别注意：<link rel="stylesheet"> 是唯一常用且必须配 integrity 的样式链路；as="font" 和 as="script" 预加载虽支持，但实际业务中极少需要校验预加载资源本身。

html-ppt-to-pdf

将使用 `

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

下载

生成可靠 `integrity` 值的实操要点

别信本地文件、别抄别人页面、别依赖在线工具——唯一可信路径是直取 CDN 响应体：

用 curl -sL https://css.cdn.com/main.css 获取真实响应（-L 自动跟随重定向，-s 静默）
哈希算法优先选 sha384：抗碰撞更强，jsDelivr、unpkg、cdnjs 全支持；sha512 浏览器不认，写了也无效
命令示例：curl -sL https://css.cdn.com/main.css | openssl dgst -sha384 -binary | openssl base64 -A
输出结果必须是 sha384- 开头 + Base64 字符串（不是 hex），例如：sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC

生成后务必手动测试：把 integrity 值临时删掉一位，刷新页面，确认控制台出现 The resource was blocked because integrity check failed —— 这才说明机制真在起作用。

多 CDN 下 `crossorigin` 配置的兼容性陷阱

crossorigin 不是可选项，是 SRI 的强制开关：

crossorigin="anonymous"：最安全通用，不带 cookie，要求 CDN 返回 Access-Control-Allow-Origin: *（公开 CDN 都满足）
crossorigin="use-credentials"：仅当你自己的后端需鉴权访问静态资源时才用，此时 CDN 必须返回 Access-Control-Allow-Origin: https://your-site.com + Access-Control-Allow-Credentials: true，否则请求直接失败
crossorigin="" 在 Chrome 中等价于 anonymous，但 Firefox 解析更严格，建议统一写死为 crossorigin="anonymous"
拼写错误如 crossorigin="true"、CROSSORIGIN、crossorigin="ANONYMOUS" 都会导致校验静默失效