a标签noopener什么意思?noreferrer属性/nofollow作用

超链接标签 <a>代码 通常与 noopener、noreferrer 和 nofollow 属性一起使用,本文将会分享 noopener、noreferrer 和 nofollow代码属性的使用方法。

a标签noopener什么意思?noreferrer属性/nofollow作用

a标签noopener是什么意思?

target="_blank" 添加到链接时,目标页面将在新选项卡中打开。

在新打开的页面中,可以通过window.opener获取源页面窗口对象,埋下安全隐患。

  • 具体来说,你自己的网页A链接,有一个可以打开另一个第三方地址的网页B链接。
  • B网页通过window.opener获取网页A的window对象;
  • 然后就可以使用A页面跳转到钓鱼页面window.opener.location.href="abc。com",用户没有注意到
  • 地址跳转,在该页面输入用户名和密码后,出现信息泄露。
  • 为了避免上述问题,引入了 rel 设置了="noopener" 属性,使得新打开的页面无法获取源页面的window对象。
  • 此时window.opener的值为null。

所以,如果要在新标签页中打开第三方地址,最好是给a标签代码添加 rel="noopener"属性。

noreferrer属性作用

类似于 noopener。

设置rel="noreferrer"后,新打开的页面无法获取源页面的窗口进行攻击。

同时,无法从新打开的页面获取document.referrer信息。 此信息包含源页面的地址。

通常noopener和noreferrer同时设置,rel="noopener noreferrer"

既然后者有前者同时限制访问window.opener的功能,为什么要同时设置呢?

为了兼容性,因为部分老浏览器不支持 noopener。

nofollow的作用

搜索引擎对页面权重的计算包括页面引用数(反向链接),即如果该页面被许多其他网页链接,则该页面将被判断为高质量页面。

搜索结果中的排名将会上升。

设置rel="nofollow"时,意思是告诉搜索引擎该链接对上述排名没有贡献。

  • 一般用于链接无需SEO排名的内部地址(比如注册或登录页面链接),不想浪费导出权重,或者一些质量较差的页面。

希望陈沩亮博客( https://www.chenweiliang.com/ ) 分享的《a标签noopener什么意思?noreferrer属性/nofollow作用》,对您有帮助。

欢迎分享本文链接:https://www.chenweiliang.com/cwl-28447.html

欢迎加入陈沩亮博客的 Telegram 频道,获取最新更新!

喜欢就分享和按赞!
您的分享和按赞,是我们持续的动力!