完整性- 定义必须匹配以使浏览器执行它的资源的哈希值(如校验和)。哈希确保文件未被修改并包含预期的数据。这样浏览器就不会加载不同的(例如恶意的)资源。想象一下,您的 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: <ORIGIN>键值对添加到 HTTP 请求中,如下所示。
crossorigin可以设置为“匿名”或“使用凭据”。两者都会导致将origin:添加到请求中。然而,后者将确保检查凭据。标签中没有 crossorigin 属性将导致发送无源请求:键值对。
这是从 CDN 请求“使用凭据”的情况:
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="use-credentials"></script>
如果跨域设置不正确,浏览器可以取消请求。
链接
博客