使用 Web Page Replay

Posted on   |   In   |  

为什么需要使用 Web Page Replay？

需求的产生

实习期间，我们经常用各种Workload对浏览器进行测试，初期大量的Workload都是手工收集或是开源的，再整理到小组内的服务器上。
后期产生了抓取浏览器中Javascript Trace并实时送至后端分析的需求，例如我们希望将某些网页的Webgl调用全部记录下来，或者是将用户的各种互动事件记录下来，又不用手工地修改Workload，便有了我目前写的代理服务器，它能对我们关注的Workload注入Javascript脚本，比和后端代理服务器建立通信，高效地把Trace发送到后端，并易于扩展各种功能的后端。

一个更加常见的需求便是Localize Real life Workload，我们需要自动化地测试很多网上不开源的Workload，虽然通过我的代理服务器，注入分析不需要人工干预了，不过在公司内连接外网Workload是痛苦的。尤其是某些Workload每次需要加载50M的资源文件，一旦浏览器cache失效便要登上很长时间。而且网上的Workload在不断变动，无法直接进行组内Workload的统一化，针对浏览器测试时很难做到组内环境一致。

所以一个最基本的需求就是我们访问该Workload一次，就将所有经过代理服务器的request和response本地存档，称为record；等到下次重复测试时，匹配所有的request，直接发回对应的response，这样便能做到本地replay该workload了。

最近进哥说想加入这个功能在我们的代理服务器上，但由于当初没有考虑到这个功能，并且组内提出可以复用Telemetry中的Webpage Replay功能，可以将其加在我代理服务器的外层，便可以像是管道一样进行功能的扩展。正好我最近在看的Webgl Workload需要加载的资源很多，进行Replay极大加快了我自测的速度。

HTTP/HTTPS代理服务器的妙用

刚才说的两个需求只是代理服务器的一个很小的用处，还有大量的妙用如下：

  • 科学上网，不过HTTP代理一般只能作为国内跳板。
  • 反向代理，做网站的入口，自动后端负载均衡、流量审查、压缩、简单的逻辑直接部署等等功能。
  • 测试平台，之前看到阿里的Anyproxy便是这个作用，可以记录下所有接入终端（手机、平板）的HTTP网路请求，方便修改Header，Cookie，进行颠簸的网路环境的模拟等等，也提供Replay。
  • 内网上网，公司内部方便屏蔽外界的攻击，并限制员工上网，审查上网记录，当然有福利便是可以直接提供梯子。

Web Page Replay 实现原理的简单理解

Replay工具可以运行在DNS劫持和HTTP代理两种模式下，实质上DNS劫持简化了设置浏览器代理的过程。

replay

盗图一张，可以看出Replay劫持模式便是在本机启动一个DNS服务器和Web服务器，分别占用53和80端口。
一般情况下，浏览器访问一个页面先进行域名的DNS解析，然后先目标服务器发送request。Record时，DNS全部返回127.0.0.1，浏览器便将请求发送给本机的服务器，服务器随后便代理请求后返回，并记录下本次request和response。Replay时本机服务器直接匹配存档文件。
DNS劫持的好处便是不用设置浏览器代理了，缺点也很明显：

  • 如果request写明ip时，便绕过了本地的DNS请求（类似Host梯子），便无法实现replay。
  • 访问端口不是标准的80和443也会直接在record环节出错。
  • 需要占用本机的53,80,443端口，影响本机的原有的服务。

所以这个工具也支持直接设置代理的模式，如果只是浏览器的话使用比较简单。想将多个代理服务器管道化，设置每一层的代理为上一层代理就可以了。

接下来粗略了解一下代理服务器的工作方式。

对于HTTP:

代理服务器通过TCP Socket接收到来自客户端的请求。它从HTTP的Header中解析出host和port，如果是域名的话先DNS解析，然后就是Roundtrip最终返回真实的response，这里所有的内容都是代理服务器可见的，可以随意修改。

如果我们这里使用nc，可以首先不通过代理访问百度：

1
2
3
$ nc baidu.com 80
  GET / HTTP/1.1
  Host: baidu.com

可以看见返回的response：

1
2
3
HTTP/1.1 200 OK
Date: Fri, 14 Aug 2015 07:55:26 GMT
......

如果通过本机8080代理服务器：

1
2
3
$ nc localhost 8080
  GET http://baidu.com HTTP/1.1
  Host: baidu.com

代理服务器可能会输出如下日志：

1
2
3
INFO: Got request  baidu.com GET http://baidu.com
INFO: Sending request GET http://baidu.com
INFO: Received response 200 OK

对于HTTPS:
代理服务收到客户端的CONNECT请求，但只可见host和port，代理服务器只能在客户端和服务器中建立起socket连接并相互双工传递，如果需要修改内容的话，需要进行中间人攻击。

Web Page Replay 使用实战

使用DNS劫持模式

使用直接代理模式

源码分析