摘要：它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。网上也有现成的哈希值生成器，方便好用与你可以使用内容安全政策强制要求当前页面所有脚本加载标签启用。
出于速度和降低服务器负载考虑，有时候我们会选择使用 CDN 加载第三方静态资源。对于一些热门的第三方库，在用户打开你的网页之前就很有可能在浏览别的网站时被浏览器缓存下来，这样就可以极大的提升网页加载速度。
然而使用 CDN 也提高了网站的安全风险：第三方静态资源放在第三方服务器上，CDN 的拥有者有没有可能偷偷的篡改这些文件，加入恶意代码呢？或者 CDN 服务器遭受了黑客攻击，整个文件被替换掉。虽然可能性不高，但不是零。JavaScript 对于当前浏览器页面有完全控制权，他们不仅仅能获取到页面上的任何内容，还能抓取用户输入的一些诸如密码之类的机密信息，还能获取到保存到 Cookie 中的登录票据等等内容，这就是所谓的 XSS 攻击。
我们需要一种机制确保从 CDN 下载的文件未被恶意篡改。某些下载网站就提供下载文件的 MD5 或 SHA1 码用于检查所下载文件的完整性，网页中有没有类似的机制呢？
什么是 SRI子资源完整性 Subresource Integrity 简称 SRI 是一种安全机制，它用于让浏览器检查所下载的来自第三方的资源（例如 CDN）未被恶意篡改。它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。
使用 SRI只需给 script 或 style 标签添加 integrity 属性即可。例如：
JavaScript
CSS
integrity 属性值以 shaXXX- 开头，表示后面的哈希值使用的哈希算法，目前只允许 sha256、sha384 或 sha512 这三种哈希算法，以 sha384 比较多见。后面跟对应的哈希值即可。
值得注意的是，因为启用 SRI 需要获取所下载文件的内容进行计算，所以需要 CDN 服务器启用跨域资源访问（CORS）支持，即返回 Access-Control-Allow-Origin: * 头。客户端需要使用跨域的形式加载指定文件，即添加 crossorigin="anonymous" 属性。就我所知，目前国内相对常用的免费 CDN bootcdn 已经支持 CORS，百度静态 CDN 还不支持。
浏览器如何处理 SRI当浏览器遇到一个带有 integrity 的 script 或 style 标签，在执行其中的 JS 脚本或应用其中的 CSS 样式之前，浏览器会首先计算所下载文件的内容的哈希值是否与 integrity 属性给定的值相同。
如果计算结果与给定值不匹配，浏览器会拒绝执行脚本内容，并报出一个网络错误，类似如下结果：
Failed to find a valid digest in the "integrity" attribute for resource "https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" with computed SHA-256 integrity "VbcxqgMGQYm3q8qZMd63uETHXXZkqs7ME1bEvAY1xK8=". The resource has been blocked.如何计算哈希值
这是 SRI 标准文档提供的例子：
$ echo -n "alert("Hello, world.");" | openssl dgst -sha384 -binary | openssl base64 -A
使用了 OpenSSL 这个 *nix 中通常都包含的工具计算哈希值。其中 alert("Hello, world."); 是文件内容，你也可以用 cat Filename.js 直接读取某个文件。
输出 H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO，在此基础上添加前缀 sha384- 就可以了。
网上也有现成的 SRI 哈希值生成器，方便好用：https://srihash.org/
CSP 与 SRI你可以使用 内容安全政策 （CSP）强制要求当前页面所有脚本加载标签启用 SRI。例如
Content-Security-Policy: require-sri-for script;
强制要求所有 script 标签启用 SRI，浏览器会拒绝加载未启用 SRI 的 script 标签。
对应的还有 CSS 版本：
Content-Security-Policy: require-sri-for style;
你也可以同时启用两者。
错误恢复使用 CDN 时别忘了当尝试从 CDN 加载文件失败后加载本地版本：
")完
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/10987.html
摘要：它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。网上也有现成的哈希值生成器，方便好用与你可以使用内容安全政策强制要求当前页面所有脚本加载标签启用。 出于速度和降低服务器负载考虑，有时候我们会选择使用 CDN 加载第三方静态资源。对于一些热门的第三方库，在用户打开你的网页之前就很有可能在浏览别的网站时被浏...
摘要：它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。网上也有现成的哈希值生成器，方便好用与你可以使用内容安全政策强制要求当前页面所有脚本加载标签启用。 出于速度和降低服务器负载考虑，有时候我们会选择使用 CDN 加载第三方静态资源。对于一些热门的第三方库，在用户打开你的网页之前就很有可能在浏览别的网站时被浏...
摘要：它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。网上也有现成的哈希值生成器，方便好用与你可以使用内容安全政策强制要求当前页面所有脚本加载标签启用。 出于速度和降低服务器负载考虑，有时候我们会选择使用 CDN 加载第三方静态资源。对于一些热门的第三方库，在用户打开你的网页之前就很有可能在浏览别的网站时被浏...
摘要：与攻击相比，攻击往往很少见，因此对其进行防范的资源也相当稀少。不过，这种受信任的攻击模式更加难以防范，所以被认为比更具危险性。通过实时升级系统快速同步最新漏洞，避免零日攻击。 现在，我们绝大多数人都会在网上购物买东西。但是很多人都不清楚的是，很多电商网站会存在安全漏洞。比如乌云就通报过，国内很多家公司的网站都存在 CSRF 漏洞。如果某个网站存在这种安全漏洞的话，那么我们在购物的过程中...
摘要：虽然双十一刚刚过去不久，但是对很多工程师来说，连续熬夜加班的噩梦似乎还没有过去。尤其是像双十一这种活动，对于电商网站的工程师们来说，他们需要彻夜的加班加点来保障网站的稳定性和安全性。比如像这种攻击，在面前就不值一提。 虽然双十一刚刚过去不久，但是对很多工程师来说，连续熬夜加班的「噩梦」似乎还没有过去。尤其是像双十一这种活动，对于电商网站的工程师们来说，他们需要彻夜的加班加点来保障网站的...
阅读 2862·2021-11-19 09:40
阅读 2204·2021-10-14 09:42
阅读 1372·2021-09-22 15:34
阅读 1160·2019-08-30 15:55
阅读 579·2019-08-29 12:59
阅读 299·2019-08-28 18:28
阅读 1692·2019-08-26 13:42
阅读 1406·2019-08-26 13:29
