Chrome DevTools Protocol能否拦截并修改WebSocket请求头?
修改WebSocket请求头的CDP可行方案
这确实是CDP目前的一个小局限——WebSocket握手请求的拦截和修改逻辑和常规HTTP请求不一样,官方暂时没有通过Network.requestIntercepted直接修改WebSocket请求头的支持。
原因说明
WebSocket的握手本质是HTTP升级请求,但CDP把它单独归类到WebSocket相关的事件体系里:
- 即使在
Network.setRequestInterception中指定resourceType: 'WebSocket',也不会触发Network.requestIntercepted事件; Network.webSocketWillSendHandshakeRequest事件仅能读取请求头信息,没有对应的修改接口来调整请求头。
可行实现方案
方案一:借助Chrome扩展的webRequest API(推荐,若允许加载扩展)
你可以开发一个极简的Chrome扩展,利用webRequest.onBeforeSendHeaders事件拦截WebSocket握手请求并修改头信息:
- 在扩展的
manifest.json中声明必要权限:{ "manifest_version": 3, "name": "WebSocket Header Modifier", "version": "1.0", "permissions": ["webRequest", "webRequestBlocking"], "host_permissions": ["<all_urls>"], "background": { "service_worker": "background.js" } } - 在
background.js中编写拦截逻辑:chrome.webRequest.onBeforeSendHeaders.addListener( (details) => { // 筛选出WebSocket升级请求 const isWebSocket = details.requestHeaders.some( h => h.name.toLowerCase() === 'upgrade' && h.value.toLowerCase() === 'websocket' ); if (isWebSocket) { // 添加或修改自定义请求头 details.requestHeaders = details.requestHeaders.filter(h => h.name.toLowerCase() !== 'x-custom-header'); details.requestHeaders.push({name: 'X-Custom-Header', value: 'MyCustomValue'}); return {requestHeaders: details.requestHeaders}; } }, {urls: ['<all_urls>']}, ['blocking', 'requestHeaders'] ); - 如果是通过CDP控制浏览器,可使用
Browser.installExtensionAPI加载这个临时扩展,即可在CDP会话中生效。
方案二:使用外部代理服务器
如果无法加载扩展,可以通过代理服务器拦截并修改WebSocket握手请求头:
- 通过CDP的
Network.setProxyAPI或浏览器启动参数--proxy-server,将所有请求导向你的代理服务; - 在代理层识别WebSocket升级请求,修改对应的请求头后再转发到目标服务器。
这种方案通用性强,但需要自行维护代理服务。
补充说明
目前CDP官方尚未提供修改WebSocket握手请求头的原生API,上述两种是当前最可行的替代方案。若你对纯CDP方案有强需求,可以关注Chrome DevTools Protocol的更新动态,未来可能会新增相关支持。
内容的提问来源于stack exchange,提问作者Master_T




