HTML属性crossorigin和integrity有什么用

简介： 在引入许多官方的CDN静态库时，会发现我们引入的script中，不单单只有src属性，还有crossorigin和integrity属性。

在引入许多官方的CDN静态库时，会发现我们引入的script中，不单单只有src属性，还有crossorigin和integrity属性。

那这个东西，如果是我们本地的资源库，我们肯定是没有的。那这两个属性是干嘛的呢？

crossorigin属性

在HTML5中，一些 HTML 元素提供了对 CORS 的支持。

我先解释一下CORS是啥？

相当于是给我们服务器一个白名单，让他不会拦截我们的静态资源。

支持CORS请求的浏览器一旦发现ajax请求跨域，会对请求做一些特殊处理，对于已经实现CORS接口的服务端，接受请求，并做出回应。

有一种情况比较特殊，如果我们发送的跨域请求为“非简单请求”，浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的“预检请求”，验证请求源是否为服务端允许源，这些对于开发这来说是感觉不到的，由浏览器代理。

总而言之，客户端不需要对跨域请求做任何特殊处理。

<audio>、<img>、<link>、<script> 和 <video> 都可以设置crossorigin属性

crossorigin的属性值可以是anonymous、use-credentials，如果没有属性值或者非法属性值，会被浏览器默认做anonymous。

1. crossorigin会让浏览器启用CORS访问检查，检查http响应头的Access-Control-Allow-Origin
2. 对于传统script需要跨域获取的JS资源，控制暴露出其报错的详细信息
3. 对于module script，控制用于跨域请求的凭据模式

而我们看看，我这里引入的静态库他给了一个anonymous。也就是不进行CORS检查。

integrity属性

integrity属性可以用在<script> 或者 <link>元素上，用来开启浏览器对获取的资源进行检查，它允许你为script或者link提供一个hash，用来进行验签，检验加载的JavaScript文件或者CSS问卷是否完整。

你可以当他是一个文件校验。和我们平常下载文件进行md5值校验一样。

告诉浏览器，使用sha384签名算法对下载的js文件进行计算，并与intergrity提供的摘要签名对比，如果二者不一致，就不会执行这个资源。

intergrity的作用有：避免由【托管在CDN的资源被篡改】而引入的XSS 风险

注意：启用 SRI 策略后，浏览器会对资源进行 CORS 校验，这就要求被请求的资源必须同域，或者配置了 Access-Control-Allow-Origin 响应头