我看到有人建议，每当一个人使用target="_blank"在链接中打开它在不同的窗口，他们应该放rel="noopener noreferrer"。我想知道这是如何阻止我在Chrome中使用开发人员工具的，例如，并删除rel属性。然后点击链接…
这是保持脆弱的简单方法吗?
当前回答
如果开发者控制台显示关于noopener noreferrer的警告，请确保在rel中同时添加noopener和noreferrer。link应该如下所示:
<a href="www.google.com" target="_blank" rel="noopener noreferrer" />
其他回答
锚标记rel= " noopener "或rel= " noreferrer "属性提高了网站的安全性，但有些人想忽略它们，因为他们认为它们会影响他们的网站搜索引擎优化，但这只是一个神话。 它可以保护您的网站受众的机密性，并防止外部网站传播恶意代码。
如果开发者控制台显示关于noopener noreferrer的警告，请确保在rel中同时添加noopener和noreferrer。link应该如下所示:
<a href="www.google.com" target="_blank" rel="noopener noreferrer" />
没有答案指出一个情况下，你实际上想要通过referrer忽略任何“安全风险”警告:例如，当你链接自己的外部网站，这是由你/你的组织控制，可能没有描述的安全漏洞。
例如，在我的情况下，在我想看到在谷歌分析有多少我的访问者通过点击网页应用程序内的链接阅读文档(使用一个独立的域从文档是)，有多少来自搜索引擎，因此我想利用引用头区分这些用户组。
下面是你在链接像你自己的文档这样安全的网站时可以做的事情:
{/* Safe link to the own website *//* eslint-disable-next-line react/jsx-no-target-blank */}
<a href="https://my-own-website.com" target="_blank">
Learn more
</a>
在React中，我做了一个包装器公共组件，以避免在代码中到处放置eslint-disable(与UnsafeExternalLink组件相反):
import React, { ReactNode } from 'react';
/* eslint-disable react/jsx-no-target-blank */
/**
* Safe link to own external websites only.
*/
const SafeExternalLink = ({
href,
children,
}: {
href: string;
children: ReactNode;
}) => (
<a href={href} target="_blank">
{children}
</a>
);
export default SafeExternalLink;
浏览器修复
所有主流浏览器都通过更新默认行为来解决这个问题，而不必指定rel属性。阅读更多关于rel=noopener。
Chrome在v88修复了它 Safari在2016年解决了这个问题! Firefox在v52修正了这个问题 新边缘是基于铬，所以固定太
带有target="_blank"的链接很容易在用户的注意力被新打开的选项卡转移时，在后台换出推荐页面。这被称为反向tabnapping:
引用页存储在窗口中。一个恶意网站可以通过以下方式修改:
if (window.opener) {
window.opener.location = "https://phish.example.com";
}
添加rel="noopener noreferrer"可在所有主流浏览器中修复此漏洞。
注意，理论上可以通过操作删除rel客户端…但你为什么要这么做?你所做的一切都是故意让自己容易受到攻击。
访问同一网站的其他用户(并且不修改自己的客户端代码)仍然是安全的，因为服务器仍然会提供rel="noopener noreferrer"。你的撤销只适用于你自己。
