让https网站发送 referrer https 与 http 跳转 referer 的问题

所属分类: 网页制作 / 应用技巧 阅读数: 909
收藏 0 赞 0 分享

本文描述了一个关于 http 协议中 referer 的 metadata 参数的提议,使用这个 metadata 参数,html 文档可以控制 http 请求中的 referer ,比如是否发送 referer、只发送 hostname 还是发送完整的 referer 等。虽然有一些方法可以控制 referer ,比如 flash,以及一些 js 的 tricks,但是本文中描述的是另外一番景象。

使用场景

在某些情况下,出于一些原因,网站想要控制页面发送给 server 的 referer 信息的情况下,可以使用这一 referer metadata 参数。

隐私

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

安全

有些使用了 https 的网站,可能在 URL 中使用一个参数(sid 等)来作为用户身份凭证,而又需要引入其他 https 网站的资源,这种情况下,网站肯定不希望泄露用户的身份凭证信息。

Object-Capability Discipline

有些网站遵循Object-Capability Discipline,而 referer 刚好与这一策略相悖,所以,网站能够控制 refeer 将对 Object-Capability Discipline 很有利。

技术细节

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

never
always
origin
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。
 

例子

如果页面中包含了如下 meta 标签,所有从当前页面中发起的请求将不会携带 referer:

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

如果页面中包含了如下 meta 标签,则从当前页面中发起的 http请求将只携带 origin 部分(注:根据原文中的语境,我理解这里的 origin 是包含了 schema 和 hostname 的部分 url,不包含 path 等后面的其他 url 部分),而不是完整的 URL :

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

注意:在使用本文中所述的 meta 标签的时候,浏览器原有的 referer 策略将被打破,比如从 http 协议的页面跳转到 https 的页面的时候,如果设置了适当的值,也会携带 referer。

其他问题

这与 rel=noreferer 有什么关系呢?可能 rel=noreferer 会覆盖掉本文中的 meta 标签所设置的值。也就是功能覆盖。
origin 信息不是一个完整的 url,所以浏览器客户端估计会在 origin 后面加一个 / 来作为 path 部分。
如果 origin 是唯一的,会发生什么情况呢?估计 referer 会被忽略。

译者注

这篇文章最初写于2012年,目前在原始页面已经是废弃状态,并且已经提供了w3c 的referer-policy 页面,但是,译者注意到,目前很多网站在防御 CSRF 的时候,都采用校验 referer 的方法,有时候允许 referer 为空,并且某些 BAT 厂商的重要业务在防御 JSON 劫持的时候,也采用校验 referer 的方法并允许 referer 为空,也许你会觉得本文中描述的只是一种提议,但是,FireFox 在21日的一篇文章中已经声明,从 Firefox 36 Beta 开始,将会支持 referer-policy,这无疑会让一些厂商的业务面临威胁。

[参考来源wiki.whatwg.org,转载请注明来自FreeBuf黑客与极客(FreeBuf.COM)]

https 与 http 跳转 referer 的问题

Http协议头中的Referer主要用来让服务器判断来源页面, 即用户是从哪个页面来的。获取方式:$_SERVER[ 'HTTP_REFERER' ]

在https->http跳转中,refer是不建议被传递的,而https->https和http->https则没有这个问题。

例如我获取二维码接口地址:

正确的效果

https://qrcode.artron.net/?text=https|http://m-exhibit.artron.net/&el=10&margin=1

错误的效果

http://qrcode.artron.net/?text=https://m-exhibit.artron.net/jump/index

验证结果显示,https 可以兼容http的一些参数问题,而http不能兼容https的参数问题,在这里顺便说一下http与https的区别

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息。HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此HTTP协议不适合传输一些敏感信息,比如信用卡号、密码等。
为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS。为了数据传输的安全,HTTPS在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。

HTTPS和HTTP的区别主要为以下四点:

一、https协议需要到ca申请证书,一般免费证书很少,需要交费。
二、http是超文本传输协议,信息是明文传输,https 则是具有安全性的ssl加密传输协议。
三、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
四、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

以下是对问题的回答:

根据上文的说明,一般情况下,从HTTPS站到HTTP站点的跳转,浏览器默认不发送referrer,可以通过大概两种办法让浏览器传送referrer:

1,在A站的head中加入

<meta name="referrer" content="always">

2,B站也采用HTTPS
 

当然如果A站强制规定不发送referrer,B站又没有对A站的控制权,就像上文中提到的一样,我们是无法控制让第三方统计工具统计到百度搜索来源关键词的。

更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多