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

完整性和交叉源属性是什么意思?它们如何影响样式表的加载?


当前回答

完整性——定义资源的哈希值(如校验和),必须匹配才能让浏览器执行它。散列确保文件未被修改,并包含预期的数据。这样浏览器就不会加载不同的(例如恶意的)资源。想象一下这样一种情况,您的JavaScript文件在CDN上被黑客攻击,而且没有办法知道它。完整性属性防止加载不匹配的内容。

无效的SRI将被阻止(Chrome developer-tools),无论跨起源。当完整性属性不匹配时,以下为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”属性,它将导致在HTTP请求中添加origin: < origin >键值对,如下所示。

交叉检索可以设置为“匿名”或“使用凭证”。这两种情况都会导致在请求中添加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>

如果交叉源设置不正确,浏览器可以取消请求。

链接

https://www.w3.org/TR/cors/ https://www.rfc-editor.org/rfc/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

其他回答

从技术上讲,Integrity属性有助于实现这一点——它允许对数据源进行正确的验证。也就是说,它只允许浏览器验证正确的源文件中的数字与位于CDN服务器上的源文件请求的数量。

再深入一点,如果这个源的加密散列值已经建立,并且检查了它是否符合浏览器中的预定义值,代码就会执行,用户请求就会被成功处理。

Crossorigin属性可以帮助开发者优化CDN的性能,同时保护网站代码不受恶意脚本的侵害。

其中,Crossorigin以匿名方式下载网站的程序代码,不需要下载cookie,也不需要进行身份验证。这样,当你第一次在特定的CDN服务器上加载网站时,它可以防止用户数据泄露,网络骗子可以很容易地替换地址。

来源:https://yon.fun/what-is-link-integrity-and-crossorigin/

完整性——定义资源的哈希值(如校验和),必须匹配才能让浏览器执行它。散列确保文件未被修改,并包含预期的数据。这样浏览器就不会加载不同的(例如恶意的)资源。想象一下这样一种情况,您的JavaScript文件在CDN上被黑客攻击,而且没有办法知道它。完整性属性防止加载不匹配的内容。

无效的SRI将被阻止(Chrome developer-tools),无论跨起源。当完整性属性不匹配时,以下为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”属性,它将导致在HTTP请求中添加origin: < origin >键值对,如下所示。

交叉检索可以设置为“匿名”或“使用凭证”。这两种情况都会导致在请求中添加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>

如果交叉源设置不正确,浏览器可以取消请求。

链接

https://www.w3.org/TR/cors/ https://www.rfc-editor.org/rfc/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

这两个属性都已添加到引导CDN以实现子资源完整性。

子资源完整性定义了一种机制,通过该机制,用户代理可以验证获取的资源是否已经在没有意外操作的情况下交付

完整性属性允许浏览器检查文件源,以确保在源被操作时不会加载代码。

当使用“CORS”加载请求时,会出现Crossorigin属性,当没有从“同源”加载时,这是SRI检查的一个要求。 更多关于交叉基因的信息

更多关于Bootstrap cdn实现的详细信息