integrity属性是和标签的原生属性，用于指定资源的加密哈希值（如sha-256），浏览器下载后自动校验，不匹配则拒绝执行；必须配合crossorigin="anonymous"使用，且哈希绑定确切字节内容，需锁定版本并避免cdn压缩干扰。
使用 integrity 属性为外部脚本添加哈希校验，是防止 CDN 劫持、确保脚本内容未被篡改的关键手段。它基于 Subresource Integrity（SRI）标准，浏览器会在执行前比对下载资源的哈希值与标签中声明的值，不匹配则拒绝执行。
什么是 integrity 属性？
integrity 是 <script></script> 和 <link> 标签的原生属性，用于指定资源的加密哈希值（如 SHA-256、SHA-384、SHA-512）。浏览器下载脚本后自动计算其哈希，并与该值比对。若不一致，脚本不会执行，控制台报错（如 “Failed to find a valid digest in the ‘integrity’ attribute”）。
它不替代 HTTPS，而是补充——即使 HTTPS 防止传输中被窃听，也无法阻止 CDN 节点本身被入侵或配置错误导致返回恶意代码。
如何生成并添加 integrity 值？
需两步：获取脚本原始内容 → 计算强哈希 → 写入 HTML 标签。不能直接用 CDN URL 在线生成，必须确保源文件未被压缩/混淆/动态修改（推荐从官方发布页下载原始 .js 文件）。
- 命令行生成（以 SHA-256 为例）：
curl -s https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js | openssl dgst -sha256 -binary | openssl base64 -A
输出类似：sha256-1XmBqZ...+Uw== - 在线工具辅助（仅限可信环境）：可使用 srihash.org 粘贴脚本内容或上传文件生成多算法哈希
- 写入 HTML 示例：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js">integrity="sha256-1XmBqZ...+Uw==" crossorigin="anonymous"></script>
必须同时设置 crossorigin 属性
integrity 生效的前提是脚本跨域加载时启用 CORS。否则浏览器会忽略校验（因无法读取响应体来计算哈希）。
- CDN 资源几乎都跨域，所以
crossorigin不可省略 - 推荐值为
crossorigin="anonymous"（默认凭据模式关闭，兼容性最好） - 若资源需要 Cookie 或认证头，才用
crossorigin="use-credentials"，但此时 CDN 必须返回Access-Control-Allow-Origin显式授权，且 integrity 校验仍有效
实际使用中的关键注意事项
- 哈希值绑定的是**确切字节内容**：脚本哪怕多一个空格、换一行、或被 CDN 自动 Gzip/Brotli 压缩后再解压（部分旧 CDN 有此行为），都会导致校验失败
- 版本必须锁定：不要用
vue@3这类泛版本，而要用vue@3.4.21这样的精确版本，否则更新后哈希失效 - 避免混用多个哈希算法：虽然支持
sha256、sha384、sha512并列（空格分隔），但建议只保留一种（优先sha384，安全性与兼容性平衡更好） - 构建工具可自动化：Webpack/Vite 等可通过插件（如
webpack-subresource-integrity）在打包时自动生成并注入 integrity 值，避免手动维护出错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
