关于在请求网络时不发送referer的控制

Referer请求头字段允许由客户端指定资源的 URI 来自于哪一个请求地址。Referer 请求头让服务器能够拿到请求资源的来源,可以用于分析用户的兴趣爱好、收集日志、优化缓存等等,同时也让服务器能够发现过时的和错误的链接并及时维护。

Referer 有许多合法的用例,例如找到你网站上的死链、追踪错误或者找到用户是通过哪些搜索条件找到你的网站的,它也也可以被用来增强汪涵安全性:检查 Referer 头可以在一定程度上阻止跨站请求伪造,但是在某些情况下,出于一些原因,网站想要控制页面发送给服务器的 referer头信息的情况下,比如下面的场景:

社交网站一般都会有用户个人页面,这些页面中用户都有可能添加一些外网的链接,而社交网站有可能不希望在用户点击了这些链接的时候,泄露用户页面的 URL ,因为这些 URL 中可能包含一些敏感信息。当然,有些社交网站可能只想在 referer 中提供一个 hostname,而不是完整的 URL 信息。

这个时候我们改怎么做呢?第一反应是前端没办法控制referer,似乎只有后端才可以伪造或控制发送的referer头信息,其实前端也可以控制referer的部分行为。

1、我们首先了解a标签的rel属性

a 标签的 rel 属性用于指定当前文档与被链接文档的关系,其属性取值有很多,其中有一个是noreferrer,规定当用户跟随该超链接时,浏览器不应发送 HTTP referer 头,所以我们如果不想发送refer头信息,可以通过在a标签上加上rel=noreferer来完成,甚至我们可以此原理简单的封装一个函数用于发送不带referer的请求:

function navigateWithoutReferer(url) {
  var a = document.createElement('a');
  a.href = url;
  a.click();
};

但是这样依旧很麻烦,如果我想一个网页上所有的网络的请求都不带referer呢?工作量大不说有些东西还不定好做,接下来我们来了解另外一个东西:

,这个是HTML规范中引入的一个新标签,它用于设置一个全局的策略。

meta referer 的content值可以设置为以下几种类型的值:

1、never

2、always

3、origin

4、default

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

1、如果 meta 标签中没有 content 属性,则终止下面所有操作

2、将 content 的值复制给 referrer-policy ,并转换为小写

3、检查 content 的值是否为上面 list 中的一个,如果不是,则将值置为 default

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

1、如果 referer-policy 的值为never:删除 http head 中的 referer。

2、如果 referer-policy 的值为default:如果当前页面使用的是 https 协议,而正要加载的资源使用的是普通的 http 协议,则将 http header 中的 referer 置为空。

3、如果 referer-policy 的值为 origin:只发送 origin 部分。

4、如果 referer-policy 的值为 always:不改变http header 中的 referer 的值,注意:这种情况下,如果当前页面使用了 https 协议,而要加载的资源使用的是 http 协议,加载资源的请求头中也会携带 referer。

所以如果我们想控制页面上的资源在请求时不会发送referer只需要加上下面这段代码:

<meta name="referer" content="never" />

这样从当前网页发起的请求都不会带上referer啦!

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章