html完整性检测,html - 什么是完整性和crossorigin属性？

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”属性 - 它将导致添加原点：＆lt; ORIGIN＆gt; 键值对进入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]