关于灯塔最佳实践审计报告:

添加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头被发送到新页面。

有关更多信息，请参阅官方文件。

你可能误解了这个弱点。你可以在这里阅读更多信息:https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

从本质上讲，在链接中添加rel="noopener noreferrer"可以保护你的网站用户不让你链接的网站潜在地劫持浏览器(通过流氓JS)。

您正在询问通过开发人员工具删除该属性—这只会潜在地将您(篡改属性的人)暴露在漏洞之下。

2021年更新:所有主流浏览器的当前版本现在自动对任何target="_blank"链接使用rel="noopener"的行为，使此问题无效。更多信息请访问chromestatus.com。

浏览器修复

所有主流浏览器都通过更新默认行为来解决这个问题，而不必指定rel属性。阅读更多关于rel=noopener。

Chrome在v88修复了它 Safari在2016年解决了这个问题! Firefox在v52修正了这个问题 新边缘是基于铬，所以固定太

如果开发者控制台显示关于noopener noreferrer的警告，请确保在rel中同时添加noopener和noreferrer。link应该如下所示:

<a href="www.google.com" target="_blank" rel="noopener noreferrer" />

带有target="_blank"的链接很容易在用户的注意力被新打开的选项卡转移时，在后台换出推荐页面。这被称为反向tabnapping:

引用页存储在窗口中。一个恶意网站可以通过以下方式修改:

if (window.opener) {
   window.opener.location = "https://phish.example.com";
}

添加rel="noopener noreferrer"可在所有主流浏览器中修复此漏洞。

注意，理论上可以通过操作删除rel客户端…但你为什么要这么做?你所做的一切都是故意让自己容易受到攻击。

访问同一网站的其他用户(并且不修改自己的客户端代码)仍然是安全的，因为服务器仍然会提供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;