为什么人们使用 `rel="noopener noreferrer"` 而不仅仅是 `rel="noreferrer"`

Question

我经常看到以下模式：

<a href="<external>" target="_blank" rel="noopener noreferrer"></a>

但据我所知，noreferrer暗示了noopener. 那么为什么noopener这里甚至需要呢？

<a href="..." rel="noreferrer" target="_blank">具有与相同的行为<a href="..." rel="noreferrer noopener" target="_blank">。

Answer 1

标签rel与“noopener”和“noreferrer”结合意味着不应该因为noreferrer标签而将referrer信息传递给被链接的网站，并且还可以防止新打开的页面控制传送流量的页面。

rel="noreferrer"属性与属性的作用相同rel="noopener"，同时也会阻止referrer头被发送到新页面。

大多数现代浏览器都支持 noopener，但是当它不支持时，我们可以使用 noreferrer。实际上，同时使用它们来支持旧浏览器是有意义的。也没有充分的理由删除，rel="noopener"因为它似乎没有任何缺点，而且被广泛考虑。

“使用它们来支持旧版浏览器是有意义的”——您知道有哪些浏览器支持 `noopener` 但不支持 `noreferrer` 吗？“也没有充分的理由删除`rel="noopener"`”——有什么充分的理由包括它吗？“似乎没有任何缺点”——一个小缺点的例子是文件大小增加。“这是被广泛考虑的事情”——我只是好奇这种考虑背后的原因是什么。 (7认同)
是的，好问题。在回答这个问题之前我搜索了很多。说实话，我也有同样的疑问，而且我也不知道为什么会有这样的一般性建议使用两者。然而，答案中没有任何内容是个人观点，我只是用我发现的陈述来回答，以便引导您达成共识，这似乎也只是一个惯例。另外，我为自己标记了这个问题，以提醒自己继续进一步搜索。如果以后我发现更客观的信息，我会编辑我的答案。 (2认同)
谢谢你的研究。说到旧版浏览器支持，我实际上发现在 Firefox 33-35 中 `rel="noreferrer"` 删除了 `window.opener` 而 `rel="noreferrer noopener"` 则没有：https://github.com/ yannickcr/eslint-plugin-react/issues/2022#issuecomment-524631866 (2认同)
-1，这并没有回答这个问题：“`noreferrer`暗示了`noopener`的效果。那么为什么这里还需要`noopener`呢？” (2认同)

Answer 2

是的，noreferrer意味着noopener，使附加值变得多余。旧版本的 Firefox 甚至要求noopener在使用时省略noreferrer.

在遵循过时的建议或 lint 规则后，使用两者可能会成为一种习惯。

看：