前端资源完整性校验Subresource Integrity 防篡改实战一、CDN 上的 JS 文件被中间人篡改用户浑然不知执行了恶意代码CDN 劫持不是科幻场景。中间网络设备路由器、ISP 缓存在特定条件下可能篡改或替换静态资源。如果在页面中通过script srchttps://cdn.example.com/app.js引入脚本浏览器会无条件地下载并执行——它不关心文件是否被篡改。Subresource IntegritySRI是浏览器层面的防御机制在script或link标签上添加integrity属性指定目标资源的哈希值。浏览器下载资源后计算哈希并与integrity比对不匹配则拒绝加载。二、SRI 的工作机制sequenceDiagram participant Browser as 浏览器 participant HTML as HTML 文档 participant CDN as CDN participant Attacker as 攻击者 HTML-Browser: script integritysha384-xxx srccdn.com/app.js Browser-CDN: GET /app.js alt 正常路径 CDN--Browser: app.js (原始内容) Browser-Browser: 计算 SHA-384 哈希 Browser-Browser: 比对 integrity ✅ 匹配 Browser-Browser: 执行脚本 else 篡改路径 (中间人攻击) Attacker--Browser: app.js (被篡改内容) Browser-Browser: 计算 SHA-384 哈希 Browser-Browser: 比对 integrity ❌ 不匹配 Browser-Browser: 拒绝加载 Console 报错 end Note over Browser: SRI 检查是浏览器原生行为br/不依赖任何 JavaScript 代码SRI 的两个关键特性浏览器原生支持Chrome/Firefox/Safari/Edge 全部支持不需要任何 JavaScript 代码。哈希算法多样支持sha256、sha384、sha512。推荐sha384——足够安全且计算速度适中。三、生产级 SRI 集成方案构建时自动生成 integrity 哈希// webpack-sri-plugin.js // Webpack 插件构建时自动为生成的 JS/CSS 文件计算 SRI 哈希 const crypto require(crypto); const fs require(fs); const path require(path); class SRIWebpackPlugin { constructor(options {}) { this.options { algorithm: options.algorithm || sha384, // 排除不需要 SRI 的文件模式 exclude: options.exclude || [/\.html$/, /\.map$/], }; } apply(compiler) { compiler.hooks.afterEmit.tapAsync( SRIWebpackPlugin, (compilation, callback) { const assets compilation.assets; const sriManifest {}; // 遍历所有生成的资源 Object.keys(assets).forEach((filename) { // 检查是否需要排除 if (this.shouldExclude(filename)) return; const assetPath path.join( compilation.outputOptions.path, filename ); if (!fs.existsSync(assetPath)) return; // 读取文件内容并计算哈希 const content fs.readFileSync(assetPath); const hash crypto .createHash(this.options.algorithm) .update(content) .digest(base64); // SRI 格式: algorithm-base64hash const integrity ${this.options.algorithm}-${hash}; sriManifest[filename] { integrity, size: content.length, }; }); // 输出 SRI Manifest供模板引擎使用 const manifestPath path.join( compilation.outputOptions.path, sri-manifest.json ); fs.writeFileSync( manifestPath, JSON.stringify(sriManifest, null, 2) ); console.log( [SRI Plugin] 已为 ${Object.keys(sriManifest).length} 个资源生成 SRI 哈希 ); callback(); } ); } shouldExclude(filename) { return this.options.exclude.some((pattern) pattern.test(filename)); } } module.exports SRIWebpackPlugin;HTML 模板中自动注入 integrity// inject-sri.js // HTML 模板辅助函数根据 Manifest 自动注入 integrity 属性 const fs require(fs); const path require(path); class SRIInjector { constructor(manifestPath) { // 加载构建时生成的 SRI manifest this.manifest JSON.parse(fs.readFileSync(manifestPath, utf-8)); } /** * 为脚本资源生成带 integrity 的 script 标签 * param {string} src - 脚本 URL 路径 * param {Object} options - 额外属性 */ scriptTag(src, options {}) { const integrity this.getIntegrity(src); // 构建属性字符串 let attrs src${src}; if (integrity) { attrs integrity${integrity}; // crossoriginanonymous 必须在 integrity 存在时设置 // 否则浏览器不会执行 SRI 校验 attrs crossoriginanonymous; } if (options.async) attrs async; if (options.defer) attrs defer; return script ${attrs}/script; } /** * 为样式资源生成带 integrity 的 link 标签 */ linkTag(href, options {}) { const integrity this.getIntegrity(href); let attrs relstylesheet href${href}; if (integrity) { attrs integrity${integrity}; attrs crossoriginanonymous; } return link ${attrs}; } /** * 从 Manifest 中查找资源的 integrity 值 */ getIntegrity(resourceUrl) { // 提取文件名 const filename resourceUrl.split(/).pop().split(?)[0]; // 在 manifest 中查找匹配的文件 for (const [key, value] of Object.entries(this.manifest)) { if (key.endsWith(filename)) { return value.integrity; } } console.warn([SRI] 未找到资源 ${filename} 的 integrity 值); return null; } } module.exports SRIInjector;CSP 配合 SRI 的强化策略# nginx.conf 添加 Content-Security-Policy 头 add_header Content-Security-Policy default-src self; script-src self https://cdn.example.com require-sri-for sha384-abc123def456...; # 允许的内联脚本哈希 style-src self https://cdn.example.com require-sri-for; always;四、SRI 的局限和注意事项缺点文件更新时的同步问题每次构建文件哈希都变如果 CDN 上的文件和 HTML 中的 integrity 不同步先推送了 CDN 还是先发了 HTML用户会看到白屏。必须在部署流程中保证原子性。不支持动态脚本document.createElement(script)动态创建的脚本标签不支持 integrity。需要另外实现校验。Crossorigin 要求的陷阱如果 CDN 不返回Access-Control-Allow-Origin头浏览器即使下载成功也不会做 SRI 校验。禁用场景同源加载的资源src/app.jsCDN 劫持不适用SRI 无额外收益。资源 URL 动态拼接的场景无法预计算哈希。五、总结SRI 是防范 CDN 资源篡改的浏览器原生机制。集成流程构建时计算资源哈希生成 Manifest模板引擎根据 Manifest 自动注入integrity和crossorigin属性。必须注意三个工程细节资源部署和 HTML 部署的原子性避免哈希和文件不同步、CDN 需要支持 CORS 头、配置 CSP 的require-sri-for做兜底防护。
前端资源完整性校验Subresource Integrity 防篡改实战一、CDN 上的 JS 文件被中间人篡改用户浑然不知执行了恶意代码CDN 劫持不是科幻场景。中间网络设备路由器、ISP 缓存在特定条件下可能篡改或替换静态资源。如果在页面中通过script srchttps://cdn.example.com/app.js引入脚本浏览器会无条件地下载并执行——它不关心文件是否被篡改。Subresource IntegritySRI是浏览器层面的防御机制在script或link标签上添加integrity属性指定目标资源的哈希值。浏览器下载资源后计算哈希并与integrity比对不匹配则拒绝加载。二、SRI 的工作机制sequenceDiagram participant Browser as 浏览器 participant HTML as HTML 文档 participant CDN as CDN participant Attacker as 攻击者 HTML-Browser: script integritysha384-xxx srccdn.com/app.js Browser-CDN: GET /app.js alt 正常路径 CDN--Browser: app.js (原始内容) Browser-Browser: 计算 SHA-384 哈希 Browser-Browser: 比对 integrity ✅ 匹配 Browser-Browser: 执行脚本 else 篡改路径 (中间人攻击) Attacker--Browser: app.js (被篡改内容) Browser-Browser: 计算 SHA-384 哈希 Browser-Browser: 比对 integrity ❌ 不匹配 Browser-Browser: 拒绝加载 Console 报错 end Note over Browser: SRI 检查是浏览器原生行为br/不依赖任何 JavaScript 代码SRI 的两个关键特性浏览器原生支持Chrome/Firefox/Safari/Edge 全部支持不需要任何 JavaScript 代码。哈希算法多样支持sha256、sha384、sha512。推荐sha384——足够安全且计算速度适中。三、生产级 SRI 集成方案构建时自动生成 integrity 哈希// webpack-sri-plugin.js // Webpack 插件构建时自动为生成的 JS/CSS 文件计算 SRI 哈希 const crypto require(crypto); const fs require(fs); const path require(path); class SRIWebpackPlugin { constructor(options {}) { this.options { algorithm: options.algorithm || sha384, // 排除不需要 SRI 的文件模式 exclude: options.exclude || [/\.html$/, /\.map$/], }; } apply(compiler) { compiler.hooks.afterEmit.tapAsync( SRIWebpackPlugin, (compilation, callback) { const assets compilation.assets; const sriManifest {}; // 遍历所有生成的资源 Object.keys(assets).forEach((filename) { // 检查是否需要排除 if (this.shouldExclude(filename)) return; const assetPath path.join( compilation.outputOptions.path, filename ); if (!fs.existsSync(assetPath)) return; // 读取文件内容并计算哈希 const content fs.readFileSync(assetPath); const hash crypto .createHash(this.options.algorithm) .update(content) .digest(base64); // SRI 格式: algorithm-base64hash const integrity ${this.options.algorithm}-${hash}; sriManifest[filename] { integrity, size: content.length, }; }); // 输出 SRI Manifest供模板引擎使用 const manifestPath path.join( compilation.outputOptions.path, sri-manifest.json ); fs.writeFileSync( manifestPath, JSON.stringify(sriManifest, null, 2) ); console.log( [SRI Plugin] 已为 ${Object.keys(sriManifest).length} 个资源生成 SRI 哈希 ); callback(); } ); } shouldExclude(filename) { return this.options.exclude.some((pattern) pattern.test(filename)); } } module.exports SRIWebpackPlugin;HTML 模板中自动注入 integrity// inject-sri.js // HTML 模板辅助函数根据 Manifest 自动注入 integrity 属性 const fs require(fs); const path require(path); class SRIInjector { constructor(manifestPath) { // 加载构建时生成的 SRI manifest this.manifest JSON.parse(fs.readFileSync(manifestPath, utf-8)); } /** * 为脚本资源生成带 integrity 的 script 标签 * param {string} src - 脚本 URL 路径 * param {Object} options - 额外属性 */ scriptTag(src, options {}) { const integrity this.getIntegrity(src); // 构建属性字符串 let attrs src${src}; if (integrity) { attrs integrity${integrity}; // crossoriginanonymous 必须在 integrity 存在时设置 // 否则浏览器不会执行 SRI 校验 attrs crossoriginanonymous; } if (options.async) attrs async; if (options.defer) attrs defer; return script ${attrs}/script; } /** * 为样式资源生成带 integrity 的 link 标签 */ linkTag(href, options {}) { const integrity this.getIntegrity(href); let attrs relstylesheet href${href}; if (integrity) { attrs integrity${integrity}; attrs crossoriginanonymous; } return link ${attrs}; } /** * 从 Manifest 中查找资源的 integrity 值 */ getIntegrity(resourceUrl) { // 提取文件名 const filename resourceUrl.split(/).pop().split(?)[0]; // 在 manifest 中查找匹配的文件 for (const [key, value] of Object.entries(this.manifest)) { if (key.endsWith(filename)) { return value.integrity; } } console.warn([SRI] 未找到资源 ${filename} 的 integrity 值); return null; } } module.exports SRIInjector;CSP 配合 SRI 的强化策略# nginx.conf 添加 Content-Security-Policy 头 add_header Content-Security-Policy default-src self; script-src self https://cdn.example.com require-sri-for sha384-abc123def456...; # 允许的内联脚本哈希 style-src self https://cdn.example.com require-sri-for; always;四、SRI 的局限和注意事项缺点文件更新时的同步问题每次构建文件哈希都变如果 CDN 上的文件和 HTML 中的 integrity 不同步先推送了 CDN 还是先发了 HTML用户会看到白屏。必须在部署流程中保证原子性。不支持动态脚本document.createElement(script)动态创建的脚本标签不支持 integrity。需要另外实现校验。Crossorigin 要求的陷阱如果 CDN 不返回Access-Control-Allow-Origin头浏览器即使下载成功也不会做 SRI 校验。禁用场景同源加载的资源src/app.jsCDN 劫持不适用SRI 无额外收益。资源 URL 动态拼接的场景无法预计算哈希。五、总结SRI 是防范 CDN 资源篡改的浏览器原生机制。集成流程构建时计算资源哈希生成 Manifest模板引擎根据 Manifest 自动注入integrity和crossorigin属性。必须注意三个工程细节资源部署和 HTML 部署的原子性避免哈希和文件不同步、CDN 需要支持 CORS 头、配置 CSP 的require-sri-for做兜底防护。
)
)
)
