HTML属性crossorigin和integrity有什么用

587 阅读2分钟

我的小站

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

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

crossorigin属性

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

我先解释一下CORS是啥?

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

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

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

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

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

crossorigin的属性值可以是anonymoususe-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 响应头