什么是完整性和crossorigin属性？

Question

Bootstrapcdn最近改变了他们的链接.它现在看起来像这样:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">

这些integrity和crossorigin属性是什么意思？它们如何影响样式表的加载？

Answer 1

这两个属性都已添加到Bootstrap CDN以实现子资源完整性.

子资源完整性定义了一种机制,通过该机制,用户代理可以验证已提供的已获取资源而无需意外操作参考

Integrity属性允许浏览器检查文件源,以确保在操作源时从不加载代码.

当使用'CORS'加载请求时,会出现Crossorigin属性,现在这是在未从'same-origin'加载时进行SRI检查的要求. 关于crossorigin的更多信息

有关Bootstrap CDN实现的更多详细信息

Answer 2

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:<ORIGIN>键值对添加到HTTP请求中,如下所示.

crossorigin可以设置为:"anonymous"或"use-credentials".两者都会导致将原点添加到请求中.然而,后者将确保检查凭证.标记中没有crossorigin属性将导致发送没有origin的请求:键值对.

以下是从CDN请求"use-credentials"的情况:

<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>

如果错误设置了crossorigin,浏览器可以取消该请求.

链接
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML /元/链接

博客
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity