专业编程基础技术教程

网站首页 > 基础教程 正文

noopener, noreferrer 及 nofollow用法简介

ccvgpt 2024-08-15 20:29:24 基础教程 8 ℃

首先了解一下target="_self"和target="_blank"

target="_self"是在当前这个网页窗口来打开新的网页链接;
target="_blank"目标网页会在新的标签页中打开.

noopener, noreferrer 及 nofollow用法简介

一般如果是跳转到第三方站点,或如购物车等页面,习惯性使用target="_blank"。便于同时查看上一页,尤其是第三方站点。

但使用target="_blank"在新打开的页面中可通过window.opener获取到源页面的window对象, 这就埋下了安全隐患。如进入了一个钓鱼网站,可能会发生用户账户密码信息泄露的情况。

怎么解决这个问题呢?为了避免上述问题, 引入了rel="noopener"属性, 这样新打开的页面便获取不到来源页面的window对象了, 此时window.opener的值是null 。同样设置了 rel="noreferrer"同样也有这样的作用。

一般我会noopener, noreferrer,nofollow同时使用,示例:

<a href="some-external-link" rel="noopener noreferrer nofollow" target="_blank">Some External......

使用noopener, noreferrer因为考虑到浏览器兼容性问题,因为一些老旧浏览器不支持noopener;
使用nofollow,因为不想将权重传递给第三方链接或不重要或不希望谷歌索引的页面

补充:使用了noopener/noreferrer,因无法追踪到链接来源,在GA中此处流量会归类到直接流量,而不是引荐流量。

Tags:

最近发表
标签列表