WordPress编辑器默认便签有 nofollow、noopener、noreferrer、bookmark ,用法如下:

<a title="Permanent Link to 米扑博客" href="https://blog.mimvp.com" target="_blank" rel="bookmark noopener noreferrer">米扑博客</a>

 

noreferrer 标签

noreferrer 标签在单击链接时隐藏引用者信息(no referrer)。如果有人从使用此标记的链接到达您的网站,您的网站分析将不会显示谁引用到了您的网站,即不知道链接引用来源(Request Headers's Referer)。相反,它会错误地显示为您的统计流量报告中的直接流量

这个 noreferrer 标签在 WordPress 早些版本中是自动添加到 A 标签中,但实际上这并不是 WordPress 本身所做的改变,而是由 WordPress 使用的富文本编辑器 TinyMCE(WordPress 默认编辑器)造成的目的是防止网络钓鱼攻击,垃圾邮件发送者劫持您的网页,可能会访问您的网站或访问机密信息。不过现在 TinyMCE 只强制插入 noopener 标签,已不会强制插入“noopener noreferrer”标签。

 

noopener 标签

rel =“noopener”在新标签中打开链接时基本上不会打开它的开启者。这意味着,它的 window.opener 属性将是在新标签中打开一个链接时,而不是打开同一个页面为空。从安全角度出发,建议添加 noopener 属性,让新打开页面无法获取到源网页的 window对象。

rel =“noopener”一般都是搭配 target="_blank"同时使用,因为 target="_blank" 也是一个安全漏洞:新的页面可以通过 window.opener 访问您的窗口对象,并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。新页面将与您的页面在同一个进程上运行,如果新页面正在执行开销极大的 JavaScript,您的页面性能可能会受影响。

 

nofollow 标签

nofollow 标签就是告诉百度、Google 等搜索引擎不要通过使用此标记的链接传递任何值。大多数情况下,nofollow 标签用于阻止“PageRank”传递到网站上的管理页面,例如您不需要排名的登录页面,或者根据 Google 的付费使用广告客户的 URL 链接政策。除了用于付费和管理链接之外,nofollow 标记通常用于限制 PageRank 通过博客评论或留言簿条目中的链接传递。在链接到信誉或可信度可能成为问题的网站时,您也可以使用 nofollow。

 

bookmark 标签

bookmark 标签旨在标记永久链接,可用作书签收藏、检索。

 

noopener 和 noreferrer 标签提高安全

noopener 和 noreferrer 标签是阻止漏洞利用的主动权,该漏洞是利用在新标签中打开链接。很少有人知道这个漏洞,因此 WordPress 采取这一举措来提高用户的安全性。反向 Tabnabbing 是一种网络钓鱼攻击,攻击者用恶意文档替换合法且可信的页面选项卡。

当有人打开新选项卡时,网络钓鱼者会通过 window.opener 检测引荐网址,并使用 window.opener.location = newURL 推送新的网址。

这样,没人会有陷入网络钓鱼攻击的线索,因为他们已经从可靠的来源(WordPress 建立的网站)到达网站。而使用 rel =“noopener”会阻止网络钓鱼者获取有关链接源和与 referrer 链接相关的任何数据的信息。

 

rel="nofollow noopener noreferrer"

超链接 target="_blank" 要增加 rel="nofollow noopener noreferrer" 来堵住钓鱼安全漏洞。如果在链接上使用 target="_blank"属性,并且不加上rel="noopener"属性,那么你就让用户暴露在一个非常简单的钓鱼攻击之下。

为了告知来自于不受保护的站点用户,我们运行一个利用了这个缺陷的脚本。

if (window.opener) {
	window.opener.location = "https://mimvp.com/fishing?referrer="+document.referrer;
}

相信绝大多数站点都没有恰当地处理这个问题,为了限制 window.opener的访问行为,原始页面需要在每个使用了target="_blank"的链接中加上一个rel="noopener"属性。然而,火狐不支持这个属性值,所以实际上你要用 rel="noopener noreferrer"来完整覆盖。

 

target="_blank"属性特别提示

当你浏览一个页面点击一个a标签连接 <a href="mimvp.com" target="_blank"> 跳转到另一个页面时,在新打开的页面中可以通过 window.opener获取到源页面的部分控制权, 即使新打开的页面是跨域的也照样可以(例如 location 就不存在跨域问题)。

rel=noopener 新特性

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

在chrome 49+,Opera 36+,打开添加了rel=noopener的链接, window.opener 会为null。

在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替target='_blank' 的解决此问题:

var otherWindow = window.open('https://mimvp.com');
otherWindow.opener = null;
otherWindow.location = url;

使用 window.open 打开页面,手动剑opener设置为null。

 

nofollow、noopener、noreferrer、bookmark 标签对SEO的影响

许多博主站长们关心 nofollow 标签会影响 百度、Google 等搜索引擎的抓取和索引链接以及传递 PageRank 的能力,所以大家都比较担心 noopener 标签和 noreferrer 标签也会这样做。

其实,noopener 标签和 noreferrer 标签对 SEO 没有任何影响。简而言之,它们运行在分析/浏览器级别,而不是搜索引擎级别。虽然在监控反馈流量方面存在严重问题,但它不会影响站点内容的索引、抓取或排名方式。

 

 

参考推荐:

a标签 rel=“external nofollow“ 用法

html dl dt dd 标签语法与使用

常用的HTML标签和属性解释

HTML/CSS 如何修改submit按钮的宽与高