★script标签引入文件

1. 引入本地文件

开发环境一般多引入本地js文件。

1	<script src=``"./js/index.js"``></script>

2. 引入远程文件

部署到线上后，一般会分发到cdn，需要引入远程文件，

形如：

1	<script src=``"https://cdn.xxx.xx/js/index.js"``></script>

只是引入远程文件存在一个问题，如果对应的文件被篡改了，那么可能会对用户造成影响。虽然cdn一般都是可靠的，但是不排除受到黑客的攻击。

在这种情况下，可以通过script标签的属性 integrity 来进行安全验证。

★HTML相关 Script标签的 integrity 作用是什么

integrity属性设置引入js文件的hash值，浏览器在下载js文件时候，会对js文件进行hash计算，如果一致则正常加载，否则拒绝加载运行。 形如：

<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"
    integrity="sha384-0k9//QJdpmfSdp5IK3oJjOYPfz42f2FE0goMLtK9Vq7aKllvc4Lnz7lHPHiFhvDP"
    crossorigin="anonymous">
</script>

这个 integrity 属性的值来 指定浏览器提取的资源（文件）的base64编码的加密哈希值。如果资源匹配其中一个哈希值，它将被加载。

HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息，但有两个条件：一是跨域脚本的服务器必须通过 Access-Controll-Allow-Origin 头信息允许当前域名可以获取错误信息，二是当前域名的  script  标签也必须指明 src 属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。听名字也知道是跨域的时候用的属性，加载本地静态文件根本就不牵涉跨域的问题，所以本地就不应该用它（理论上使用也没关系，但浏览器就是这么定的，印象中如果 crossorigin 用在了本地文件上，浏览器报错信息会告诉你 crossorigin 只能支持 http/https/… 等协议上，所以你非要加载本地静态文件也不是没办法，只能自建本地 web 服务器然后地址写带 scheme 和 host 的完全绝对路径）。

另外除了  script ，所有能引入跨域资源的标签包括  link  和  img  之类，都有一样的属性。

integrity （大部分情况）是给 CDN 的静态文件使用的，比如大名鼎鼎的 ajax.googleapis.com，或者国内的 cdn.bootcss.com。CDN虽然好但 CDN 有可能被劫持，导致下载的文件是被篡改过的（比如通过 DNS 劫持），有了 integrity 就可以检查文件是否是原版。但因为本地文件用的域名跟网页是同一个域名，不存在劫持的问题（或者劫持就连网站本身一起被劫持了，那就不是 integrity 能解决的问题了），所以本地静态文件没有太大必要用这个属性。

当然，还有一种情况是你自己搭了一套提供静态文件的独立站点，这个时候用 integrity 是有意义。MDN 文档里也提到了 integrity 值的生成方式，这里也再引用一下：

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

或者

shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64

总之简单一句话：只有当你的网页域名和要载入的静态文件存放的站点域名不一样的时候，使用这两个属性才有意义（并且因浏览器的规定 crossorigin 属性只有这个时候才能正常使用）。