作为Web应用中最常见的数据传输协议之一的Websocket，在我们日常工作中也势必会经常使用到，而在调试或测试中我们常常也有直接改变Websocket数据报文以确认其对应用的影响的需求，本文将介绍一种灵活方便的方式篡改Websocket收发的数据。

之前的文章里已经提到了如何利用FreeHttp修改HTTP的请求/响应报文，其实借助FreeHttp同样可以对Websocket数据报文做任意修改。（事实上burp suite 及 fiddler 的script 等工具也是可以完成的）

FreeHttp可以提供更容易的方式让您使用提前按需求设置的一组规则对websocket发出及接送的数据进行任意的篡改（同时支持文本及二进制的数据修改）

回到顶部

FreeHttp介绍及安装

FreeHttp是一个Fiddler插件，借助FreeHttp您可按照您自己的设定任意修改http请求或响应报文（同时支持websocket改包）

 FreeHttp 安装可以直接查看 https://www.cnblogs.com/lulianqi/p/10428551.html#_label0_1 （内容比较长，您可以仅查看安装部分）

回到顶部

WebSocket改包实践

接下来将向您演示如何借助FreeHttp修改传输中的Websocket报文以满足我们假设的需求！

1：WebSocket编辑模式

进入FreeHttp Tab页后默认打开的是HTTP模式，您可以点击左下『HTTP/WS』切换至WebSocket模式（如果您没有看到『HTTP/WS』说明您使用的FreeHttp是1.3及以下版本，请通过上文提到链接升级FreeHttp即可，注意直接替换完成升级，升级也不会影响您已有的历史规则）

2：假设我们的场景

我们任意找一个使用WebSocket 的站点进行演示，通常Web系统里的即时聊天IM系统大多数直接使用WebSocket。

我们以京东的Web站为例进行演示（事实上网上是可以找到许多WebSocket在线测试站点可让大家调试使用，这里使用JD做演示完全没有恶意）

如上图我们直接进入京东首页点击右下角客服的IM聊天系统 （这个时期确保您的Fiddler是打开的）

您可以随意与京东客服说几句话（当然这个时候的客服很可能只是机器人）

假设我们要把客服给我们的回复修改掉，修改为“我东哥发话了，今天全场1折” （纯属玩笑请勿当真）

3：创建规则完成改包

如上图我们需要先在Fiddler左侧Session列表里找到刚刚我们聊天的Websocket的Session （事实上Websocket建立链接的握手协商使用的是HTTP，一旦链接建立完成就会一直使用同一条链路传输数据，所以不管这个Websocket链接后面收发了多少次数据包，大部分抓包工具都会将他们显示在同一个Session 即创建链接的那个Session 中），这个Session 通常很容易在Session列表里被找出来，因为Session列表中被标记为Websocket的项通常不会太多（注意Session列表中那些带ws图标的Session）。

在列表中双击我们刚刚找到的Session就可以打开WS消息列表，我们在这里可以找到客服刚刚回复我们的内容，这也确认我们找到了正确的Websocket Session。

注意查看回复给我们的报文结构，后面我们将以此创建我们的篡改规则。

如上图现在我们切换到FreeHttp Tab页来创建一个简单的WebSocket篡改规则完成我们刚刚的需求。

您可以直接点击FreeHttp获取图标（上图中“Click here”的位置），FreeHttp会自动为您选择的session创建一个完全匹配规则（同时也会根据您选择的session类型自动切换http/ws模式）。当然如果你熟悉FreeHttp里的Filter您可以手动创建更加符合您自己要求的匹配规则。（https://www.cnblogs.com/lulianqi/p/10428551.html#_label1 您在这里可以找到Filter的详细规则）

查看客服回复给我们的WebSocket消息我们很容易的可以看到直接修改高亮区域文本即可。

因为我们要修改的是接收数据，如上图我们切换到『Websocket Receive Moditfic』，然后直接在『Payload Modific』区域填写上图中的规则即可（我们使用最简单的文本替换，更复杂的场景我们可以使用正则替换或HEX等其他模式 ， https://www.cnblogs.com/lulianqi/p/10428551.html#_label2_0 您在这里的2.1.4可以找到其他模式的使用方法）。

规则填写完成点击右下角确认保存您刚刚创建的篡改规则。

保存完成后您可以在右侧『Response Rule』列表中看到您刚刚添加的规则，注意上图中黄色高亮区域按此设置启用您刚刚添加的规则（默认新加入的规则是不启用的）

完成规则创建后，我们再次对京东客服发送您好，可以看到Web网页上收到的回复已经按我们的规则发生了变化。（您可以在网页的开发者工具或Fiddler的session ws消息列表中同样看到变化）

注意到右下角的“咨询其他问题”的入口了吗，我们可以按刚刚的操作再添加一个规则，将这个“咨询其他问题”修改为“1折入口”（这里就不重复描述了）

我们再次发送您好可以看到右下角的快速入口也发生了改变

注意这里有一个细节，因为这里一个session需要匹配多个规则进行修改，如果您发现您的FreeHttp只能匹配其中一个，请在下方打开『Modific Tool』『http tamper setting』，并取消『is only match first tamper rule』

4：复杂的场景

虽然我们按上文的操作已经完成了我们最初的需求，不过现实场景中的需求往往不是一成不变的，FreeHttp同时提供了许多更精细的功能帮助您创建篡改规则对Websocket报文进行篡改。

同样是上面提到的例子通常Websocket里的的实时消息会有很多，并不是所有的消息都是客服回复我们的文本消息，我们没有必要对接收的所有消息都进行篡改。

如上图我们创建更加具体的Filter规则，配置仅指定payload开头的返回报文才能通过匹配，并为这条规则创建更容易辨识的别名“修改客服的回复·····”

有的时候我们需要获取发生或回复消息里的一些数据，把他们变成参数化数据供后面的规则使用，比如我们需要获取我们发送给客服的内容，我们就需要创建一个『Websocket Send Modific』规则并使用『parameter data』获取动态参数

通过分析我们发送的payload不难发现我们发送的文本消息都有固定的开头，我们可以如上图创建『Websocket Send Modific』的匹配规则

因为该规则并不用修改报文只是用来获取动态数据，我们『Payload Modific』什么都不用填写，只需要点击下方parameter图标（红色虚线框中的图标）添加如上图的parameter pick规则即可（参数名称为my content ，使用 string方式拾取，拾取范围是请求或响应实体，以},"content":"开头并以","render":"user"结尾的数据。更多parameter pick设置细节您可以查看 https://www.cnblogs.com/lulianqi/p/10428551.html#_label8_2 8.3 动态拾取参数化数据）

启用您刚刚添加的规则，并再次在IM聊天框中发送您好，我们刚刚创建的规则就会从我们发送的payload中拾取我们发送的内容，如上图我们通过『Modific Tool』『parameter data manage』打开参数管理器查看我们拾取的内容（注意这个数据是会根据每次拾取动态变化的）

接下来我们在后面的规则中直接使用我们前面拾取的数据，我们现在双击刚刚创建的Response Rule “修改客服的回复为打折消息”对其进行编辑

如上图我们在需要插入动态参数的地方右键既可以方便的找到我们刚刚拾取的“my content”参数，并将其直接应用到我们的规则中，同时您可以点击下方的闹钟图标为本次session设置延时。（更多 parameter data manage 的使用您可以查看 https://www.cnblogs.com/lulianqi/p/10428551.html#_label8 八：参数化数据设置）

注意修改完成后不要忘了点确认保存修改。

如上图，这个时候您再向客户发送“您好吧”这种消息的时候，客服的回复中就会直接使用我们刚刚拾取的参数。

回到顶部

事实上使用FreeHttp您可对APP移动应用，Web网页，小程序的Websocket 及 HTTP报文创建任意的篡改规则对报文进行修改。

FreeHttp的更多使用细节您可以查看https://www.cnblogs.com/lulianqi/p/10428551.html 使用说明

以下是使用FreeHttp完成的其他测试/调试实践

借助FreeHttp为任意移动端web网页添加vConsole调试 

微信授权登录mock（在没有真实微信账号的情况下测试大量微信账户授权登录的情况）

HTTPS中间人攻击实践（原理·实践）

使用FreeHttp强制登出微信公众号登陆状态（实现~原理）

使用浏览器访问或调试微信公众号（跳过微信认证）