Html 完整性和跨域属性是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32039568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are the integrity and crossorigin attributes?
提问by New user
Bootstrapcdn recently changed their links. It now looks like this:
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">
What do the integrityand crossoriginattributes mean? How do they affect the loading of the stylesheet?
什么做integrity和crossorigin属性是什么意思？它们如何影响样式表的加载？
回答by jim.taylor.1974
Both attributes have been added to Bootstrap CDN to implement Subresource Integrity.
这两个属性都已添加到 Bootstrap CDN 以实现子资源完整性。
Subresource Integrity defines a mechanism by which user agents may verify that a fetched resource has been delivered without unexpected manipulation Reference
子资源完整性定义了一种机制，用户代理可以通过该机制验证获取的资源是否已在没有意外操作的情况下交付参考
Integrity attributeis to allow the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.
完整性属性是允许浏览器检查文件源，以确保如果源被操纵，则永远不会加载代码。
Crossorigin attributeis present when a request is loaded using 'CORS' which is now a requirement of SRI checking when not loaded from the 'same-origin'. More info on crossorigin
使用“CORS”加载请求时会出现Crossorigin 属性，当不是从“同源”加载时，现在这是 SRI 检查的要求。 有关跨域的更多信息
回答by Witold Kaczurba
integrity- defines the hash value of a resource (like a checksum) that has to be matched to make the browser execute it. The hash ensures that the file was unmodified and contains expected data. This way browser will not load different (e.g. malicious) resources. Imagine a situation in which your JavaScript files were hacked on the CDN, and there was no way of knowing it. The integrity attribute prevents loading content that does not match.
完整性- 定义必须匹配才能使浏览器执行它的资源（如校验和）的哈希值。散列确保文件未被修改并包含预期数据。这样浏览器就不会加载不同的（例如恶意的）资源。想象一下您的 JavaScript 文件在 CDN 上被黑客入侵的情况，并且无法知道。完整性属性可防止加载不匹配的内容。
Invalid SRI will be blocked (Chrome developer-tools), regardless of cross-origin. Below NON-CORS case when integrity attribute does not match:
无论跨域如何，无效的 SRI 都将被阻止（Chrome 开发人员工具）。在完整性属性不匹配的非 CORS 情况下：
Integrity can be calculatedusing: https://www.srihash.org/Or typing into console (link):
可以使用以下方法计算完整性：https: //www.srihash.org/或输入控制台（链接）：
openssl dgst -sha384 -binary FILENAME.js | openssl base64 -A
crossorigin- defines options used when the resource is loaded from a server on a different origin. (See CORS (Cross-Origin Resource Sharing) here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). It effectively changes HTTP requests sent by the browser. If the “crossorigin” attribute is added - it will result in adding origin: <ORIGIN>key-value pair into HTTP request as shown below.
crossorigin- 定义从不同来源的服务器加载资源时使用的选项。（请参阅此处的 CORS（跨源资源共享）：https: //developer.mozilla.org/en-US/docs/Web/HTTP/CORS）。它有效地改变了浏览器发送的 HTTP 请求。如果添加了“crossorigin”属性 - 它将导致将origin: <ORIGIN>键值对添加到 HTTP 请求中，如下所示。
crossorigincan be set to either “anonymous” or “use-credentials”. Both will result in adding origin:into the request. The latter however will ensure that credentials are checked. No crossorigin attribute in the tag will result in sending a request without origin: key-value pair.
crossorigin可以设置为“anonymous”或“use-credentials”。两者都会导致将origin:添加到请求中。然而，后者将确保检查凭据。标签中没有 crossorigin 属性将导致发送没有来源的请求：键值对。
Here is a case when requesting “use-credentials” from CDN:
这是从 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>
A browser can cancel the request if crossorigin incorrectly set.
如果 crossorigin 设置不正确，浏览器可以取消请求。
Links
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
链接
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML /元素/链接
Blogs
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity
博客
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity
回答by yon.fun
Technically, the Integrity attributehelps with just that - it enables the proper verification of the data source. That is, it merely allows the browser to verify the numbers in the right source file with the amounts requested by the source file located on the CDN server.
从技术上讲，Integrity 属性有助于实现这一点 - 它可以正确验证数据源。也就是说，它仅允许浏览器使用位于 CDN 服务器上的源文件请求的数量来验证正确源文件中的数字。
Going a bit deeper, in case of the established encrypted hash value of this source and its checked compliance with a predefined value in the browser - the code executes, and the user request is successfully processed.
更深入一点，如果此源的已建立加密哈希值及其与浏览器中预定义值的检查合规性 - 代码将执行，并成功处理用户请求。
Crossorigin attributehelps developers optimize the rates of CDN performance, at the same time, protecting the website code from malicious scripts.
Crossorigin 属性帮助开发者优化 CDN 性能的速率，同时保护网站代码免受恶意脚本的攻击。
In particular, Crossorigin downloads the program code of the site in anonymous mode, without downloading cookies or performing the authentication procedure. This way, it prevents the leak of user data when you first load the site on a specific CDN server, which network fraudsters can easily replace addresses.
特别是，Crossorigin 以匿名模式下载站点的程序代码，而不下载 cookie 或执行身份验证程序。这样，当您第一次在特定 CDN 服务器上加载站点时，它可以防止用户数据泄露，网络欺诈者可以轻松替换地址。
Source: https://yon.fun/what-is-link-integrity-and-crossorigin/
