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