出于速度和服务器负载的考虑，有时我们会选择使用CDN来加载第三方静态资源。对于一些流行的第三方库，在用户打开你的网页之前，浏览其他网站时很可能会被浏览器缓存，这样可以大大提高网页加载速度。但是使用CDN也增加了网站的安全风险：第三方静态资源放在第三方服务器上。CDN的拥有者是否有可能偷偷篡改这些文件并添加恶意代码？或者CDN服务器被黑，整个文件被替换。虽然不太可能，但它不是零。JavaScript可以完全控制当前浏览器页面。他们不仅可以获取页面上的任何内容，还可以抓取用户输入的密码等一些机密信息，获取保存在cookies中的登录票据。等等，这就是所谓的XSS攻击。我们需要一种机制来保证从CDN下载的文件没有被恶意篡改。一些下载网站会提供下载文件的MD5或SHA1码来检查下载文件的完整性。网页中是否有类似的机制？什么是SRISubresourceIntegritySubresourceIntegrity，简称SRI，是一种安全机制，允许浏览器检查从第三方（如CDN）下载的资源是否被恶意篡改。它使用哈希检查来确保第三方资源的完整性。只要开发人员提供正在下载的资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。要使用SRI，只需将integrity属性添加到script或style标签中。例如：JavaScriptCSS完整性属性值以shaXXX-开头，表示后面的哈希值使用的哈希算法。目前只允许使用三种哈希算法，sha256、sha384或sha512，其中sha384更为常见。后面是对应的哈希值。值得注意的是，因为开启SRI需要获取下载文件的内容进行计算，CDN服务器需要开启跨域资源访问（CORS）支持，即返回Access-Control-Allow-Origin:*标头。客户端需要以跨域形式加载指定文件，即添加crossorigin="anonymous"属性。据我所知国内比较常用的免费CDNbootcdn已经支持CORS，而百度静态CDN还不支持。浏览器如何处理SRI当浏览器遇到具有完整性的脚本或样式标签时，在执行JS脚本或应用CSS样式之前，浏览器会先计算下载文件内容的哈希值是否与给定的值一致由完整性属性相同。如果计算结果与给定值不匹配，浏览器将拒绝执行脚本内容并报网络错误，类似如下结果：Failedtofindavaliddigestinthe'integrity'attributeforresource'https://CDNJS。cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css'具有计算的SHA-256完整性'VbcxqgMGQYm3q8qZMd63uETHXXZkqs7ME1bEvAY1xK8='。该资源已被阻止。如何计算哈希值是SRI标准文档提供的例子：$echo-n"alert('Hello,world.');"|openssldgst-sha384-二进制|opensslbase64-A使用*nix中通常包含的工具OpenSSL来计算哈希值。哪里警报（'你好，世界。'）;是文件的内容，也可以使用catFilename.js直接读取一个文件。输出H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO，并在此基础上加上前缀sha384-。网上还有现成的SRI哈希值生成器，方便易用：https://srihash.org/CSP并且SRI可以使用ContentSecurityPolicy(CSP)强制所有脚本加载标签上当前页面启用SRI。例如，Content-Security-Policy:require-sri-for脚本；所有脚本标签都必须启用SRI，浏览器将拒绝加载未启用SRI的脚本标签。还有对应的CSS版本：Content-Security-Policy:require-sri-forstyle；您也可以同时启用两者。使用CDN时的错误恢复当尝试从CDN加载文件失败时不要忘记加载本地版本：')结束
