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

原文链接：https://www.chenweiliang.com/cwl-28447.html

超链接标签 <a>代码 通常与 noopener、noreferrer 和 nofollow 属性一起使用，本文将会分享 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排名的内部地址（比如注册或登录页面链接），不想浪费导出权重，或者一些质量较差的页面。

欢迎转载《a标签noopener什么意思？noreferrer属性/nofollow作用》

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


网站地址：https://www.chenweiliang.com/



欲获取更多资讯内幕和秘技，欢迎进入Telegram频道：https://www.chenweiliang.com/go/tgchannel