integrity - 定义必须匹配的资源的哈希值(如校验和),以使浏览器执行它。 哈希确保文件未经修改并包含预期数据。 这样浏览器就不会加载不同的(例如恶意的)资源。 想象一下你的JavaScript文件被CDN攻击的情况,并且没有办法知道它。 完整性属性可防止加载不匹配的内容。
无效的SRI将被阻止(Chrome开发人员 - 工具),无论其是否来源。 在完整性属性不匹配时的NON-CORS情况下:
完整性可以使用以下公式计算:[https://www.srihash.org/]或者输入控制台(链接):
openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A
crossorigin - 定义从不同来源的服务器加载资源时使用的选项。 (请参阅此处的CORS:[https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)。]它有效地更改了浏览器发送的HTTP请求。 如果添加“crossorigin”属性 - 它将导致添加原点:< ORIGIN> 键值对进入HTTP请求,如下所示。
crossorigin可以设置为:“anonymous”或“use-credentials”。 两者都会导致将原点添加到请求中。 然而,后者将确保检查凭证。 标记中没有crossorigin属性将导致发送没有origin的请求:键值对。
以下是从CDN请求“use-credentials”的情况:
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="use-credentials">
如果错误设置了crossorigin,浏览器可以取消该请求。
链接
- [https://www.w3.org/TR/cors/]
- [https://tools.ietf.org/html/rfc6454]
- [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link]
博客
- [https://frederik-braun.com/using-subresource-integrity.html]
- [https://web-security.guru/en/web-security/subresource-integrity]