跳转外链时为什么需要设置rel="noopener noreferrer"

发布时间 2023-11-22 09:42:58作者: 晨米酱

当标签a设置了跳转方式 target="_blank" 时,点击链接将会在新页面打开链接,新页面可以通过 window.opener访问到原页面 window对象,进行js操作(钓鱼攻击)。针对这个安全漏洞,我们在设置 target="_blank" 的同时,设置 rel="noopener" ,这样新页面无法通过 window.opener 访问原页面,防止了钓鱼攻击。
image.png
在较新的浏览器版本中(Chrome ≥ 88, Edge ≥ 88, Firefox ≥ 79 and Safari ≥ 12.2) ,设置target="_blank"会隐式提供和设置 rel="noopener" 相同的保护能力。低版本的浏览器设置 rel="noreferrer"也有相同的效果,因此我们之前看到的只设置 rel="noreferrer" 就已经满足预防钓鱼攻击的条件。
image.png

还有一种通过 window.open 跳转外链的方式,我们先来看一下 open 的用法

window.open(url, target, windowFeatures)
  • url:目标链接
  • target:跳转方式
  • windowFeatures:设置窗口属性

使用时我们设置 'noopener=yes,noreferrer=yes'就行了。

在查阅相关资料的时候,有一篇文章提到 不设置 noreferrer 有利于 seo,但是实际开发时 eslint 提示需要设置,这个冲突怎么解释呢?在eslint的 jsx-no-target-blank 这篇文章 提到,当跳转的是信任的域名,不设置 noreferrer 将保留 请求头的 referer 字段,有利于数据分析,因此 noreferrer 是否需要设置是看你的实际用途

For links to a trusted host (e.g. internal links to your own site, or links to a another host you control, where you can be certain this security vulnerability does not exist), you may want to keep the HTTP Referer header for analytics purposes.

回顾上文,不设置 noreferrer 有利于 seo,这个是怎么做到的呢?上面提到如果不设置 noreferrer 将保留 请求头的 referer 字段,而这个字段会在跳转目标链接的谷歌分析的referrals(用户通过主要搜索引擎以外的网站找到您时发生的流量)留下记录。
referral-traffic.webp

direct-traffic.webp

这里需要提到另外一个角色,网站管理员,他们的日常之一就是分析网站流量来源,特别是关注推荐流量(Referral traffic)来源。当网站管理员分析流量的时候注意到我们的网站链接到他们的网站,大概率会进行分享、反链等二次传播,这样就实现间接的seo

有点玄乎,而且挺扯蛋的,不懂

image.png