您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

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

时间:2022-02-01 11:05:59  来源:  作者:可可的答案

最近 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 标签里的 crossorigin 属性到底有什么用?

 

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

HTML5 标签里的 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 属性只有这个时候才能正常使用)。



Tags:crossorigin   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
最近 Bootstrap 4 已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4。不过今天要说的不是 BS4,而是官网里引入 BS4 框架依赖的 jQuery 的代码:<script src="...【详细内容】
2022-02-01  Tags: crossorigin  点击:(10)  评论:(0)  加入收藏
▌简易百科推荐
最近 Bootstrap 4 已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4。不过今天要说的不是 BS4,而是官网里引入 BS4 框架依赖的 jQuery 的代码:<script src="...【详细内容】
2022-02-01  可可的答案    Tags:crossorigin   点击:(10)  评论:(0)  加入收藏
此文由掘金@天行天忌授权发布,前端晚间课对其内容进行微改。 HTML,超文本标记语言,是一种用于创建网页的标准标记语言。自从引入 HTML 以来,它就一直用于构建互联网。与 JavaScr...【详细内容】
2021-11-23  前端晚间课    Tags:HTML6   点击:(641)  评论:(0)  加入收藏
HTML是什么?超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的。“...【详细内容】
2021-11-05  人生三部曲丶    Tags:HTML   点击:(63)  评论:(0)  加入收藏
一、iframe标签 自己编写的页面中如果要引用外部的页面的话,可以使用iframe标签来实现。为了更好地理解举个例子,前面几篇中我们都是在index.hmtl中编写代码。如果有个需求是...【详细内容】
2021-11-03  HillelDu    Tags:html   点击:(63)  评论:(0)  加入收藏
我们倾向于使用HTML与CSS、JavaScript等,使我们的网站或博客看起来更有吸引力,但你知道仅HTML就有很多实用的秘密,可能会派上用场,帮助你设计一个华丽的网站?下面是一些很酷的HTM...【详细内容】
2021-08-13  杭州程序员小张    Tags:HTML   点击:(106)  评论:(0)  加入收藏
meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、声明文档使用的字符编码<meta charset=&#39;utf-8&#39;>以下设置更为详细:<meta http-equiv="Content-...【详细内容】
2021-08-12  简易编程    Tags:meta标签   点击:(100)  评论:(0)  加入收藏
本节我们讲HTML表单标签,当你在网页输入框提交一个数据,这条数据一般是提交给了服务器,然后服务器根据请求返回你想要的数据,这个你输入信息的输入框或者提交的按钮就是HTML表...【详细内容】
2021-06-25  科技现象    Tags:HTML   点击:(146)  评论:(0)  加入收藏
背景日常工作中,项目编程免不了需要使用配置文件,早期yaml出现之前,大部分配置文件采用xml形式,但是以xml格式储存的数据要比以其他格式(如json、yaml)储存占有的空间要大得多,因为...【详细内容】
2021-06-21  爱读书的程序员    Tags:yaml   点击:(279)  评论:(0)  加入收藏
XML; 是什么? Extensible Markup Languare 可扩展标记型语言 为什么要有XML? 1.HTML的标签是固定的,不可以改变,也不可以进行一个&middot;&middot;&middot;扩展 2.HTML语法松散...【详细内容】
2021-06-01  LeviT    Tags:XML   点击:(215)  评论:(0)  加入收藏
同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的html页面大概内容如下。<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/...【详细内容】
2021-05-18  IT洞察者    Tags:Html   点击:(226)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条