今天小编跟大家讲解下有关HTML a标签打开新标签页避免出现安全漏洞 请使用“noopener” ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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');}<spanclass="link"onclick="openInNewTab()">访问恶意网站！</span>这里没有提及noopener 因此这导致当前网站的window传递到恶意网站。
通过js打开新标签页时 该如何处理 function openInNewTabWithoutOpener() { var newTab = window.open(); newTab.opener = null; newTab.location='https://malicious-domain.netlify.com'; }<spanclass="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();}<spanclass="link"onclick="openInNewTabWithoutOpener()">访问恶意网站！</span>在这里 我们模拟点击锚标记。
我们创建<a>标记并分配所需的属性 然后在其上执行click() 其行为与单击链接相同。不要忘记在此处向标签添加rel属性。其他事实：
当您在锚标记上单击CMD + LINK时 Chrome Firefox和Safari会将恶意网站的window.opener视为null。但是 在通过JavaScript处理新标签页打开的元素上的CMD + LINK上 浏览器将附加窗口变量并将其发送到新标签页。默认情况下 新版的Safari会在所有情况下删除window.opener 要将窗口信息传递给新的标签页 你必须明确指定rel='opener'。没有人可以绕过你的"保安"。
文章首发《前端外文精选》微信公众号
来源：爱蒂网