左小白的技术日常
Github

外部链接 a 标签为什么要加 noreferrer 与 noopener ?

这篇文章发布于 2020/12/15,归类于
标签:
noreferrer和noopenernoreferrernoopener

一般页面的外部链接 a 标签都会加上 ref="noreferrer noopener",这样可以避免一些安全问题,下面通过几个问题来具体看看

  1. a 标签加上 noreferrer 和 noopener 后会有什么效果?
  2. Referer 是什么?有什么应用场景?
  3. window.opener 可以做什么?

noreferer_1.png

a 标签加上 noreferrer 和 noopener 后会有什么效果?

以 Github 上 less.js 仓库设置的网站链接为例,如上图。加了这两个参数后点击链接,该页面打开后

请求头 Referer 的作用是什么?

一般网页在加载html、js、css、图片等静态资源发送请求时,请求头部分会有一个 Referer 字段,用于标记请求来源。referer 单词存在拼写错误,本意是打算使用 referrer,写错了。后来为了兼容,将错就错,还是保留了错误的拼写方式。

Referer可以标记请求来源,有以下几个应用场景

noreferer_2.png

window.opener 可以做什么?

window.opener 可以拿到来源网站的 window 对象,虽然一般访问 dom 等有跨域限制,但 window.opener.location.href 可以直接重定向源网站,使来源站点发生变化。使用 noopener 可以避免一些安全风险。

参考: