我们知道,在页面引入图片、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. 基于WIN8.1:新手篇→tomcat安装配置

    一.JDK配置 下载安装JDK和tomcat 打开电脑属性,高级系统设置进行环境变量配置 新建系统变量,变量值为JDK安装路径,并在系统变量path最后加上“%JAVA_HOME%\bin;%JAVA ...

  2. Linux 小知识翻译 - 「DNS服务器」

    这次聊聊「DNS服务器」. DNS(Domain Name System)服务器,也被称为域名服务器. 因为使用互联网的时候,必须要指定DNS服务器,所以你一定听过DNS这个名字吧. 那么,这个DNS ...

  3. 17秋 软件工程 第六次作业 Beta冲刺

    题目:团队作业--Beta冲刺 Scrum Beta Scrum1 Beta Scrum2 Beta Scrum3 Beta Scrum4 Beta Scrum5 总结博客 总结博客

  4. Nmap参考指南(Man Page)

    Table of Contents 描述 译注 选项概要 目标说明 主机发现 端口扫描基础 端口扫描技术 端口说明和扫描顺序 服务和版本探测 操作系统探测 时间和性能 防火墙/IDS躲避和哄骗 输出 ...

  5. 现在使用Nginx实现TCP反向代理

    Nginx 在1.9.0版本发布以前如果要想做到基于TCP的代理及负载均衡需要通过打名为 nginx_tcp_proxy_module 的第三方patch来实现,该模块的代码托管在github上网址: ...

  6. Codeforces Round #542 C. Connect 搜索

    C. Connect time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  7. TLB的作用及工作过程

    下面内容摘自<步步惊芯--软核处理器内部设计分析>一书          页表一般都非常大,而且存放在内存中,所以处理器引入MMU后,读取指令.数据须要訪问两次内存:首先通过查询页表得到物 ...

  8. 如何给30台centos7服务器分别增加相同的用户

    老大直接给了30台新鲜的生产服务器,要给每一台服务器增加一个用户,密码相同 难道我们要部署一个工具吗?这样对生产环境可能会产生影响,为了保证服务器的新鲜以及节约时间,研究了小半天,终于研究出一个不是很 ...

  9. 什么是JWT

    根据维基百科的定义,JSON WEB Token(JWT,读作 [/dʒɒt/]),是一种基于JSON的.用于在网络上声明某种主张的令牌(token).JWT通常由三部分组成: 头信息(header) ...

  10. 【ES6】import, require,export

    node编程中最重要的思想就是模块化,import和require都是被模块化所使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转 ...