使用Chrome或Fiddler抓取WebSocket包

背景：以为微信用的是websocket，试一下想抓包看下。

现在做网页游戏开发的同学，肯定会使用到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包的程序，却抓出来的是乱码。那是因为别人传输的是二进制数据流（比如AMF包），而不是JSON之类的对人类可读的明文。

参考资料：

Debug Inspect WebSocket traffic with Fiddler 【荐】

Logging WebSocket Frames using Chrome Developer Tools, Net-internals and Wireshark

原始链接: http://blog.jtwo.me/post/use-chrome-or-fiddler-sniffer-websocket