html integrity完整性校验

2026-04-23 17:00:08 1726阅读 0评论

用 HTML 的 integrity 属性守护网页资源的“可信度”

网页加载的每一处细节，都关乎用户体验与安全。在引入外部脚本或资源时，轻率地拼接 src 或 href，很容易让页面暴露在不可预知的改动之下：代码被篡改、资源被替换，甚至引发性能波动与兼容性问题。要降低这类风险，一个安静却有效的办法是使用 HTML 的 integrity 属性，配合 subresource integrity（子资源完整性），在资源加载前校验其哈希，确保只加载“可信”的资源。

为什么需要资源完整性校验

想象你在网页里嵌入了一段关键的脚本，它负责处理表单、动态渲染或性能监控。如果这个脚本被替换了，不仅功能可能出错，还可能带来安全风险：比如把恶意代码混入其中，或把资源替换成更慢的版本，导致页面加载变慢、体验变差。

integrity 就是为了解决这类问题而生的。它不依赖于服务器侧的配置，也不需要改动现有构建流程，只要在引入资源时加上校验信息，浏览器会在加载时自动进行哈希比对，不匹配即阻止资源加载或按策略处理，从而在资源链路中加入一道安全关口。

如何使用 integrity

使用 integrity 的步骤很简单：为需要校验的资源生成对应的哈希值，并在 src 或 href 属性中加入该值。

选择合适的算法与格式

常用的有 sha3-256、sha-256、sha-512 等。建议优先使用 sha-256，兼容性较好且安全性足够。格式为：

[hash-algorithm] [hash-value]

例如：

integrity="sha-256-abc123xyz..."

生成哈希的思路

手动计算在开发环境并不现实，需要在构建或发布时由工具自动生成。常见做法是在构建脚本中调用 hash 管理工具，对 dist 目录下的资源逐个生成哈希并写入到 HTML 文件中。

你可以这样理解：每次资源文件变更都会重新生成对应的哈希值，确保 HTML 中的 integrity 与实际文件一致，构建成功后即可放心上线。

实战：在 script 与 link 中使用

在 script 中：

<script src="/path/to/your/script.js" 
        integrity="sha-256-abc123xyz..." 
        crossorigin="anonymous">
</script>

在 link 中：

<link rel="stylesheet" href="/path/to/your/style.css" 
      integrity="sha-256-abc123xyz..." 
      crossorigin="anonymous">

注意：当使用 crossorigin 时，需要配合 integrity，以确保跨域请求的资源也能被校验。

常见问题与注意事项

不适用于 CDN 或压缩资源：CDN 上的资源通常会被压缩或缓存，导致无法直接生成 integrity 哈希。这类场景下，可以先在源站生成并发布原始资源，再由 CDN 缓存或压缩，避免校验失效。
资源变更的处理：一旦资源内容变化，HTML 中的 integrity 值也会失效，导致资源被浏览器拦截。因此需要在构建时自动更新这些值，并在 CI/CD 中纳入校验。
性能权衡：虽然 integrity 会带来额外的校验步骤，但其带来的安全性提升远大于潜在风险。若网络环境差或资源体积较大，可以设置资源过期时间或优先级，但校验本身不会影响资源的下载。
与服务端配置的关系：integrity 是客户端校验，不会绕过服务端的配置。服务端的缓存或重定向不会影响 integrity 校验结果。