关闭

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

时间: 2020-02-26阅读: 585标签: 标签

新标签页中打开一个网址如何出现安全漏洞

让我们在网站上的新标签页中打开一个网址,html如下

<a href="https://malicious-domain.netlify.com" target="_blank">
  访问恶意网站!
</a>

这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。

该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?

用户从你的页面重定向到域,此时,浏览器会将你当前网站的所有 window 变量内容附加到恶意网站的 window.opener 变量。现在恶意网站可以访问你网站的 window,这显然在重定向此方法时打开了一个安全漏洞

恶意网站一旦通过 window.opener 访问了你的网站的 window 变量,它可以将你之前的网站重定向到一个新的钓鱼网站,这个网站可能与你打开的实际网站相似,甚至可能会要求你再次登录。

在恶意网站中,只需编写以下代码即可完成上述修改

if (window.opener) {
  window.opener.location = 'https://www.dhilipkmr.dev';
}

因此,无辜用户将陷入此陷阱,并提供可能暴露给攻击者的登录详细信息。


我们如何避免这种情况?

一种简单的方法是将带有 noopener 的 rel 属性添加到 <a> 标记。

<a href="https://malicious-domain.netlify.com" rel="noopener" target="_blank">
  访问恶意网站!
</a>

它有什么作用?

rel = "noopener" 表示浏览器不要将当前网站的 window 变量附加到新打开的恶意网站。

这使得恶意网站的 window.opener 的值为 null。

因此,在将用户导航到你未维护的新域时,请当心。

并非总是我们用标签打开一个新标签,在某些情况下,你必须通过执行JavaScript的 window.open() 来打开它,如下所示:

function openInNewTab() {
  // 一些代码
  window.open('https://malicious-domain.netlify.com');
}
<span class="link" onclick="openInNewTab()">访问恶意网站!</span>

这里没有提及 noopener,因此这导致当前网站的 window 传递到恶意网站。


通过js打开新标签页时,该如何处理?

function openInNewTabWithoutOpener() {
   var newTab = window.open();
   newTab.opener = null;
   newTab.location='https://malicious-domain.netlify.com';
 }
<span class="link" onclick="openInNewTabWithoutOpener()">访问恶意网站!</span>

我们已经通过 window.open() 打开了一个虚拟标签,该标签打开了 about:blank,因此这意味着它尚未重定向到恶意网站。

然后,我们将新标签的 opener 值修改为 null。

将我们将新标签的网址修改为恶意网站的网址。

这次,opener 再次为空,因此它无法访问第一个网站的 window 变量。

问题解决了。

但是在旧版本的Safari中将无法使用此方法,因此我们再次遇到问题。


如何解决Safari的问题?

function openInNewTabWithNoopener() {
  const aTag = document.createElement('a');
  aTag.rel = 'noopener';
  aTag.target = "_blank";
  aTag.href = 'https://malicious-domain.netlify.com';
  aTag.click();
}
<span class="link" onclick="openInNewTabWithoutOpener()">访问恶意网站!</span>

在这里,我们模拟点击锚标记。

  • 我们创建 <a> 标记并分配所需的属性,然后在其上执行 click(),其行为与单击链接相同。
  • 不要忘记在此处向标签添加 rel 属性。

其他事实:

  • 当您在锚标记上单击 CMD + LINK 时,Chrome,Firefox和Safari会将恶意网站的 window.opener 视为 null。
  • 但是,在通过JavaScript处理新标签页打开的元素上的 CMD + LINK 上,浏览器将附加窗口变量并将其发送到新标签页。
  • 默认情况下,新版的Safari会在所有情况下删除 window.opener,要将窗口信息传递给新的标签页,你必须明确指定 rel='opener'。

没有人可以绕过你的"保安"。

文章首发《前端外文精选》微信公众号


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9197

用css设置a标签无效,让链接跳转失效

这个代码有个坑,就是如果a标签里面放了一个图片,然后给a标签设置这个样式,这个时候是不起效果的,只能在a标签外面包一个div,然后给div设置这个样式

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

HTML <link> 标签 PC移动网站适配

在pc版网页上,添加指向对应移动版网址的特殊链接rel=alternate标记,这有助于百度发现网站的移动版网页所在的位置;同时在移动版网页上,添加指向对应pc版网址的链接rel=canonical标记。

HTML标签嵌套规则

块级元素总是在新行上开始,高度、行高以及上下边距都可控制,宽度默认是容器的100%,除非设定宽度。行内元素和其他元素都在一行上,高、行高、以及上下边距不可变,宽度就是它的文字和图片的宽度,不可改变。

HTML5的<progress>标签怎么用?

<progress> 标签表示任务的进度(进程),例:可定义完成多少工作,还有多少工作可以下载等等。该标签可与JavaScript结合使用,来显示任务的进度,创建动态的进度条。注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

vue自定义标签和单页面多路由实现

比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:

XPath当匹配标签判断text()判断内容失败的问题及解决

在爬取网站的时候我使用XPath去抓取网页上的内容,XPath表达式来精准获取需要的标签内容。当我对如下一段html代码编写XPath表达式抓取的时候出现了问题,代码如下。片名两个字中间有七个空格,我想要获取<dd></dd>中的内容。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!