Rel=noopener & Noreferrer:外部链接的安全实践

rel=noopener noreferrer: 外部链接安全实践

rel=noopener noreferrer: 外部链接安全实践

许多 WordPress 用户可能会注意到他们的 外部链接 检查网站的 HTML 时,会发现代码“rel=”noopener noreferrer”” 经常出现,而网站所有者并未采取任何直接行动,这让人对其目的和潜在 SEO 影响产生疑问。

从 SEO 角度来看,这些自动添加的标签无需担心。WordPress 在某些情况下会将这些属性应用于外部链接,这是标准做法。搜索引擎完全理解这些属性,它们不会对您的网站在搜索结果中的索引或排名产生负面影响。

什么是 rel="noopener noreferrer"?

此 rel="noopener noreferrer" 是专为您网站上的外部链接设计的 HTML 属性。此属性实际上由两个独立工作的组件组成:

这些组件会影响外部网站与您的网站的交互方式,尽管每个组件都有不同的用途。

实现此属性时,它将在您的 HTML 代码中显示如下:

 

<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">

 

检查您的链接是否包含此代码很简单。您可以打开您的 网站的代码编辑器 并使用浏览器的“查找”功能搜索 rel="noopener noreferrer",或查看任意网页,右键点击,选择“检查”,然后在开发者控制台中搜索代码。

第二种方法对于检查不属于您或您管理的网站特别有用。这允许开发人员和网站所有者验证其网页上外部链接的安全属性是否正确实施。

381b0144 b9e1 4441 9454 3cbc640d95f8

什么是 rel="noreferrer"?

rel=”noreferrer” 属性可作为 HTML 链接中的隐私机制,防止访客从您的网站导航到另一个网站时传输引荐来源信息。实施后,此 HTML 属性会在目标网站的分析工具中隐藏您的网站作为流量来源的身份。

通常,当有人点击您网站上的链接时,目标网站可以将您的域名识别为流量来源。如果在您的链接中添加 rel=”noreferrer”,则此识别将被阻止。这些访问者不会在 Google Analytics 等分析平台中显示为引荐流量,而是注册为直接流量。

 

该属性可以通过两种方式实现:

<a href="https://examplesite.com" target="_blank" rel="noreferrer">

 

或者不在新标签页中打开:

<a href="https://examplesite.com" rel="noreferrer">

 

这些隐藏的引荐来源信息可能可以解释一些网站所有者在分析中注意到的直接流量神秘激增的现象。

何时在外部链接上使用 rel=”noreferrer”

在出站链接上实现 rel=”noreferrer” 属性有几个战略原因:

  1. 竞争对手链接:链接到竞争对手时,同时希望保留自己的 转诊数据 私立
  2. 不受信任的网站:链接到你不完全信任的网站时
  3. 隐私问题:当你想通过不共享流量来源信息来维护用户隐私时

添加此属性非常简单 - 只需在链接 HTML 中包含 rel=”noreferrer” 即可,如上所示。如果您已经在新标签页中打开外部链接,则合并此代码只需付出很少的额外努力。

7720441

什么是 rel="noopener"?

对于使用外部链接的网站,rel=”noopener” 属性是一项重要的安全措施。此 HTML 属性有助于保护您的网站免受通过链接页面针对用户的复杂攻击媒介的侵害。如果正确实施,它可以防止恶意网站通过 window.opener JavaScript 属性访问您的页面。

保护您的网站免遭反向制表攻击

反向标签页劫持是重大的安全威胁,当链接在新标签页中打开时就会发生这种情况。如果没有适当的保护,攻击者可以利用 window.opener 关系将您的原始页面重定向到旨在窃取信息的欺诈网站。

这种攻击尤其危险,因为用户通常会信任他们已经访问过的页面。当他们返回他们认为是合法的网站时,他们可能会在不知情的情况下向攻击者提供敏感信息。

攻击如何进行:

幸运的是,在外部链接中添加 rel=”noopener” 可以断开这种连接,从而阻止新页面操纵您的原始页面。

何时在内部链接中使用 rel=”noopener”

对于指向您自己域内页面的链接,rel=”noopener” 通常不是必需的。内部链接的安全风险最小,因为您可以控制源页面和目标页面。

重要注意事项:

  1. WordPress 会自动将 rel=”noopener” 添加到在新标签页中打开的外部链接
  2. 非 WordPress 平台需要手动实施
  3. rel=”noreferrer” 属性有不同的用途,并且会影响分析跟踪

请记住,内部链接不需要这些安全属性,因为它们在您的受控环境中导航。重点将 rel=”noopener” 应用于外部链接,尤其是指向您不完全信任或控制的网站的链接。

使用 rel="noopener noreferrer" WordPress

当您将外部链接设置为 在新标签页中打开s。此行为有助于保护您的网站,同时保持良好的用户体验。当访问者点击这些链接时,他们会留在您的网站上,而新内容会单独加载。

代码差异很大。标准的外部链接如下所示:

<a href="https://examplesite.com">Example Link</a>

但是当你启用“在新选项卡中打开”选项时,WordPress 会将其更改为:

<a href="https://examplesite.com" target="_blank" rel="noopener noreferrer">Example Link</a>

此 target="_blank" 指令打开新标签页,而 rel 属性提供了重要的安全优势。您可以通过检查已发布页面上的任何外部链接的 HTML 来验证这些属性。

您能夠夠把它刪除嗎?

如果您不介意在同一选项卡中打开链接,则删除这些属性很简单。只需取消选中 WordPress 编辑器中的“在新选项卡中打开”选项,WordPress 就会生成一个没有附加属性的标准链接。

然而, 删除部分代码同时保持链接在新标签页中打开更具挑战性。出于安全原因,WordPress 会自动添加这些属性,没有内置切换按钮。

您可以尝试手动删除 noreferrer 通过代码编辑器,目标网站可以在其分析中将您的网站视为引荐来源。该过程包括:

  1. 打开 WordPress 代码编辑器
  2. 定位特定链接 HTML
  3. 直接编辑属性

此 noopener 然而,永久删除该属性要困难得多。即使手动删除,WordPress 通常会在您发布或更新页面时重新添加它。这种持久性的存在是因为 noopener 针对潜在的安全漏洞提供关键保护。

在这种情况下,WordPress 优先考虑安全性而不是完全定制。

对于那些决心改变这种行为的人来说,高级解决方案涉及主题中的自定义代码或专门的插件,但出于安全考虑,不建议大多数用户使用这种方法。

移动浏览器概念图 114360 6598

大多数浏览器现在都包含自动 Noopener 保护功能

截至 2025 年,大多数流行的 Web 浏览器都已针对外部链接实现了自动“noopener”保护,从而降低了开发人员手动实施的紧迫性。这一安全演进始于 2018 年的 Safari,为其他浏览器树立了先例。

Firefox 于 2020 年 2021 月加入了这项安全计划,增加了针对潜在窗口操纵攻击的自动保护。最重大的转变发生在 XNUMX 年初,当时所有基于 Chromium 的浏览器(包括 Chrome、Edge 和 Brave)都将此功能纳入其标准 安全协议.

自动 Noopener 的浏览器时间线:

这种浏览器级别的保护创建了一个重要的安全网,防止恶意网站通过 window.opener 属性。尽管取得了这一进步,但 Web 开发人员仍应继续实现 rel="noopener" 手动操作有两个主要原因:

如果您的代码中没有明确的保护,那么使用其他浏览器的少数互联网用户仍然容易受到攻击。

关于作者

卡勒姆·舍伍德的图片

卡勒姆舍伍德

联合创始人@WorldwideBacklinks.com

让我们谈谈成功🏆

通过个人风格释放您网站的潜力。在 Worldwide Backlinks,我们相信对话的力量可以定制符合您独特需求的策略。我们的专家随时待命,准备好深入解决您的 SEO 挑战并将其转化为胜利。通过专为您设计的策略来提升您的在线形象。今天打电话给我们,迈出主导数字领域的第一步。
请立即致电 1800 840 999 联系我们以开始使用。

Lorem ipsum dolor坐下来,精致的adipistur elit。 Ut elit tellus,luctus nec ullamcorper mattis,pulvinar dapibus leo。