HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”
新标签页中打开一个网址如何出现安全漏洞
让我们在网站上的新标签页中打开一个网址,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 window.opener null
-
但是,在通过JavaScript处理新标签页打开的元素上的
CMD + LINK
上,浏览器将附加窗口变量并将其发送到新标签页。 -
默认情况下,新版的Safari会在所有情况下删除
window.opener
,要将窗口信息传递给新的标签页,你必须明确指定rel='opener'
。
没有人可以绕过你的"保安"。
推荐阅读
· 9个很棒的CSS边框技巧
· macOS和HomeBrew的12个终端提示和技巧
· Next.js和Nuxt.js的语法比较
· 新手React开发人员容易做错的5件事
· Chrome浏览器终可以对标签进行整理和分组了
· 7个很棒的JavaScript产品步骤引导库
· 2020年排名前11位的静态网站生成器
· 让你在2020年成为前端大师的9个项目
点个在看呗