概述SRI为外部脚本与样式增加完整性校验,浏览器会在资源哈希不匹配时拒绝加载。结合 `crossorigin` 与缓存策略,可在保障安全的同时保持性能。关键实践与参数哈希算法: `sha256` `sha384` `sha512`属性配置: `<script integrity="..." crossorigin="anonymous">`生成方式: 在构建阶段生成并注入哈希资源更新: 每次版本更新需重新计算哈希示例/配置/实现openssl dgst -sha256 -binary app.js | openssl base64 -A <link rel="stylesheet" href="https://cdn.com/app.css" integrity="sha384-BASE64HASH" crossorigin="anonymous"> <script src="https://cdn.com/app.js" integrity="sha256-BASE64HASH" crossorigin="anonymous"></script> import crypto from 'crypto' function sri(content, algo = 'sha256') { return `${algo}-${crypto.createHash(algo).update(content).digest('base64')}` } 验证哈希匹配: 修改资源后SRI哈希失效, 浏览器拒绝加载浏览器支持: 主流浏览器支持SRI并在控制台提示性能与缓存: 与CDN缓存协同, 未影响首屏安全性: 防止供应链篡改与中间人攻击注意事项每次构建需重新生成哈希并替换搭配CSP限制来源进一步提升安全确保 `crossorigin` 设置以使SRI生效对自托管资源亦可启用SRI

发表评论 取消回复