HTML属性crossorigin和integrity有什么用

在做前端开发的时候，经常会需要通过CDN的方式引入一些第三方库，比如React、Bootstrap等，可以看到官方给到的CDN引用示例中都会有crossorigin和integrity属性，那具体有什么用呢

比如React库：

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Bootstrap库：

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

integrity属性

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

上面的bootstrap代码来自公用的CDN（jsdelivr）的源码，integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"告诉浏览器，使用sha384签名算法对下载的js文件进行计算，并与intergrity提供的摘要签名对比，如果二者不一致，就不会执行这个资源。

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

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

crossorigin属性

在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如 <audio>、<img>、<link>、<script> 和 <video> 都可以设置crossorigin属性，允许我们配置元素获取数据的 CORS 请求。

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

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

我们在收集错误日志的时候，通常会在window上注册一个方法来监测所有代码抛出的异常：

window.addEventListener('error', function(msg, url, lineno, colno, error) {
  var string = msg.toLowerCase()
  var substring = "script error"
  if (string.indexOf(substring) > -1){
    alert('Script Error: See Browser Console for Detail')
  } else {
    var message = {
      Message: msg,
      URL:  url,
      Line: lineNo,
      Column: columnNo,
      'Error object': JSON.stringify(error)
    }
    // send error log to server
    record(message)
  }
  return false
})

但是对于跨域js来说，只会给出很少的报错信息：‘error: script error’，通过使用crossorigin属性可以使跨域js暴露出跟同域js同样的报错信息。但是，资源服务器必须返回一个Access-Control-Allow-Origin的header，否则资源无法访问。

参考

• [关于 script 标签你应该知道的]：https://github.com/rainjay/blog/issues/1
• [MDN crossorigin 文档]：https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
• [MDN integrity 文档]：https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
• [What is the purpose of crossorigin Attribute in HTML ?]：https://www.geeksforgeeks.org/what-is-the-purpose-of-crossorigin-attribute-in-html/