EMLOG文章超链接中的rel="noopener"是什么

我最近关注到一个问题，EMLOG Pro文章页在添加超链接后会自动添加一个rel="noopener"的属性，看着十分别扭，今天我们就掰开了揉碎了看看这玩意儿是个啥。

一、什么是rel="noopener"

rel="noopener"是一个HTML属性，添加到所有选择在新浏览器选项卡中打开的EMLOG Pro链接。它还伴随着rel="noopener"属性。

二、rel="noopener"属性的作用

有一些JavaScript功能允许新选项卡控制其引用窗口。如果您链接到受恶意代码影响的外部网站，则该网站可以使用window.opener JavaScript属性更改原始页面（您的网站）以窃取信息并传播恶意代码。

添加rel="noopener"会阻止新标签利用此JavaScript功能，同样，rel="noopener"属性可防止将引用者信息传递给新选项卡。

三、rel="noopener"属性在EMLOG Pro中的使用

在EMLOG Pro中，rel="noopener"是一种安全措施，用于保护网站免受恶意网站的跨站点黑客攻击。

当链接选择在新标签页中打开时，EMLOG Pro会自动添加此属性，以阻止新标签页利用window.opener JavaScript功能。同时，rel="noopener"属性防止将引用者信息传递给新选项卡。

此功能是在EMLOG Pro中引入的，用于解决可被恶意网站利用的安全漏洞，当您添加链接并选择“在新标签页中打开”时，EMLOG Pro会将rel="noopener"和rel="noreferrer"添加到链接代码中，这不仅在EMLOG Pro搭建的网站中常见，在WordPress搭建的网站上同样如此。

EMLOG Pro生成的HTML代码如下所示：

<a href="https://example.com" target="_blank" rel="noreferrer noopener" aria-label="This is an external link (opens in a new tab)">demo link</a>

四、noopener与nofollow之间有什么区别

通常情况下，我们很容易将rel="noopener"与rel="nofollow"混合起来，它们是完全分开的。

noopener属性可以防止您的网站被跨站点黑客攻击并提高WordPress的安全性。

nofollow属性可以防止您的网站将SEO链接排名传递给链接的网站。

在您的网站上关注链接时，搜索引擎会查找并考虑nofollow属性，但是，他们不会考虑noopener标签。

默认情况下，EMLOG Pro不会主动在外部链接上添加nofollow属性标签，需要你手动进行添加。