使用Chrome或Fiddler抓取WebSocket包

Published: Tags: WEB SNIFFER

现在做网页游戏开发的同学,肯定会使用到WebSocket来通讯,毕竟相对于长轮询和iFrame等方式,WebSocket给我们开了一扇大门,更简单快捷。

首先,HTTP是建立在TCP协议基础上的,而WebSocket通常也是建立在TCP上,所以说为什么有些网页游戏抓不到包而有些又可以,这仅是因为你使用的抓包工具是针对了HTTP的通信协议。

我先从抽象的层面,举一个可能不太恰当的例子,只为了让不明白HTTP和WebSocket两者之间抓包有何区别的同学大概了解这两个协议的异同。客户端/服务端用C/S简称,我把数据抽象成水流,而HTTP是用水枪传递水流的(无状态),至于WEBSOCKET则是使用水管传递水流(实时)。

HTTP通讯方式: > + 客户端C把数据封装好了要交给服务端S,所以把水放到水枪里面,射过去给S > + S用桶把水挡下来了,然后分析水的成分(数据内容),完成后再把新的水(返回的数据)射回去给C > + 这个过程中,任何人都可以随时在C和S之间用海绵吸一点水然后拿去分析(嗅探数据),或者是直接用桶把水都挡下来分析完后再装到水枪中,模仿C的动作射给S(也就是代理抓包)

WEBSOCKET方式: > + 客户端C和服务端S,双方之间先用一条水管连起来(用的是HTTP握手),然后水流都通过这个小水管来传输 > + 水管里面一直有水在流动,所以要通讯只需要C或者是S把数据水流放到水管中,则会立刻传输到对方那边 > + 这个过程中,要嗅探就比较麻烦了,需要先在水管中先打个洞,然后再把分析器放进去、或者是斩断这个水管在中间接个水表之类的设备去分析水质成分

好了,乱说一通完毕,说一下抓取WebSocket的两个工具,都是常见的程序,只是可能很多同学不清楚有这样的功能而已。

第一个:Chrome,也就是谷歌的浏览器 - 进入你要抓包的网页,然后按F12打开我们最爱的开发者工具 - 然后点Network,再从过滤器中找到WebSockets(上方或下方的状态栏) - 选中过滤出来的WebSocket,在弹出来的右边栏中可以找到Frames,里面就是抓到的包 - 如果要看新通讯产生的数据包,则要先点其他的位置比如Headers再点Frames才可以刷新

第二个:Fiddler,抓包调试的利器,已经人手一个了吧 - 打开Fiddler,点开菜单栏的Rules,选择Customize Rules… - 这时会打开CustomRules.js文件,在class Handlers中加入以下代码

static function OnWebSocketMessage(oMsg: WebSocketMessage) {
    // Log Message to the LOG tab
    FiddlerApplication.Log.LogString(oMsg.ToString());
}
  • 保存后就可以在Fiddler右边栏的Log标签里,看到WebSocket的数据包
  • 或者直接双击左边栏的WebSocket记录,就会在右边栏出现对应的数据包标签

到了这里,还有一个情况要说明,就算是有工具可以抓到WebSocket中的包,看到的也不一定是明文。这个要看传输的水是什么,如果是普通水那谁都可以分析;但如果是水银,那这个分析水的设备很可能就显示乱码了。 所以也就有同学明明使用了可以抓WebSocket包的程序,却抓出来的是乱码。那是因为别人传输的是二进制数据流(比如AMF包),而不是JSON之类的对人类可读的明文。

参考资料: Debug Inspect WebSocket traffic with Fiddler 【荐】 Logging WebSocket Frames using Chrome Developer Tools, Net-internals and Wireshark