HTML 标签的 crossorigin 属性

crossorigin 属性是在做跨域请求时使用，主要用于 js 脚本的引入，以及link，img的加载。

实例

<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<img id="image" crossorigin="anonymous" src="http://...." alt="" width="400" height="400">

在 script 中的作用

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

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

提示: 当script中的src为一个跨域的html资源，其报错信息就有可能泄漏隐私信息，因此就需要慎重考虑清楚是否使用crossorigin 属性。

在 line 和 img 中的作用

img、link添加crossorigin属性后，canvas 不仅可以读取另外一个域名下的图片资源的数据，还能对其做操作，就跟操作同个域名下的图片一样了。

未添加时， canvas 只能按 tainted 方式读取非同域名下的图片资源，应该是指只能将图片贴在 canvas 上，但不能将图片作为数据读出来，从而防止某些隐私信息随着图片传到别的地方。

浏览器支持

所有浏览器均支持 crossorigin 属性。