基础知识

parent和opener

在谈论opener之前，让我们首先看一下<iframe>中的parent。

我们知道，用于父子页面交互的对象通常是在<iframe>中提供的，这个对象就是window.parent。我们可以通过window.parent对象从iframe的页面中访问父页面的window对象。

opener与parent一样，但它只用于通过<a target="_blank">在新标签页中打开页面。你可以直接使用window.opener从通过<a target="_blank">打开的页面中访问源页面的window对象。

同域和跨域

浏览器提供了完整的跨域保护功能。当域名相同时，parent对象和opener对象都是父页面的window对象。当域名不同时，parent和opener是global对象。这个global对象只提供对属性的非常有限的访问，而且不允许访问大多数属性（如果尝试访问它们将直接抛出DOMException）。

在<iframe>中，提供了一个sandbox属性来控制iframe中页面的权限，因此即使在同一个域中，也可以控制<iframe>的安全性。

如何利用漏洞

如果你的网站上有一个使用target = “_ blank”的链接，一旦用户点击该链接并进入新标签页，如果新标签页的网页上有恶意代码，用户将直接被导航到虚假网站。这个时候，如果用户返回到你的标签页，他们将看到已被替换的页面。

步骤

1.你的网站https://example.com上有一个链接：

<a href="https://an.evil.site" target="_blank">Enter an "evil" website</a>

2.用户单击这个链接，并在新选项卡上打开新页面。网站可以通过HTTP标头中的Referer属性确定用户的来源。

并且网页中包含类似这样的JavaScript代码：

const url = encodeURIComponent('{{header.referer}}');
window.opener.location.replace('https://a.fake.site/?' + url);

3.现在，用户继续浏览新选项卡，而原始的选项卡已导航到https://a.fake.site/?https%3A%2F%2Fexample.com%2F。

4.恶意网站https://a.fake.site根据查询字符串伪造了一个用于欺骗用户的页面（你也可以在此期间再次跳转，让浏览器地址栏中的地址看起来更令人困惑）。

5.用户关闭https://an.evil.site选项卡，并返回原始网站，但你会发现根本回不去了。

上述攻击步骤在跨域的场景中有效。因为在跨域时，opener对象与parent对象是一样的，两者都受到了限制，都只提供非常有限的访问属性。而在仅有的少数属性中，大多数都不允许被访问（如果试图访问它们将直接抛出DOMException）。

但在跨域的场景中，opener仍然可以调用location.replace方法，而parent则不能。

如果是在同一个域中（例如网站上的页面嵌入了恶意代码），情况会严重得多。

如何防御

<iframe>提供了sandbox属性，你可以通过以下方式来使用链接：

1.Referrer Policy和noreferrer

在上述攻击步骤中，HTTP标头中包含了Referer属性。实际上，你可以将Referrer Policy添加到HTTP的响应标头中来保护链接源的隐私。

你需要通过修改后端代码来实现Referrer Policy。在前端，你还可以通过将<a>标签的rel属性指定为“noreferrer”来确保链接源的隐私。

<a href="https://an.evil.site" target="_blank" rel="noreferrer">Enter an "evil" website</a>

不过，需要注意的是，即使你限制了referer的传递，仍然无法防止原始页面被恶意重定向。

2.noopener

出于安全方面的考虑，现代浏览器允许将<a>标签的rel属性指定为“noopener”，因此在打开的新选项卡中，opener对象将不再可用，因为它已被设置为null。

<a href="https://an.evil.site" target="_blank" rel="noopener">Enter an "evil" website</a>

3.JavaScript

noopener属性似乎解决了所有问题，但你仍然需要考虑浏览器的兼容性问题。

如你所见，大多数浏览器现在都支持rel = “noopener”。但是，对于那些稍微陈旧一点的浏览器和古老的浏览器，只有noopener属性是不够的。

因此，你必须使用以下这样的JavaScript代码。

"use strict";
function openUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

最好的建议

首先，如果你的网站链接使用了target = “_ blank”，那么也应该将rel = “noopener”添加链接中（建议也添加rel = “noreferrer”）。例如：

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer">Enter an "evil" website</a>

当然，当跳转到第三方网站时，可以为了SEO添加rel = “nofollow”，所以最终会像这样：

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">Enter an "evil" website</a>

性能

最后，我们来谈谈性能问题。

如果网站使用了<a target="_blank">，则新打开的选项卡的性能将影响当前页面。这个时候，如果在新打开的页面中执行非常臃肿的JavaScript脚本，原始选项卡将受到影响，并且会出现停滞现象（当然，它不会卡住）。

如果将noopener添加到链接中，则两个选项卡不会相互干扰，因此原始页面的性能不会受到新页面的影响。

英文原文

The Hidden Dangers You Have Never Noticed: target = “_blank” and “opener”

创作场景

target = “_ blank”背后的隐藏漏洞