通过script标签加载跨域资源是一种常用的跨域请求解决方式。那在HTML5中新增的crossorigin属性，有什么作用呢？难道以前不用 crossorigin 属性的时候，会出什么问题吗？到底可能会出什么问题呢？
当引入跨域的脚本时，如果这个脚本有错误，因为浏览器的限制（根本原因是协议的规定），是拿不到错误信息的。当本地尝试使用 window.onerror 去记录脚本的错误时，跨域脚本的错误只会返回 Script error。
image
而 HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息的，但有两个条件：
- 跨域脚本的服务器必须通过 Access-Control-Allow-Origin 头信息允许当前域名可以获取错误信息
- 网页里的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。
有了这两个条件，就可以获取跨域脚本的错误信息：
image
但事情还是不够明朗，看起来跨域脚本报个错也没什么啊，为什么浏览器（准确说是 HTTP 协议）这么轴，非要规定默认情况页面是不能获取跨域脚本错误信息的呢？
这其实跟网络安全有关，不妨举一个例子来说明。
我们先假设浏览器默认可以将跨域脚本的错误信息返回。
这个时候我在我的博客里写下如下代码：
<script src="http://某个银行/会员信息网址">
<script src="http://某个银行2/会员信息网址">
...
注意 src 里面提到地址，都是 HTML 页面的地址，当成 JS 来执行，肯定是会报错的。
因为我们假设浏览器能报具体错误，这个错误可能是类似于：
“请登录” is undefined.
“您好” is undefined.
我们通过报错信息的不一致，可能可以推断出当前访问我博客的会员在某某银行是否有账号。虽然不是什么大问题，但隐私的确是泄漏了，如果我是攻击者我可能会通过判断会员在某家银行是否有账号，『精准』推送相关的钓鱼网站给他。
说清楚了来龙去脉，我们就可以更好的判断，我们是否真的需要给 script 标签加上 crossorigin 属性了。另外除了 script，所有能引入跨域资源的标签包括 link 和 img 之类，都有一样的属性,但他们的跨域属性仅跟 canvas 有关。关于 <img> / <link> 的 crossorigin 属性解释，见此篇文章。
网友评论