随着网页相关技术的进步,网页中异步获取数据的过程,从原来流行的ajax慢慢演变到socket。这种进步主要体现在:多次频繁获取数据的场景,在这种情况下,传统的ajax需要多次创建短连接。而socket仅仅需要创建一个长连接即可。从节省服务器资源的角度来说,这个进步是非常明显的。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - charles-socket-hero
使用charles,如何监听网页socket数据交互信息?(图14-1)

在本文中,苏南大叔将要讲述的内容是:如何利用抓包软件Charles来监控网页中的socket数据。本文的测试环境是:maccharles@4.5.6。实验对象是某十数据网站的快讯功能。

Charles软件安装

Charles软件安装的细节,这里就不多说了,就提供以下两点内容:

苏南大叔:使用charles,如何监听网页socket数据交互信息? - charles-start
使用charles,如何监听网页socket数据交互信息?(图14-2)

设置识别https

对于charles新手而言,https的数据是无法解密的。左边列表中显示的:unknown。而在本次实验中,socket.io的服务器地址都是https的。这里抛出一个链接,大家可以自行对比理解查看:

第一步,这里需要先安装charles伪造的证书,并且信任相关证书。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - ssl-cert-install
使用charles,如何监听网页socket数据交互信息?(图14-3)

苏南大叔:使用charles,如何监听网页socket数据交互信息? - ssl-cert-install-trust
使用charles,如何监听网页socket数据交互信息?(图14-4)

苏南大叔:使用charles,如何监听网页socket数据交互信息? - ssl-cert-install-trust-2
使用charles,如何监听网页socket数据交互信息?(图14-5)

第二步,填入需要解密的https的地址的域名部分(注意是所有要解密的资源的域名,而不是单独这个网页的域名)。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - proxy-settings
使用charles,如何监听网页socket数据交互信息?(图14-6)

苏南大叔:使用charles,如何监听网页socket数据交互信息? - proxy-settings-item
使用charles,如何监听网页socket数据交互信息?(图14-7)

第三步,启用https拦截,还要设置proxy settings设置支持httphttpssocks,总的来说,就是能勾上的就都勾上。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - menu-proxy-settings
使用charles,如何监听网页socket数据交互信息?(图14-8)

苏南大叔:使用charles,如何监听网页socket数据交互信息? - settings-checkbox
使用charles,如何监听网页socket数据交互信息?(图14-9)

最后一步,点击勾选菜单中的macos proxy(注意,这个菜单是个勾选框..很奇怪...),开始监听。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - menu-macos-proxy
使用charles,如何监听网页socket数据交互信息?(图14-10)

某十的特别设置

在本次需求中,要识别的https地址是可变的。这个地址来源于下面的这个地址:

某十数据每隔一小段时间,就会去拉取这个js文件,这个文件会修改页面的服务器定义。然后socket链接,会不断随机选择一个服务器地址去连接。所以,大家需要尽可能的去收集这个可变的服务器地址列表,全部都添加到charleshttps地址识别列表中。这样的话,就可以更好地增加识别率。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - jin10-socket-server-addr
使用charles,如何监听网页socket数据交互信息?(图14-11)

当然,对于某十数据来说,具体的技术是socket.io,然后地址是https,对于抓包软件来说,协议是wss。而对于charles来说,没有被定义识别的地址,列表图标是个小锁,名称是unknown。被成功解锁的地址,图标是个小插头,地址是典型的带/socket.io/的地址。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - charles-unknown
使用charles,如何监听网页socket数据交互信息?(图14-12)

观察socket对话结果

在本文中,改版后的某十数据,似乎增加了cookiereferer的检测(没做具体的验证)。所以,对于这个socket,苏南大叔建议您查看下面的结果截图。

正常进行长连接沟通交流的socket,在抓包软件charles里面是下面的这个样子的。注意右侧菜单共分为两层,苏南大叔称之为一级菜单和二级菜单。那么建议您点击查看“contents=>headers”和"websocket"。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - socket-io-shoot
使用charles,如何监听网页socket数据交互信息?(图14-13)

websocket这个一级菜单,会展示一个类似对话框的效果,非常直观。但是,大多数内容都是系统协议级别的,对于我们来说,是黑盒的内容,完全不需要进行消化理解。而服务器会传回一些类似jsonp的数据格式,这些就是某十快讯的内容。

苏南大叔:使用charles,如何监听网页socket数据交互信息? - socket-chat-list
使用charles,如何监听网页socket数据交互信息?(图14-14)

相关文章

总结

在本文中,苏南大叔实现的charles对某十数据的快讯数据的监听。当然,这个仅仅是个监听而已,某十数据别着急,本篇文章就是看看你们的数据发包情况而已。更多苏南的charles经验文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   charles    socket

本站的忠实读者小伙伴,正在阅读下面这些文章: