完整性和跨域属性是什么？

362

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属性是什么意思？它们如何影响样式表的加载？

— 新用户
source

Answers:

237

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

子资源完整性定义哪些用户代理可以验证所取的资源已经没有意外的操作提供了一种机制参考

完整性属性是允许浏览器检查文件源，以确保如果源已被操纵，则从不加载代码。

当使用“ CORS”加载请求时，会出现Crossorigin属性，现在，当未从“ same-origin”加载时，这是SRI检查的要求。有关跨域的更多信息

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

— 吉姆·泰勒1974
source

刚使用过w3c html验证程序，并在使用“完整性”属性时收到了此消息：Attribute integrity not allowed on element link at this point.

— Tomas Gonzalez 2015年

@TomasGonzalez我认为您可以放心地假设w3c工具尚未更新为包括SRI支持

— Josh_at_Savings_Champion 2015年

仅供参考：也向验证者提交了一个错误：github.com/validator/validator/issues/151

— jonathanKingston，

W3C HTML Checker（又名验证器）的维护者。是的，很抱歉，检查器还不了解该integrity属性。但是我将尽快按照github.com/validator/validator/issues/151的要求添加对此的支持。因此，您可能希望订阅该问题，以便在着陆时获得通知。

— sideshowbarker

OnlineWebCheck.com支持该integrity属性（我是该检查器的维护者）。

— 艾伯特·维尔施

112

完整性 -定义必须匹配才能使浏览器执行的资源（例如校验和）的哈希值。哈希确保文件未修改且包含预期数据。这样，浏览器将不会加载其他（例如恶意）资源。想象一下您的JavaScript文件在CDN上被黑，而无法知道的情况。完整性属性可防止加载不匹配的内容。

无论跨来源如何，无效的SRI都会被阻止（Chrome开发者工具）。在完整性属性不匹配的NON-CORS情况下：

可以使用以下方法计算完整性：https : //www.srihash.org/ 或在控制台中输入（link）：

openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A

crossorigin-定义从其他来源的服务器加载资源时使用的选项。（请参阅CORS（跨源资源共享），网址为：https : //developer.mozilla.org/en-US/docs/Web/HTTP/CORS）。它有效地更改了浏览器发送的HTTP请求。如果添加了“ crossorigin”属性-它将导致将起源：<ORIGIN>键值对添加到HTTP请求中，如下所示。

跨域可以设置为“匿名”或“使用凭证”。两者都会导致将origin：添加到请求中。但是，后者将确保检查凭据。标记中的crossorigin属性不会导致发送不带Origin：键/值对的请求。

这是从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
: //tools.ietf.org/html/rfc6454-https
: //developer.mozilla.org/zh-CN/docs/Web/HTML /元素/链接

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

— 维托尔德·卡祖尔巴（Witold Kaczurba）
source

非常有用的答案！

— Emiel Koning'Mar

感谢您的回答。我喜欢技术细节！

— Anh Tran

我们如何判断文件的完整性是否尚未被操纵？有什么建议吗？

— vadi taslim

@ yon.fun：请不要建议进行修改以添加自己的链接。即使您的内容有价值，我们对可能的垃圾邮件也非常敏感。

— 半夜

从技术上讲，Integrity属性可以提供帮助-可以正确验证数据源。也就是说，它仅允许浏览器使用CDN服务器上源文件所请求的数量来验证正确的源文件中的数字。

更深一点的是，如果此源的已建立加密哈希值及其在浏览器中检查的预定义值符合性得以执行，则代码将执行，并且用户请求将被成功处理。

Crossorigin属性可帮助开发人员优化CDN性能的速率，同时保护网站代码免受恶意脚本的侵害。

特别是，Crossorigin以匿名方式下载站点的程序代码，而无需下载cookie或执行身份验证过程。这样，当您首次将站点加载到特定的CDN服务器上时，它可以防止用户数据泄漏，网络欺诈者可以轻松地替换地址。

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

— 永乐
source