与target ="_ blank"和rel ="noopener noreferrer"的链接仍然很脆弱？

Question

我看到人们建议每当在链接中使用target ="blank"在另一个窗口中打开它时,她应该放置rel ="noopener noreferrer".我想知道这是如何阻止我在Chrome中使用开发者工具,以及删除rel属性的.然后点击链接......

这仍然是保持漏洞的简单方法吗？

Answer 1

您可能误解了漏洞.你可以在这里阅读更多相关信息:https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

从本质上讲,添加rel="noopener noreferrer"到链接可以保护您网站的用户不会让您链接到的网站可能会劫持浏览器(通过流氓JS).

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

Answer 2

与链接target="_blank"对他们是脆弱的,以具有参照网页在后台被换出,而用户的注意力被新打开的标签转移.添加window.opener修复漏洞.

理论上你可以通过操作删除rel="noopener noreferrer" 客户端 ...但你为什么要这样做？你所做的只是故意使自己容易受到攻击.

访问同一网站(并且不修改自己的客户端代码)的其他用户仍然是安全的,因为服务器仍然可以提供服务rel.您的删除仅适用于您.

Answer 3

关于Lighthouse 最佳实践审计报告：

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

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

Answer 4

浏览器修复

所有主要浏览器都通过将默认行为更新为安全而无需指定rel属性来解决此问题。阅读关于 rel=noopener 的更多信息。

• Chrome在 v88 上修复了它
• Safari在 2016 年修复了它！
• Firefox在 v52修复了它
• New Edge 是基于 Chromium 的，所以也修复了

Answer 5

没有答案指出您实际上想要传递引荐来源网址而忽略任何“安全风险”警告的情况：例如，当您链接自己的外部网站时，该网站由您/您的组织控制，并且可能没有描述安全漏洞。

例如，就我而言，我想在 Google Analytics 中查看有多少访问者通过单击 Web 应用程序内的链接（使用与文档所在的单独域）来阅读文档，以及有多少访问者来自搜索引擎，因此我想利用引用标头来区分这些用户组。

当链接像您自己的文档这样肯定安全的网站时，您可以按照以下方法执行此操作：

{/* 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组件相反）：

{/* 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>