html css integrity,HTML5 script 标签的 crossorigin 和integrity属性的作用

Bootstrap 4 依赖的基础库中出现了两个新的属性

1

2

3

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 值的生成方式，这里也再引用一下：

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

或者

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

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

原文出处：https://www.cnblogs.com/ihuangqing/p/10717018.html