HTML5 <script> 标签里的 crossorigin 属性到底有什么用?

HTML5 <script> 标签里的 crossorigin 属性到底有什么用?

Chris Yue 2 comments
Posts

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

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

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

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

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

script error

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

cor script error

但事情还是不够明朗,看起来报个错也没什么啊,为什么浏览器或者说协议这么龟毛,非要规定默认页面是不能获取跨域脚本错误信息的呢?

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

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

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

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

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

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

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

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

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

crossorigin 上面已经解释过了使用理由了,听名字也知道是跨域的时候用的属性,加载本地静态文件根本就不牵涉跨域的问题,所以本地就不应该用它(理论上使用也没关系,但浏览器就是这么定的,印象中如果 crossorigin 用在了本地文件上,浏览器报错信息会告诉你 crossorigin 只能支持 http/https/… 等协议上,所以你非要加载本地静态文件也不是没办法,只能自建本地 web 服务器然后地址写带 scheme 和 host 的完全绝对路径)。

而关于 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 值的生成方式,这里也再引用一下:

或者

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

HTML5 <script> 标签里的 crossorigin 属性到底有什么用? by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

微信赞赏码

文章不错,我要帮站长分担建站费!
天使投赏人

2 Comments

hello

二月 1, 2019 在 9:27 下午

如果是本地css文件使用了crossorigin=”anonymous”会导致css无法显示的问题需要怎么解决?文件的integrity值需要怎么获取呢?

    Chris Yue

    二月 3, 2019 在 9:26 上午

    亲,crossorigin 和 integrity 不是给本地文件用的,本地文件不需要这两个值。

    关于这两个值是什么时候用,我会抽空补充到原文

    另外我建议你养成咨询时把错误信息发上来的好习惯。当然虽然你没发报错信息,但我猜测报错信息应该已经告诉你为什么加载不了。

     

发表评论

4 + 3 =