首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

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

作者头像
青梅煮码
发布2023-03-13 16:11:56
2.3K0
发布2023-03-13 16:11:56
举报
文章被收录于专栏:青梅煮码青梅煮码

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

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

<a href="https://qmblog.cn" target="_blank">  访问恶意网站!</a>

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

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

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

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

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

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

我们如何避免这种情况?

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

<a href="https://qmblog.cn" rel="noopener" target="_blank">  访问恶意网站!</a>

它有什么作用?

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

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

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

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

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

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

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

function openInNewTabWithoutOpener() {
var newTab = window.open();
newTab.opener = null;
newTab.location = "qmblog.cn";
}
<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://www.qmblog.cn";
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’
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-05-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 新标签页中打开一个网址如何出现安全漏洞
  • 我们如何避免这种情况?
  • 通过js打开新标签页时,该如何处理?
  • 如何解决Safari的问题?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档