[转]HTML5 script 标签的 crossorigin 属性到底有什么用?
HTML5 script 标签的 crossorigin 属性到底有什么用?
XHTML
1
2
3
|
<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 上的文档已经说得很清楚。
不知道大家对此新属性的感觉如何,我的第一感觉是:新加了这么一个属性,难道是以前 script 不用 crossorigin 属性的时候,会出什么问题吗?到底可能会出什么问题呢?
从谷歌的结果来看,比较一致的说法是,引入跨域的脚本(比如用了 apis.google.com 上的库文件),如果这个脚本有错误,因为浏览器的限制(根本原因是协议的规定),是拿不到错误信息的。当本地尝试使用 window.onerror
去记录脚本的错误时,跨域脚本的错误只会返回 Script error
。
但 HTML5 新的规定,是可以允许本地获取到跨域脚本的错误信息,但有两个条件:一是跨域脚本的服务器必须通过 Access-Controll-Allow-Origin
头信息允许当前域名可以获取错误信息,二是当前域名的 script
标签也必须指明 src
属性指定的地址是支持跨域的地址,也就是 crossorigin 属性。
但事情还是不够明朗,看起来报个错也没什么啊,为什么浏览器或者说协议这么龟毛,非要规定默认页面是不能获取跨域脚本错误信息的呢?
这其实跟网络安全有关,不妨举一个例子来说明。
我们先假设浏览器默认可以将跨域脚本的错误信息返回。
这个时候我在我的博客里写下如下代码:
XHTML
1
2
3
|
<script src="http://某个银行/会员信息网址">
<script src="http://某个银行2/会员信息网址">
...
|
注意 src 里面提到地址,都是 HTML 页面的地址,当成 JS 来执行,肯定是会报错的。
因为我们假设浏览器能报具体错误,这个错误可能是类似于:
1. “请登录” is undefined.
2. “您好” is undefined.
我们通过报错信息的不一致,可能可以推断出当前访问我博客的会员在某某银行是否有账号。虽然不是什么大问题,但隐私的确是泄漏了,如果我是攻击者我可能会通过会员在某家银行有账号,『精准』推送相关的钓鱼网站给他。
说清楚了来龙去脉,我们就可以更好的判断,我们是否真的需要给 script
标签加上 crossorigin 属性了。另外除了 script
,所有能引入跨域资源的标签包括 link
和 img
之类,都有一样的属性。
[转]HTML5 script 标签的 crossorigin 属性到底有什么用?的更多相关文章
- HTML5 script 标签的 crossorigin 和integrity属性的作用
Bootstrap 4 依赖的基础库中出现了两个新的属性 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.m ...
- script标签的crossorigin属性
通常我们使用window.onerror来捕获js脚本的错误信息. 但是对于跨域调用的js脚本,onerror事件只会给出很少的报错信息:error: Script error. 这个简单的信息很明显 ...
- HTML5 <a>标签的ping属性用法
随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...
- 微信页面script标签添加crossorigin=“anonymous”导致页面加载失败
公司一个微信企业号项目,突然出现页面数据加载失败,页面报错信息如下 意思是前端向服务端发送跨域资源请求访问这个js文件,但是服务端并不同意,所以服务端拒绝访问这个地址. 后来发现将crossorigi ...
- html中script标签使用async属性和defer属性的区别
相同点: 首先async和defer只对header里的外连脚本script标签上起作用,如果script标签是放在header外或者是header里的内置脚本以及动态生成的script标签是不起作用 ...
- HTML5 a标签的down属性进行图片下载
a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.目前该属性的兼容性如下: 具体代码实现: /* 主要原理:利用a标签的do ...
- script标签不带属性与带async、defer的区别
<script> 当页面解析到script标签时,会停止解析并下载对应的脚本,并马上执行,执行完毕后再继续解析页面 <script async> async 在下载脚本的同时不 ...
- HTML5 a标签的download属性
介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> ...
- 怎样理解script标签的defer属性和async属性
如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async ...
随机推荐
- jmeter中的函数
1.函数帮助 1.tool-------->function helper dialog 可以查看函数帮助 2.jmeter中的函数 1.函数格式 ${__funcctionname(var ...
- (Python3) 连加 连乘 代码
a=[1,2,3,4,5,6,7,8,9,10] #连加 b=0 for i in a: b+=i print(b) #连乘 c=1 for i in a: c*=i print(c)
- Tomcat关闭失败,SEVERE: Could not contact localhost:8005. Tomcat may not be running.
SEVERE: Could not contact localhost:8005. Tomcat may not be running. Tomcat 启动后,关闭失败,显示以下 进入 java 的安 ...
- Could not find a package configuration file provided by "Qt5Widgets"
解决: sudo apt install qttools5-dev
- P5301 [GXOI/GZOI2019]宝牌一大堆
题目地址:P5301 [GXOI/GZOI2019]宝牌一大堆 这里是官方题解(by lydrainbowcat) 部分分 直接搜索可以得到暴力分,因为所有和牌方案一共只有一千万左右,稍微优化一下数据 ...
- java学习笔记07-循环
java有三种主要的循环结构 while循环 do...while循环 for循环 while循环 while(布尔表达式){ //循环内容 } public static void main(Str ...
- 自动备份远程mongodb数据库并拉取到本地
自动备份远程mongodb数据库并拉取到本地 目标: 远程服务器 .1中的mongodb数据拉回公司测试服务器中 .远程服务器中编写自动备份mongodb脚本 ①编写脚本 # vim /opt/bac ...
- NOIP2018Day1T2 货币系统
题目描述 在网友的国度中共有 \(n\) 种不同面额的货币,第 \(i\) 种货币的面额为 \(a[i]\),你可以假设每一种货币都有无穷多张.为了方便,我们把货币种数为 \(n\).面额数组为 \( ...
- java - day006 - 构造方法
构造方法 新建对象是,执行的一个特殊方法 new 类名(); 这个小括号就是构造方法 Java 类中,必须有构造方法,如果自己不定义, 编译器会自动生成默认构造方法 new 关键字是新建对象用的, ...
- spring boot正常启动但是访问会找不到“ localhost 的网页”的错误
最近启动springboot项目访问localhost老报找不到网页,找了很久发现yml配置文件中配置了“context.path”,只要在端口号后面加上context.path地址就可以访问了. 如 ...