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

Posted 2023-03-03

技术标签:

【中文标题】什么是完整性和跨域属性？【英文标题】：What are the integrity and crossorigin attributes? 【发布时间】：2015-11-09 10:50:05 【问题描述】：

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

【问题讨论】：

【参考方案1】：

这两个属性都已添加到 Bootstrap CDN 以实现 Subresource Integrity。

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

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

Crossorigin 属性 在使用“CORS”加载请求时出现，现在这是在未从“同源”加载时进行 SRI 检查的要求。 More info on crossorigin

More detail on Bootstrap CDNs implementation

【讨论】：

刚刚使用 w3c html 验证器并在使用“完整性”属性时收到此消息：Attribute integrity not allowed on element link at this point. @TomasGonzalez 我认为您可以放心地假设 w3c 工具尚未更新以包含 SRI 支持仅供参考：也向验证器提交了一个错误：github.com/validator/validator/issues/151 这里是 W3C HTML 检查器（又名验证器）的维护者。是的，抱歉，检查器对integrity 属性一无所知。但我会尽快根据github.com/validator/validator/issues/151 的要求添加对它的支持。因此，您可能希望订阅该问题以在它登陆时收到通知。 OnlineWebCheck.com 支持integrity 属性（我是该检查器的维护者）。【参考方案2】：

完整性 - 定义必须匹配的资源的哈希值（如校验和）以使浏览器执行它。哈希确保文件未被修改并包含预期的数据。这样浏览器就不会加载不同的（例如恶意的）资源。想象一下，您的 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 请求中，如下所示。

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>

如果跨域设置不正确，浏览器可以取消请求。

链接

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

【讨论】：

非常有用的答案！感谢您的回答。我喜欢技术细节！我们如何判断文件的完整性是否是尚未被操纵的文件？有什么建议吗？ @yon.fun：请不要建议编辑添加您自己的链接。即使您的内容很有价值，我们也对此处可能出现的垃圾邮件非常敏感。您是否应该为同源资源包括 SRI，如果是，为什么？【参考方案3】：

从技术上讲，Integrity 属性 有助于实现这一点 - 它可以正确验证数据源。也就是说，它仅允许浏览器根据位于 CDN 服务器上的源文件请求的数量来验证正确源文件中的数字。

再深入一点，如果此源的已建立加密哈希值并检查其与浏览器中预定义值的合规性 - 代码将执行，并且用户请求已成功处理。

Crossorigin 属性帮助开发者优化 CDN 性能，同时保护网站代码免受恶意脚本的攻击。

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

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

【讨论】：

以上是关于什么是完整性和跨域属性？的主要内容，如果未能解决你的问题，请参考以下文章