我们知道,在页面引入图片、JS 等资源,或者从一个页面跳到另一个页面,都会产生新的 HTTP 请求,浏览器一般都会给这些请求头加上表示来源的 Referrer 字段。Referrer 在分析用户来源时很有用,有着广泛的使用。但 URL 可能包含用户敏感信息,如果被第三方网站拿到很不安全(例如之前不少 Wap 站把用户 SESSION ID 放在 URL 中传递,第三方拿到 URL 就可以看到别人登录后的页面)。之前浏览器会按自己的默认规则来决定是否加上 Referrer。 

Referrer Policy States

新的 Referrer Policy 规定了五种 Referrer 策略:No Referrer、No Referrer When Downgrade、Origin Only、Origin When Cross-origin、和 Unsafe URL。之前就存在的三种策略:never、default 和 always,在新标准里换了个名称。他们的对应关系如下:

策略名称 属性值(新) 属性值(旧)
No Referrer no-referrer never
No Referrer When Downgrade no-referrer-when-downgrade default
Origin Only origin -
Origin When Cross-origin origin-when-crossorigin -
Unsafe URL unsafe-url always

可以看到,新标准给之前的三种策略赋予了更具意义的新名称,同时还增加了两种新策略。另外现阶段支持 Referrer Policy 的浏览器保留了对旧标准的支持,但还是推荐大家尽快更新。简单介绍下这五种类型的具体含义:

  • No Referrer:任何情况下都不发送 Referrer 信息;
  • No Referrer When Downgrade:仅当发生协议降级(如 HTTPS 页面引入 HTTP 资源,从 HTTPS 页面跳到 HTTP 等)时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的
  • Origin Only:发送只包含 host 部分的 Referrer。启用这个规则,无论是否发生协议降级,无论是本站链接还是站外链接,都会发送 Referrer 信息,但是只包含协议 + host 部分(不包含具体的路径及参数等信息);
  • Origin When Cross-origin:仅在发生跨域访问时发送只包含 host 的 Referrer,同域下还是完整的。它与 Origin Only 的区别是多判断了是否 Cross-origin。需要注意的是协议、域名和端口都一致,才会被浏览器认为是同域;
  • Unsafe URL:无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送 Referrer 信息。正如其名,这是最宽松而最不安全的策略;

具体使用

CSP 响应头

CSP(Content Security Policy),是一个跟页面内容安全有关的规范。在 HTTP 中通过响应头中的 Content-Security-Policy 字段来告诉浏览器当前页面要使用何种 CSP 策略。现在 CSP 还可以通过 referrer 指令和五种可选的指令值,来指定 Referrer 策略,格式非常简单:

Content-Security-Policy: referrer no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;

注:根据文档,通过 CSP 头部设置 Origin When Cross-origin 策略时,指令值应该用 origin-when-cross-origin,这跟前面的表格里的 origin-when-crossorigin 有差异。实际上经过测试,Chrome 42 只支持 origin-when-crossorigin,后续会不会变还不知道,建议大家使用时,自己先测一下。

CSP 的指令和指令值之间以空格分割,多个指令之间用英文分号分割。

<meta> 标签

通过 <meta> 标签也可以指定 Referrer 策略,同样很简单:

<meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">

需要注意的是,<meta> 只能放在 <head>...</head> 之间,如果出现的位置不对会被忽略。同样,如果没有给它定义 content 属性,或者 content 属性为空,也会被忽略。如果 content 属性不是合法的取值,浏览器会自动选择 no-referrer 这种最严格的策略。

<a> 标签的 referrer 属性

通过给 <a> 标签增加 referrer 属性也可以指定 Referrer 策略,格式如下:

<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>

这种方式作用的只是这一个链接。并且,<a> 标签可用的 Referrer 策略只有三种:不传、只传 host 和都传。另外,这样针对单个链接设置的策略优先级比 CSP 和 <meta>要高。

需要注意的是:经过我的测试,目前并没有哪个浏览器实现了对 referrer 属性的支持。现阶段,如果要针对单个链接去掉 Referrer,还是推荐使用下面这种支持度更好的写法:

<a href="http://example.com" rel="noreferrer">xxx</a>

另外再重复一遍,现阶段的浏览器还保留了对 never、default 和 always 的支持,但是已经不推荐使用了。

可以看到,通过新的 Referrer 策略,网站所有者可以选择更高的安全级别来保证用户隐私不被泄露;也可以选择更低的安全级别来获得一些便利,相比之前只能由浏览器默认策略一刀切,确实灵活了不少。

应用场景

  1. 在获取微信头像的情况,如果通过img标签去加载微信头像,这个时候,可能由于微信对于图片防盗链的限制而无法正常显示,这个时候可以添加

<meta name="referrer" content="no-referrer" >

  这是,即可正常显示了

HTTP之referrer的更多相关文章

  1. .NET微信模拟登录及{base_resp:{ret:-4,err_msg:nvalid referrer}}的解决办法

    12年的时候写了些关于微信开发的内容,当时看好这个东西,可惜当时腾讯开放的权限太少,之后的一年多时间没有太关注了. 现在又要重新开始微信开发的阵容了,微信只是个入口,微网站才是趋势. 我是个水货,所以 ...

  2. https网站跳转到http网站时,referrer获取不到的问题

    工作中,有一个活动列表页A,要链接到具体的活动详情页B,A页面放在https网站上,B页面放在http网站上,从https跳转到http网站时,为了用户隐私安全信息,浏览器默认不传送referrer ...

  3. document.referrer 特性

    最近需要用到document.referrer,但是在测试的时候,总是获取为空,百思不得其解. 于是发动百度,看了大量的文章没有一个说到点子上是为什么,后来偶然看到document.referrer ...

  4. 关于document.referrer的使用需要注意

    项目使用到一个场景,ajax请求返回无权限,跳回登录页面,登录后自动返回之前的浏览页,跳转由前端处理,于是想到document.referrer,但是对可靠性不确定,特意搜索了一下相关资料,大致整理如 ...

  5. js中的referrer返回上一页使用介绍

    js中的referrer的用法举例. js完整代码:  <script language="javascript">  var refer=document.refer ...

  6. js中的referrer使用,返回上一页

    js完整代码: <script language="javascript"> var refer=document. referrer ;     document.g ...

  7. Referrer 还是 Referer?

    上回我写了一篇文章介绍「Referrer Policy」,有小伙伴看完后问我:Referrer 这个单词到底怎么拼,为什么有时候中间有两个 r,有时候只有一个? 是的,这是一个很有趣的问题,这里就给有 ...

  8. document.referrer之隐藏来源

    document.referrer document.referrer是用来获取跳转链接的来源,正规的解释是:referrer 属性可返回载入当前文档的文档的 URL. 实际中使用在广告相关业务中较多 ...

  9. referrer vs referer

    http request里面是referer 其实是http规范拼写错了,正确的拼写应该是referrer

  10. 转:彻底搞清referrer和origin

    在http协议中有这两个字段,之前一直隐隐约约的觉得是,一种标记请求来源的方法(的确是),但是更细致的对这两个字段的比较却没有一个清楚的认识. referrer 到底是referer还是referre ...

随机推荐

  1. SQLServer数据库增删改查

    一.数据库定义 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.数据库的操作分为两种形式:一种是直接在数据库管理工具图形化界面进行操作:一种是使用数据库脚本进行操作,数据库脚本可 ...

  2. winfrom之datagridview分页显示

    这次datagridview绑定数据并分页操作,因为用到了webservice,所以代码会详细讲解.QueryByCondition是一个查询函数 客户端: PageData pageData=new ...

  3. Kafka 0.11新功能介绍:空消费组延迟rebalance

    Kafka 0.11新功能介绍:空消费组延迟rebalance 在0.11之前的版本中,多个consumer实例加入到一个空消费组将导致多次的rebalance,这是由于每个consumer inst ...

  4. Nginx使用教程(四):提高Nginx网络吞吐量之buffers优化

    请求缓冲区在NGINX请求处理中起着重要作用. 在接收到请求时,NGINX将其写入这些缓冲区. 这些缓冲区中的数据可作为NGINX变量使用,例如$request_body. 如果缓冲区与请求大小相比较 ...

  5. C#反射の反射泛型

    C#反射の反射详解(点击跳转)C#反射の反射接口(点击跳转)C#反射反射泛型接口(点击跳转)C#反射の一个泛型反射实现的网络请求框架(点击跳转) 接上篇. 自定义一个泛型类(继承于接口) public ...

  6. 解决新版chrome无法手动拖动安装插件 提示“无法从该网站添加应用,扩展程序和用户脚本”

    开发模式安装 把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar 解压压缩文件 在Chrome的地址栏中输入:chrome://extensions/ 打开Chrome ...

  7. php 验证身份证号

    function validation_filter_id_card($id_card){ if(strlen($id_card)==18){ return idcard_checksum18($id ...

  8. P2690 接苹果 (DP)

    补一下dp的思路: dp[i][j]表示第 i 分钟转 j  次所得到的最大值.很容易得到这个dp的推导式. 图中¢()函数表示成立为1, 不成立为0的函数. #include<cmath> ...

  9. while和do-while语句的异同之处

    while型语句: “先判断,后执行”: while 执行流程: 当程序执行到 while 循环时 , 会首先判断小括号里的值 ,如果值 为假 :结束while语句 , 程序继续向下走  为真 :会把 ...

  10. [MicroPython]TPYBoard智能小车“飞奔的TPYBoard装甲一号”

    智能小车作为现代的新发明,是以后的发展方向,他可以按照预先设定的模式在一个环境里自动的运作,不需要人为的管理,可应用于科学勘探等等的用途.智能小车能够实时显示时间.速度.里程,具有自动寻迹.寻光.避障 ...