链接到target="_blank"And rel="noopener noreferrer"还脆弱吗?

我看到有人建议，每当一个人在链接中使用target="_blank"来在不同的窗口中打开它时，他们应该放rel="noopener noreferrer"。我想知道这是如何阻止我在Chrome中使用开发人员工具的，例如，并删除rel属性。然后点击链接…

这是保持脆弱的简单方法吗?

211214 次浏览
小开
最佳答案

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

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

你要求通过开发人员工具删除该属性——这只会潜在地将你(篡改属性的人)暴露给漏洞。

截至2021年更新:所有主流浏览器的当前版本现在都自动对任何target="_blank"链接使用rel="noopener"的行为，从而消除了这个问题。详见chromestatus.com。

小开

当用户的注意力被新打开的选项卡转移时，他们是脆弱的上带有target="_blank"的链接将在后台交换出推荐页面。这被称为< >强反向tabnapping < / >强:

Example malicious flow .

引用页存储在window.opener中，恶意站点可以通过以下方式修改:

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

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

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

访问同一网站的其他用户(并且不修改自己的客户端代码)仍然是安全的，因为服务器仍然会提供rel="noopener noreferrer"。你的撤销只适用于你自己。

小开
锚标记rel=”noopener”或rel=”noreferrer”属性提高了网站的安全性，但有些人想忽略它们，因为他们认为它们会影响他们的网站搜索引擎优化，但这只是一个神话。 它保护您的网站受众的机密性，防止外部网站传播恶意代码
小开

如果开发人员控制台显示有关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"防止新页面能够访问window.opener属性，并确保它在单独的进程中运行。
  • rel="noreferrer"具有相同的效果，但也可以防止Referer头被发送到新页面。

更多信息请参见< >强官方文件< / >强。

小开

没有答案指出一个情况，当你实际上要通过推荐人只是忽略任何“安全风险”;警告:例如，当你链接自己的外部网站时，它是由你/你的组织控制的，可能没有描述的安全漏洞。

例如，在我的情况下，在我想看到在谷歌分析有多少我的访问者通过点击网页应用程序内的链接阅读文档(使用一个独立的域从文档是)，有多少来自搜索引擎，因此我想利用引用头区分这些用户组。

下面是你在链接像你自己的文档这样安全的网站时可以做的事情:

{/* 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中阅读更多内容。


提交答案