隐藏来源禁用Referrer 的方法

原文链接：

https://www.cnblogs.com/duanweishi/p/16490197.html

https://blog.csdn.net/qq996150938/article/details/111659131

论页面禁止 referer 的 6 种方式

1. head 标签中添加 meta属性

可以在 head 标签中添加 meta 属性，设置

1	name='referrer' content='never'

referer 的 metedata 参数可以设置为以下几种类型的值：

never
always
origin
default

如果在文档中插入 meta 标签，并且 name 属性的值为 referrer，浏览器客户端将按照如下步骤处理这个标签：

如果 meta 标签中没有 content 属性，则终止下面所有操作
将 content 的值复制给 referrer-policy ，并转换为小写
检查 content 的值是否为上面 list 中的一个，如果不是，则将值置为 default

接下来浏览器后续发起 http 请求的时候，会按照 content 的值，做出如下反应 (下面 referer-policy 的值即 meta 标签中 content 的值):

如果 referer-policy 的值为 never：删除 http head 中的 referer
如果 referer-policy 的值为 default：如果当前页面使用的是 https 协议，而正要加载的资源使用的是普通的 http 协议，则将 http header 中的 referer 置为空
如果 referer-policy 的值为 origin：只发送 origin 部分
如果 referer-policy 的值为 always：不改变http header 中的 referer 的值，注意：这种情况下，如果当前页面使用了 https 协议，而要加载的资源使用的是 http 协议，加载资源的请求头中也会携带 referer

例子

举个例子，如果你的页面是:

1	<meta name="referrer" content="never">

那么加载的第三方资源将不会带上 referer 头部:

而且可以看到请求的 Referrer Policy 变成 no-referrer。

然后如果是换成:

1	<meta name="referrer" content="origin">

就换变成只带 host 域名，跟 origin 头部几乎一样 (多了最外面一个斜杠)

然后对应请求的 Referrer Policy 变成 origin:

兼容性

这个标准还是比较老的，不过通过 can i use meta:referrer 还是可以看到大部分的主流浏览器 (Edge, Firefox, Chrome) 都有支持 (我亲测过了)

2. 添加ReferrerPolicy属性

添加 meta 标签相当于对文档中的所有链接都取消了 referer ，而 ReferrerPolicy 则更精确的指定了某一个资源的 referer 策略。关于这个策略的定义可以参照 MDN。比如我想只对某一个图片取消referrer，如下编写即可:

1	<img src="xxxx.jpg" referrerPolicy="no-referrer" />

A 标签也支持这个属性:

1	<a href="xxxx.html" referrerPolicy="no-referrer" />

兼容性

通过 can i use referrerPolicy，可以看到除了 IE 和少部分手机浏览器，大部分的主流浏览器还是支持的:

3. 通过 rel=’noreferrer‘

还可以通过标签的 rel 属性来禁止 referer 头部:

1	<a href="xxxx.html" rel="noreferrer" />

当然目前兼容的有限, 只支持 <a>, <area>, <form> 这三个元素:

The noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.

mozilladeveloper.mozilla.org/en-US/docs/Web/HTML/Link_types/noreferrer

通过 can i use noreferrer 可以看到支持的浏览器版本:

4. 代理模式

这个就比较好理解了，把自己的服务器当做代理服务器, 请求先经过自己服务器, 修改referer头, 再反向代理到真正的服务器地址。

5. 外链通过 iframe 来打开

如果是通过外链的话，那么可以通过 iframe 的方式来打开:

1
2
3

function open_without_referrer(link){
  document.body.appendChild(document.createElement('iframe')).src = 'javascript:"<script>top.location.replace(\''+link+'\')<\/script>"';
}

这个其实就是通过 top.location.replace 方法替换当前的页面，从而丢失掉 referer 来源，这时候如果点击浏览器的回退按钮，就会发现已经回退不过去了。

6. 外链通过新窗口打开

如果是通过 window.open 打开的方式，也可以这样做:

1
2
3

function open_new_window(full_link){ 
    window.open('javascript:window.name;', '<script>location.replace("'+full_link+'")<\/script>');
 }

这个跟上面的 iframe 差不多，也是通过 location.replace 方法来更新新打开窗口的文档。从而丢失掉 referer 来源。