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

老丝 · 03月23日

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

什么做integritycrossorigin属性是什么意思?它们如何影响样式表的加载?

HTML
回答(2)
时间
阿飞神乐
2 · 2020-03-23 16:17:24

integrity - defines the hash value of a resource (like a checksum) that has to be matched to make browser execute it. The hash ensures that file was unmodified and contains expected data. This way browser will not load different (e.g. malicious) resource. Imagine situation in which your JavaScript files were hacked on the CDN, and there was no way of knowing it. Integrity attribute prevents loading content that does not match.

Invalid SRI will be blocked (Chrome developer-tools), regardless of cross-origin. Below NON-CORS case when integrity attribute does not match:

在此处输入图片说明

Integrity can be calculated using: https://www.srihash.org/ Or typing into console (link):

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

crossorigin - defines options used when the resource is loaded from a server on different origin. (See CORS (Cross-Origin Resource Sharing) here: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). It effectively changes HTTP request sent by browser. If “crossorigin” attribute is added - it will result in adding origin: <ORIGIN> key-value pair into HTTP request as shown below.

在此处输入图片说明

crossorigin can 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 request without origin: key-value pair.

Here is a case when requesting “use-credentials” from 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.

在此处输入图片说明

Links
- https://www.w3.org/TR/cors/
- https://tools.ietf.org/html/rfc6454
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Blogs
- https://frederik-braun.com/using-subresource-integrity.html
- https://web-security.guru/en/web-security/subresource-integrity

J
Jim
1 · 2020-03-23 16:17:24

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

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

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

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

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

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序