首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Chrome DevTools协议-拦截和修改websocket请求

使用 Chrome DevTools Protocol (CDP) 拦截和修改 WebSocket 请求是一个高级操作,通常用于测试、监控或调试网络通信。CDP 提供了一系列的 API,可以让你在 Chrome 浏览器中以编程方式控制 DevTools 的各种功能。以下是如何使用 CDP 来拦截和可能修改 WebSocket 请求的步骤:

1. 设置环境

首先,确保你有一个可以控制的 Chrome 实例。你可以使用 Puppeteer(一个 Node 库,它提供了高级 API 来控制 Chrome 或 Chromium),因为它内置了对 CDP 的支持。

安装 Puppeteer:

代码语言:javascript
复制
npm install puppeteer

2. 启动并连接到浏览器

使用 Puppeteer 启动 Chrome 并建立连接:

代码语言:javascript
复制
const puppeteer = require('puppeteer');

async function start() {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    // 这里继续添加代码
}

start();

3. 启用必要的域

在 CDP 中,你需要显式启用你想使用的各个域(例如 Network, Page):

代码语言:javascript
复制
const client = await page.target().createCDPSession();
await client.send('Network.enable');

4. 设置 WebSocket 拦截

使用 CDP 的 Network 域来监听 WebSocket 消息:

代码语言:javascript
复制
await client.send('Network.enable');

client.on('Network.webSocketFrameSent', ({ requestId, timestamp, response }) => {
    console.log('WebSocket Frame Sent:', requestId, timestamp, response);
});

client.on('Network.webSocketFrameReceived', ({ requestId, timestamp, response }) => {
    console.log('WebSocket Frame Received:', requestId, timestamp, response);
});

client.on('Network.webSocketCreated', ({ requestId, url }) => {
    console.log('WebSocket Created:', requestId, url);
});

client.on('Network.webSocketClosed', ({ requestId, timestamp }) => {
    console.log('WebSocket Closed:', requestId, timestamp);
});

5. 修改 WebSocket 请求

目前,CDP 不直接支持修改 WebSocket 请求或响应的内容。你可以监听这些事件并记录数据,但不能直接修改传输的数据。如果需要修改 WebSocket 数据,你可能需要使用其他代理工具,如 mitmproxy 或自定义代理服务器,来拦截和修改 WebSocket 通信。

6. 访问具有 WebSocket 的页面

加载一个使用 WebSocket 的页面来测试你的设置:

代码语言:javascript
复制
await page.goto('https://example.com/your-websocket-page');

7. 清理

完成测试后,关闭浏览器:

代码语言:javascript
复制
await browser.close();
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【SRC】记录一次从小程序静态分析+动态调试获取到严重漏洞的过程

开启Devtools强制开启Devtools我用的是https://github.com/JaveleyQAQ/WeChatOpenDevTools-Python这个项目。...burp的监听端口,协议选择https然后新建代理规则。...应用程序选择WeChatApp.exe;WechatBrowser.exe;WeChatAppEx.exe动作选择拦截即可实现小程序的抓包自动计算签名前面的准备工作已经基本完成,可以实现对小程序的分析了...协议进行的聊天,抓到的数据包如下:GET /websocket?...http协议切换到websocket协议,而这个数据包中的appId和token是由客户端直接发送给服务器的,所以这两个值要么是js计算出来的,要么是服务器返回的数据,先搜一下前端的js代码,发现appid

10100

Node.js 调试一路走来经历了什么

可以看到启动了一个 WebSocket 的服务端,这就是调试服务,用某个调试工具客户端连上就行了: 调试客户端可以是 Chrome Devtools 也可以是 VSCode。...启动一个 WebSocket 客户端来实现调试的 UI,包括调用栈、上下文的显示、打断点、单步运行等功能,比如我们用过的 Chrome Devtools、VSCode Debugger。...但是 Chrome Devtools 的调试协议是 Chrome Devtools Protocol,和 V8 Debug Protocol 还是有些差距的,怎么能用上 Chrome Devtools...Node.js 在把调试工具的协议换成兼容 Chrome Devtools Protocol 的协议之后,只要实现个 DAP 的 adapter 就可以对接到 VSCode 的调试工具了。...这样还是太麻烦了,所以后来 Node.js 和 v8 团队合作实现了 v8-inspector,可以让 Node.js 提供的调试协议是直接兼容 Chrome Devtools Protocol 的。

63630
  • 如何使用MITM_Intercept拦截和修改非HTTP协议的数据

    关于MITM_Intercept  MITM_Intercept是一款功能强大的数据包编辑工具,MITM_Intercept可以通过Burp或其他具备SSL和TLS拦截功能的工具来拦截和修改非HTTP...从目标接收到的每个数据都将打包到HTTP POST请求的Body中,其中的URL将包含“SERVER_RESPONSE”。随后,这些请求都将被发送到本地HTTP拦截服务器。...修改数据包的另一种方法就是使用一个Python脚本,HTTP拦截服务器在接收消息时将运行该脚本。 发送到HTTP拦截服务器的消息Body将打印到shell。如果给出修改脚本,修改后将打印消息。...修改脚本  我们可以通过-s选项来染HTTP拦截服务器运行一个Python脚本,但服务器接收到HTTP请求的时候便会运行这个脚本,脚本运行完成后HTTP拦截服务器便会回传响应信息。...配置代理时(如Burp),请求的修改将在脚本运行之前进行,响应的修改将在脚本运行之后进行。

    1K20

    前端人的爬虫工具【Puppeteer】

    它提供了高级API来通过 DevTools 协议控制无头 Chrome 或 Chromium ,它也可以配置为使用完整(非无头)Chrome 或 Chromium。...Puppeteer 提供了一系列 API,通过 Chrome DevTools Protocol 协议控制 Chromium/Chrome 浏览器的行为。...请求在有些场景下很有必要,拦截一下没必要的请求提高性能,我们可以在监听 Page 的 request 事件,并进行请求拦截,前提是要开启请求拦截 page.setRequestInterception...目前没有提供原生的用于处理 WebSocket 的 API 接口,但是我们可以通过更底层的 Chrome DevTool Protocol (CDP) 协议获得 const puppeteer = require...,禁止使用 /dev/shm 共享内存 尽量使用同一个浏览器实例,这样可以实现缓存共用 通过请求拦截没必要加载的资源 像我们自己打开 Chrome 一样,tab 页多必然会卡,所以必须有效控制 tab

    3.5K20

    聊一聊如何基于Chrome Devtools 进行远程调试

    devtools 本身是开源的前端项目,很容易构建并集成,并与 Chrome DevTools Protocol (简称 CDP) 协议进行对接。...简单来说,实现远程调试需要具备三个条件: 通过原生 Javascript 实现 CDP 的协议规范,构建出 sdk.js (文件名称任意),并在被调试页面中加载该 js 构建出 Chrome Devtools...前端产物,并部署为 web 页面 实现 websocket 协议转发 Chrome Devtools 与目标页面之间的协议交互是用 websocket 来通信的。...通过实现一个 websocket 转发的中间服务层,其作用是将 devtools 的协议消息转发给目标页面处理,或将目标页面的协议消息转发给 devtools 处理。...(Fetch、XHR) HTML、JS、CSS 静态资源请求抓包 6、Application Local Storage Session Storage Cookies 7、Screenshot(扩展协议

    1.6K30

    玩转 Chrome DevTools,定制自己的调试工具

    Chrome DevTools 是我们每天都用的工具,它可以查看元素、网络请求、断点调试 JS、分析性能问题等,是辅助开发的利器。 今天不讲怎么使用它,而是讲一个好玩的方向:定制自己的调试工具。...之前讲过,Chrome DevTools 和 Chrome 是分离的架构,两者之间通过 WebSocket 通信,通信协议是 Chrome DevTools Protocol,简称 CDP: 其实这不准确...那我们对接一下这个协议,返回相应格式的数据,能在 Chrome DevTools 里做显示么? 我们试一下。...比如 WebSocket 时的通信实现是这样的: 而 electron 环境下是这样的: 嵌入到一个环境的时候是这样的: 这也是为什么文章最开始我说 Chrome DevTools 和 Chrome...当然可以,不过这样就没必要用 CDP 了,自己创建一套协议不香么? 其实 Vue DevTools 和 React DevTools 就是自己定制的一套协议。

    3.9K30

    Go每日一库之97:chromedp

    chromedp是一个更快、更简单的Golang库用于调用支持Chrome DevTools协议的浏览器,同时不需要额外的依赖(例如Selenium和PhantomJS) Chrome和Golang都与...Google有着相当密切的关系,而Chrome DevTools其实就是Chrome浏览器按下F12之后的控制终端 简单来说,chromedp可用来渲染网页,进行web测试或者网页内容抓取。...Chrome DevTools Protocol (CDP) Chrome DevTools Protocol (CDP) 的主页在:https://chromedevtools.github.io/devtools-protocol...Chrome 的开发者工具就是使用这一系列的接口,并且 Chrome 开发者工具来维护这些接口。 所谓 CDP 的协议,本质上是什么呢?本质上是基于 websocket 的一种协议。...所以我们如果写了一个客户端程序,也和目标页面创建一个基于 CDP 的 websocket连接,我们也可以通过这个协议来对页面进行操作。

    2.2K40

    基于 Chrome Devtools 的远程调试实现

    devtools 本身是开源的前端项目,很容易构建并集成,并与 Chrome DevTools Protocol (简称 CDP) 协议进行对接。...简单来说,实现远程调试需要具备三个条件: 通过原生 Javascript 实现 CDP 的协议规范,构建出 sdk.js (文件名称任意),并在被调试页面中加载该 js 构建出 Chrome Devtools...前端产物,并部署为 web 页面 实现 websocket 协议转发 Chrome Devtools 与目标页面之间的协议交互是用 websocket 来通信的。...通过实现一个 websocket 转发的中间服务层,其作用是将 devtools 的协议消息转发给目标页面处理,或将目标页面的协议消息转发给 devtools 处理。...(Fetch、XHR) HTML、JS、CSS 静态资源请求抓包 6、Application Local Storage Session Storage Cookies 7、Screenshot(扩展协议

    1K30

    调试工具的通用原理:调试四要素

    有同学说,我用 Chrome DevTools 调试网页,可以查看元素,网络请求,断点运行 JS,用 Performance 工具分析性能等,这是网页的调试。...我们分别来看一下: Chrome DevTools 原理 Chrome DevTools 分为两部分,backend 和 frontend: backend 和 Chrome 集成,负责把 Chrome...frontend 是独立的,负责对接调试协议,做 UI 的展示和交互。 两者之间的调试协议叫做 Chrome DevTools Protocol,简称 CDP。...没错,都有 backend 部分负责拿到运行时的信息,有 frontend 部分负责渲染和交互,也有调试协议用来规定不同数据的格式,还有不同的信道,比如 WebSocket 、Chrome 插件的 background...调试就是通过某种信道(比如 WebSocket)把运行时信息传递给开发工具,做 UI 的展示和交互,辅助开发者排查问题、了解代码运行状态等。

    2.4K20

    干货 | Electron在DevTools中的探索与实践

    相信大家应该都用过chrome开发者工具,其实它本质上就是一个web app,通过Chromium提供的远程调试协议,开发者工具就可以和chromium基于WebSocket进行通信,如上图左边所示。...调试功能也是基于这个协议实现的,但是如果让调试界面直接和Chromium连接会有两个问题,首先是我们没办法完全控制调试过程,不能主动向Chromium发送指令;其次是,Chromium提供的WebSocket...为了解决这两个问题,我们在调试界面和Chromium之间做了一层拦截,如上图右边所示,首先起了一个WebSocketserver,让它充当Chromium跟调试界面连接;然后通过接口获取到真实的WebSocket...通过这种方式,就可以拦截掉所有调试界面和Chromium之间的WebSocket通信,之后做一个转发就可以了。 3.2 生产态调试 生产态调试功能是为了帮助开发人员更方便地调试线上代码。...代理功能的实现是在background进程中,我们基于Node.js搭建了代理服务器,并将拦截到的请求数据存储在nedb数据库中,因为请求量可能比较大,并且需要根据请求状态的变化对数据进行更新。

    2.7K32

    cdp 远程调试方案

    chrome 调试协议,是基于 scoket(websocket、usb、adb )消息的 json rpc 协议。...Chromium、V8 或 Node.js Protocol:cdp 调试协议,调试器前端和后端使用此协议通信。它分为代表被检查实体的语义方面的域。...每个域定义类型、命令(从前端发送到后端的消息)和事件(从后端发送到前端的消息)。该协议基于 json rpc 2.0 运行; Channels:消息通道,后端和前端之间发送协议消息的一种方式。...) 发送的 cdp 命令,并将 dom、network、资源信息返回给远程调试端 cdp协议结构 cdp 协议按域「Domain」划分能力,每个域下有 Method、Event 和 Types。...分别提供 websocket 服务做消息转发和 chrome 插件在 backend 端来监听执行发送 cdp 消息。

    2.8K20

    前端性能分析工具利器

    认识 Chrome DevTools 协议 Chrome DevTools 协议基于 WebSocket,利用 WebSocket 建立连接 DevTools 和浏览器内核的快速数据通道。...我们使用 DevTools 的时候,浏览器内核 Chromium 本身会作为一个服务端,我们看到的浏览器调试工具界面,通过 Websocket 和 Chromium 进行通信。...资源加载后,DevTools 会建立与浏览器的 Websocket 连接,并开始交换 JSON 消息。...Chrome DevTools 协议域划分 Chrome DevTools 协议具有与浏览器的许多不同部分(例如页面、Service Worker 和扩展程序)进行交互的 API。...自动化性能分析 通过使用 Chrome DevTools 协议,我们可以获取 DevTools 提供的很多数据,包括网络数据、性能数据、运行时数据。

    3K62

    Chrome DevTools 远程调试安卓网页的原理

    Chrome DevTools 的原理 Chrome DevTools 被设计成了和 Chrome 分离的架构,两者之间通过 WebSocket 通信,设计了专门的通信协议:Chrome DevTools...这样只要实现对接 CDP 协议的 ws 服务端,就可以用 Chrome DevTools 来调试,所以 Chrome DevTools 可以用来调试浏览器的网页、调试 Node.js,调试 Electron...这个 CDP 的调试协议是 json 格式的,如果想看它传输了什么也是可以的: 下载金丝雀版本的 chrome: 在 Chrome DevTools 的 more tools 里打开 Protocol...总结 Chrome DevTools 和 Chrome 是分离的架构,两者通过 WebSocket 通信,通信协议是 Chrome DevTools Protocol,可以在金丝雀版本的 Protocol...要注意的是调试的目标浏览器要和用的 Chrome DevTools 版本一一对应才行,所以第一次调试会先下载 Chrome DevTools,这需要访问 google 的域名,如果没有科学上网,会有白屏和

    2.1K10

    基于Chorme headless的xss检测实践

    我认为核心的理解在于: 1、 就是具有基于Chrome DevTools Protocol 的chrome远程调试功能的无界面浏览器。...2、 现在的python和nodejs对chrome headless进行操作的封包都是基于Chrome DevTools Protocol来实现的。...与chrome通信的基本知识: 简单说一下这套协议吧,这套协议通过 websocket 进行通信,发送和返回的内容都是 json 格式。.../ 05 — 总结及思考 1、 其实使用websocket和chrome进行通信整个过程是异步的,使用异步的方法可以解决粗暴的通过超时来控制循环监听的问题,同时也能提高扫描效率。...可以尝试用其他方法实现post请求,如在Network.requestWillBeSent时修改请求参数。 3、 由于企业内部对qps有限制,我们扫描的payload数量会被限制的很少。

    1.5K40
    领券