我看到有人建议，每当一个人使用target="_blank"在链接中打开它在不同的窗口，他们应该放rel="noopener noreferrer"。我想知道这是如何阻止我在Chrome中使用开发人员工具的，例如，并删除rel属性。然后点击链接…
这是保持脆弱的简单方法吗?
当前回答
浏览器修复
所有主流浏览器都通过更新默认行为来解决这个问题，而不必指定rel属性。阅读更多关于rel=noopener。
Chrome在v88修复了它 Safari在2016年解决了这个问题! Firefox在v52修正了这个问题 新边缘是基于铬，所以固定太
其他回答
锚标记rel= " noopener "或rel= " noreferrer "属性提高了网站的安全性，但有些人想忽略它们，因为他们认为它们会影响他们的网站搜索引擎优化，但这只是一个神话。 它可以保护您的网站受众的机密性，并防止外部网站传播恶意代码。
浏览器修复
所有主流浏览器都通过更新默认行为来解决这个问题，而不必指定rel属性。阅读更多关于rel=noopener。
Chrome在v88修复了它 Safari在2016年解决了这个问题! Firefox在v52修正了这个问题 新边缘是基于铬，所以固定太
没有答案指出一个情况下，你实际上想要通过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;
如果开发者控制台显示关于noopener noreferrer的警告，请确保在rel中同时添加noopener和noreferrer。link应该如下所示:
<a href="www.google.com" target="_blank" rel="noopener noreferrer" />
关于灯塔最佳实践审计报告:
添加rel="noopener"或rel="noreferrer"到任何外部链接 提高性能，防止安全漏洞。
一般来说，当你使用target="_blank"时，总是添加rel="noopener"或rel="noreferrer":
例如:
<a href="https://www.kaiostech.com/store/" target="_blank" rel="noreferrer">
KaiStore
</a>
Rel ="noopener"阻止新页面访问该窗口。属性，并确保它在单独的进程中运行。 rel="noreferrer"具有相同的效果，但也会阻止Referer头被发送到新页面。
有关更多信息，请参阅官方文件。
