HTML5 标签里的 crossorigin 属性到底有什么用？

最近 Bootstrap 4 已经正式发布了，可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4。不过今天要说的不是 BS4，而是官网里引入 BS4 框架依赖的 jQuery 的代码：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>

看起来比以前的写法复杂好多的样子。先不着急慢慢看，多了一个 integrity 属性，看值的样子就知道是用来验证文件完整性的。另外还有一个 crossorigin 属性……怎么？直接通过 script 标签加载网站外 JS 资源也要开始考虑跨域的问题了吗？

这里不讨论 <script> 的 crossorigin 属性怎么用，以及服务器端要怎么支持此属性，MDN 文档已经说得很清楚。

不知道大家对此新属性的感觉如何，我的第一感觉是：新加了这么一个属性，难道以前不用 crossorigin 属性的时候，会出什么问题吗？到底可能会出什么问题呢？

从谷歌的结果来看，比较一致的说法是，当引入跨域的脚本（比如用了 apis.google.com 上的库文件）时，如果这个脚本有错误，因为浏览器的限制（根本原因是协议的规定），是拿不到错误信息的。当本地尝试使用 window.onerror 去记录脚本的错误时，跨域脚本的错误只会返回 Script error。

而 html5 新的规定，是可以允许本地获取到跨域脚本的错误信息的，但有两个条件：一是跨域脚本的服务器必须通过
Access-Control-Allow-Origin 头信息允许当前域名可以获取错误信息，二是网页里的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。有了这两个条件，就可以获取跨域脚本的错误信息：

但事情还是不够明朗，看起来跨域脚本报个错也没什么啊，为什么浏览器（准确说是 HTTP 协议）这么轴，非要规定默认情况页面是不能获取跨域脚本错误信息的呢？

这其实跟网络安全有关，不妨举一个例子来说明。

我们先假设浏览器默认可以将跨域脚本的错误信息返回。

这个时候我在我的博客里写下如下代码：

<script src="http://某个银行/会员信息网址">
<script src="http://某个银行2/会员信息网址">
...

注意 src 里面提到地址，都是 HTML 页面的地址，当成 JS 来执行，肯定是会报错的。

因为我们假设浏览器能报具体错误，这个错误可能是类似于：

“请登录” is undefined.
“您好” is undefined.

我们通过报错信息的不一致，可能可以推断出当前访问我博客的会员在某某银行是否有账号。虽然不是什么大问题，但隐私的确是泄漏了，如果我是攻击者我可能会通过判断会员在某家银行是否有账号，『精准』推送相关的钓鱼网站给他。

说清楚了来龙去脉，我们就可以更好的判断，我们是否真的需要给 script 标签加上 crossorigin 属性了。另外除了 script，所有能引入跨域资源的标签包括 link 和 img 之类，都有一样的属性。

2020-04-10 补充：需要注意的是，<script> 的 crossorigin 和其他标签的 crossorigin 属性作用不一样，<script> 的跨域属性跟脚本错误有关，上面已经解释过了，但其他标签的跨域属性跟 canvas 有关，有时间可以跟大家详细解释一下。大家也可以尝试先自己找答案。

2020-08-20 补充：关于 <img> / <link> 的 crossorigin 属性解释，见此篇文章。

2019-02-03 补充：因评论有提到为什么本地文件无法使用 crossorigin 和 integrity 这两个参数，我觉得有必要提一下这两个参数出现的理由和使用范围。

crossorigin 上面已经解释过了使用理由了，听名字也知道是跨域的时候用的属性，加载本地静态文件根本就不牵涉跨域的问题，所以本地就不应该用它（理论上使用也没关系，但浏览器就是这么定的，印象中如果 crossorigin 用在了本地文件上，浏览器报错信息会告诉你 crossorigin 只能支持 http/https/… 等协议上）。

而关于 integrity，其实文中提到的 MDN 文档也解释的很清楚：

Using Content Delivery Networks (CDNS) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth. However, using CDNs also comes with a risk, in that if an attacker gains control of a CDN, the attacker can inject arbitrary malicious content into files on the CDN (or replace the files completely) and thus can also potentially attack all sites that fetch files from that CDN.

不知道大家有没有注意到文中反复出现的 CDN，如果注意到也大概能猜到 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 属性只有这个时候才能正常使用）。