據(jù)攔截實(shí)戰(zhàn)：修改請(qǐng)求頭、請(qǐng)求體、響應(yīng)頭與響應(yīng)體的完整教程)
electron-anyproxy數(shù)據(jù)攔截實(shí)戰(zhàn)修改請(qǐng)求頭、請(qǐng)求體、響應(yīng)頭與響應(yīng)體的完整教程【免費(fèi)下載鏈接】electron-anyproxy A http/https proxy client, using to analyze and mock.項(xiàng)目地址: https://gitcode.com/gh_mirrors/el/electron-anyproxyelectron-anyproxy是一款基于 AnyProxy 構(gòu)建的 HTTP/HTTPS 代理客戶端主打數(shù)據(jù)攔截能力。無(wú)論你是前端開(kāi)發(fā)、接口調(diào)試人員還是測(cè)試工程師都可以借助它輕松完成修改請(qǐng)求頭、修改請(qǐng)求體、修改響應(yīng)頭、修改響應(yīng)體四大攔截操作還能實(shí)現(xiàn)接口 Mock 與網(wǎng)速模擬。本文從零開(kāi)始用最少的代碼帶你跑通一次完整的數(shù)據(jù)攔截實(shí)戰(zhàn)。一、electron-anyproxy 是什么為什么需要數(shù)據(jù)攔截在日常開(kāi)發(fā)中我們常遇到這些場(chǎng)景場(chǎng)景傳統(tǒng)做法用 electron-anyproxy接口還沒(méi)寫(xiě)好前端要聯(lián)調(diào)干等后端攔截請(qǐng)求直接返回本地 Mock 數(shù)據(jù)想測(cè)試異常返回讓后端改代碼攔截響應(yīng)臨時(shí)修改狀態(tài)碼和響應(yīng)體排查線上用戶-Agent 差異抓包改代碼重發(fā)攔截請(qǐng)求篡改請(qǐng)求頭發(fā)送驗(yàn)證弱網(wǎng)表現(xiàn)斷網(wǎng)模擬內(nèi)置網(wǎng)速限制模擬各種網(wǎng)段而 electron-anyproxy 的數(shù)據(jù)攔截全部通過(guò)規(guī)則文件完成規(guī)則文件就是一個(gè)普通的 JavaScript 模塊結(jié)構(gòu)簡(jiǎn)單、熱加載方便新手也能在 5 分鐘內(nèi)上手。二、快速上手三步啟動(dòng)數(shù)據(jù)攔截工具第一步安裝并啟動(dòng)先獲取項(xiàng)目代碼并安裝依賴git clone https://gitcode.com/gh_mirrors/el/electron-anyproxy npm install npm run start啟動(dòng)后默認(rèn)監(jiān)聽(tīng)8001端口主界面支持網(wǎng)絡(luò)抓包、規(guī)則配置、網(wǎng)絡(luò)模擬和數(shù)據(jù) Mock 四個(gè)功能模塊還內(nèi)置中英文界面。第二步配置系統(tǒng)代理將系統(tǒng)代理或?yàn)g覽器代理指向127.0.0.1:8001。抓取 HTTPS 流量時(shí)需要先安裝工具生成的根證書(shū)并信任它否則只能看到 HTTPS 握手而無(wú)法解密內(nèi)容。第三步準(zhǔn)備你的第一個(gè)規(guī)則文件規(guī)則文件導(dǎo)出若干鉤子函數(shù)最核心的是這兩個(gè)beforeSendRequest在請(qǐng)求發(fā)出前執(zhí)行用來(lái)改請(qǐng)求請(qǐng)求頭、請(qǐng)求體、路徑、協(xié)議beforeSendResponse在響應(yīng)返回給客戶端前執(zhí)行用來(lái)改響應(yīng)響應(yīng)頭、響應(yīng)體、狀態(tài)碼項(xiàng)目在rule_sample/目錄下提供了 8 個(gè)可直接運(yùn)行的官方示例下文實(shí)戰(zhàn)均以此為基礎(chǔ)對(duì)應(yīng)源碼可參考 lib/rule_default.js 中的默認(rèn)規(guī)則結(jié)構(gòu)與 lib/requestHandler.js 的調(diào)用時(shí)機(jī)。三、實(shí)戰(zhàn)一修改請(qǐng)求頭User-Agent 篡改參考示例rule_sample/sample_modify_request_header.js把發(fā)往 httpbin.org 的請(qǐng)求 User-Agent 改成自定義值*beforeSendRequest(requestDetail) { if (requestDetail.url.indexOf(http://httpbin.org) 0) { const newRequestOptions requestDetail.requestOptions; newRequestOptions.headers[User-Agent] AnyProxy/0.0.0; return { requestOptions: newRequestOptions }; } }驗(yàn)證方式curl http://httpbin.org/user-agent --proxy http://127.0.0.1:8001返回的 user-agent 即為篡改后的值。修改任意請(qǐng)求頭都是同樣的套路拿到requestDetail.requestOptions.headers改完原樣返回。四、實(shí)戰(zhàn)二修改請(qǐng)求體POST 數(shù)據(jù)改寫(xiě)參考示例rule_sample/sample_modify_request_data.js攔截 POST 請(qǐng)求并替換請(qǐng)求體內(nèi)容*beforeSendRequest(requestDetail) { if (requestDetail.url.indexOf(http://httpbin.org/post) 0) { return { requestData: i-am-anyproxy-modified-post-data }; } }注意返回的鍵名是requestData而不是requestOptions。請(qǐng)求體會(huì)在發(fā)出前被整體替換適合做參數(shù)注入、敏感信息脫敏等測(cè)試。五、實(shí)戰(zhàn)三修改響應(yīng)頭注入自定義標(biāo)識(shí)參考示例rule_sample/sample_modify_response_header.js在響應(yīng)頭中加入自定義字段*beforeSendResponse(requestDetail, responseDetail) { if (requestDetail.url.indexOf(http://httpbin.org/user-agent) 0) { const newResponse responseDetail.response; newResponse.header[X-Proxy-By] AnyProxy; return { response: newResponse }; } }這里用到的是第二個(gè)鉤子beforeSendResponse修改的對(duì)象是responseDetail.response。常用于注入緩存策略、調(diào)試標(biāo)識(shí)或 CORS 頭。六、實(shí)戰(zhàn)四修改響應(yīng)體內(nèi)容替換與延遲返回參考示例rule_sample/sample_modify_response_data.js在響應(yīng)體末尾追加內(nèi)容并模擬 5 秒延遲*beforeSendResponse(requestDetail, responseDetail) { if (requestDetail.url http://httpbin.org/user-agent) { const newResponse responseDetail.response; newResponse.body -- AnyProxy Hacked! --; return new Promise((resolve) { setTimeout(() resolve({ response: newResponse }), 5000); }); } }響應(yīng)體修改是接口 Mock、故障注入、A/B 文案替換的基石。鉤子函數(shù)支持返回 Promise意味著你可以在攔截時(shí)做異步操作比如讀取本地文件后替換響應(yīng)內(nèi)容。七、進(jìn)階玩法狀態(tài)碼、本地響應(yīng)與協(xié)議切換除了四大攔截rule_sample/還藏著三個(gè)高頻技巧修改狀態(tài)碼sample_modify_response_statuscode.jsnewResponse.statusCode 404一鍵模擬接口報(bào)錯(cuò)返回本地響應(yīng)sample_use_local_response.js在beforeSendRequest中直接返回response字段請(qǐng)求根本不會(huì)發(fā)出去后端沒(méi)寫(xiě)好也能聯(lián)調(diào)協(xié)議與路徑改寫(xiě)sample_modify_request_protocol.js、sample_modify_request_path.js把 HTTP 改成 HTTPS或把任意路徑重定向到指定接口非常適合灰度測(cè)試和鏈路演練。八、數(shù)據(jù)攔截原理淺析electron-anyproxy 的數(shù)據(jù)攔截發(fā)生在 lib/requestHandler.js 的請(qǐng)求處理鏈中先完整收集請(qǐng)求體組裝出requestDetail調(diào)用用戶規(guī)則的beforeSendRequest拿到遠(yuǎn)程響應(yīng)后再調(diào)用beforeSendResponse讓規(guī)則做最后加工最終把結(jié)果寫(xiě)回客戶端。整條鏈路清晰規(guī)則返回null即不干預(yù)返回對(duì)象則覆蓋對(duì)應(yīng)字段這也是「規(guī)則文件很簡(jiǎn)單」的根本原因。九、常見(jiàn)問(wèn)題與排查建議HTTPS 請(qǐng)求看不到內(nèi)容檢查是否已安裝并信任根證書(shū)必要時(shí)可在代理設(shè)置中開(kāi)啟強(qiáng)制代理 HTTPS。改了規(guī)則不生效確認(rèn)規(guī)則文件已正確加載且 URL 匹配條件寫(xiě)對(duì)可用summary()方法給規(guī)則命名便于在界面中識(shí)別。響應(yīng)數(shù)據(jù)是亂碼多數(shù)是壓縮內(nèi)容未解壓示例中的 gzip 處理可參考 lib/requestHandler.js 中的解壓邏輯。只想攔截特定域名所有示例都用了url.indexOf(...) 0做白名單匹配照抄即可。寫(xiě)在最后至此你已經(jīng)掌握了 electron-anyproxy 數(shù)據(jù)攔截的四大核心操作修改請(qǐng)求頭、修改請(qǐng)求體、修改響應(yīng)頭、修改響應(yīng)體以及狀態(tài)碼偽造、本地 Mock、協(xié)議切換等進(jìn)階玩法。把rule_sample/里的 8 個(gè)示例跑一遍再結(jié)合自己的項(xiàng)目寫(xiě)一個(gè)規(guī)則文件你就能真正把抓包與攔截變成日常開(kāi)發(fā)的得力工具?！久赓M(fèi)下載鏈接】electron-anyproxy A http/https proxy client, using to analyze and mock.項(xiàng)目地址: https://gitcode.com/gh_mirrors/el/electron-anyproxy創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 electron-anyproxy數(shù)據(jù)攔截實(shí)戰(zhàn)：修改請(qǐng)求頭、請(qǐng)求體、響應(yīng)頭與響應(yīng)體的完整教程
electron-anyproxy數(shù)據(jù)攔截實(shí)戰(zhàn)修改請(qǐng)求頭、請(qǐng)求體、響應(yīng)頭與響應(yīng)體的完整教程【免費(fèi)下載鏈接】electron-anyproxy A http/https proxy client, using to analyze and mock.項(xiàng)目地址: https://gitcode.com/gh_mirrors/el/electron-anyproxyelectron-anyproxy是一款基于 AnyProxy 構(gòu)建的 HTTP/HTTPS 代理客戶端主打數(shù)據(jù)攔截能力。無(wú)論你是前端開(kāi)發(fā)、接口調(diào)試人員還是測(cè)試工程師都可以借助它輕松完成修改請(qǐng)求頭、修改請(qǐng)求體、修改響應(yīng)頭、修改響應(yīng)體四大攔截操作還能實(shí)現(xiàn)接口 Mock 與網(wǎng)速模擬。本文從零開(kāi)始用最少的代碼帶你跑通一次完整的數(shù)據(jù)攔截實(shí)戰(zhàn)。一、electron-anyproxy 是什么為什么需要數(shù)據(jù)攔截在日常開(kāi)發(fā)中我們常遇到這些場(chǎng)景場(chǎng)景傳統(tǒng)做法用 electron-anyproxy接口還沒(méi)寫(xiě)好前端要聯(lián)調(diào)干等后端攔截請(qǐng)求直接返回本地 Mock 數(shù)據(jù)想測(cè)試異常返回讓后端改代碼攔截響應(yīng)臨時(shí)修改狀態(tài)碼和響應(yīng)體排查線上用戶-Agent 差異抓包改代碼重發(fā)攔截請(qǐng)求篡改請(qǐng)求頭發(fā)送驗(yàn)證弱網(wǎng)表現(xiàn)斷網(wǎng)模擬內(nèi)置網(wǎng)速限制模擬各種網(wǎng)段而 electron-anyproxy 的數(shù)據(jù)攔截全部通過(guò)規(guī)則文件完成規(guī)則文件就是一個(gè)普通的 JavaScript 模塊結(jié)構(gòu)簡(jiǎn)單、熱加載方便新手也能在 5 分鐘內(nèi)上手。二、快速上手三步啟動(dòng)數(shù)據(jù)攔截工具第一步安裝并啟動(dòng)先獲取項(xiàng)目代碼并安裝依賴git clone https://gitcode.com/gh_mirrors/el/electron-anyproxy npm install npm run start啟動(dòng)后默認(rèn)監(jiān)聽(tīng)8001端口主界面支持網(wǎng)絡(luò)抓包、規(guī)則配置、網(wǎng)絡(luò)模擬和數(shù)據(jù) Mock 四個(gè)功能模塊還內(nèi)置中英文界面。第二步配置系統(tǒng)代理將系統(tǒng)代理或?yàn)g覽器代理指向127.0.0.1:8001。抓取 HTTPS 流量時(shí)需要先安裝工具生成的根證書(shū)并信任它否則只能看到 HTTPS 握手而無(wú)法解密內(nèi)容。第三步準(zhǔn)備你的第一個(gè)規(guī)則文件規(guī)則文件導(dǎo)出若干鉤子函數(shù)最核心的是這兩個(gè)beforeSendRequest在請(qǐng)求發(fā)出前執(zhí)行用來(lái)改請(qǐng)求請(qǐng)求頭、請(qǐng)求體、路徑、協(xié)議beforeSendResponse在響應(yīng)返回給客戶端前執(zhí)行用來(lái)改響應(yīng)響應(yīng)頭、響應(yīng)體、狀態(tài)碼項(xiàng)目在rule_sample/目錄下提供了 8 個(gè)可直接運(yùn)行的官方示例下文實(shí)戰(zhàn)均以此為基礎(chǔ)對(duì)應(yīng)源碼可參考 lib/rule_default.js 中的默認(rèn)規(guī)則結(jié)構(gòu)與 lib/requestHandler.js 的調(diào)用時(shí)機(jī)。三、實(shí)戰(zhàn)一修改請(qǐng)求頭User-Agent 篡改參考示例rule_sample/sample_modify_request_header.js把發(fā)往 httpbin.org 的請(qǐng)求 User-Agent 改成自定義值*beforeSendRequest(requestDetail) { if (requestDetail.url.indexOf(http://httpbin.org) 0) { const newRequestOptions requestDetail.requestOptions; newRequestOptions.headers[User-Agent] AnyProxy/0.0.0; return { requestOptions: newRequestOptions }; } }驗(yàn)證方式curl http://httpbin.org/user-agent --proxy http://127.0.0.1:8001返回的 user-agent 即為篡改后的值。修改任意請(qǐng)求頭都是同樣的套路拿到requestDetail.requestOptions.headers改完原樣返回。四、實(shí)戰(zhàn)二修改請(qǐng)求體POST 數(shù)據(jù)改寫(xiě)參考示例rule_sample/sample_modify_request_data.js攔截 POST 請(qǐng)求并替換請(qǐng)求體內(nèi)容*beforeSendRequest(requestDetail) { if (requestDetail.url.indexOf(http://httpbin.org/post) 0) { return { requestData: i-am-anyproxy-modified-post-data }; } }注意返回的鍵名是requestData而不是requestOptions。請(qǐng)求體會(huì)在發(fā)出前被整體替換適合做參數(shù)注入、敏感信息脫敏等測(cè)試。五、實(shí)戰(zhàn)三修改響應(yīng)頭注入自定義標(biāo)識(shí)參考示例rule_sample/sample_modify_response_header.js在響應(yīng)頭中加入自定義字段*beforeSendResponse(requestDetail, responseDetail) { if (requestDetail.url.indexOf(http://httpbin.org/user-agent) 0) { const newResponse responseDetail.response; newResponse.header[X-Proxy-By] AnyProxy; return { response: newResponse }; } }這里用到的是第二個(gè)鉤子beforeSendResponse修改的對(duì)象是responseDetail.response。常用于注入緩存策略、調(diào)試標(biāo)識(shí)或 CORS 頭。六、實(shí)戰(zhàn)四修改響應(yīng)體內(nèi)容替換與延遲返回參考示例rule_sample/sample_modify_response_data.js在響應(yīng)體末尾追加內(nèi)容并模擬 5 秒延遲*beforeSendResponse(requestDetail, responseDetail) { if (requestDetail.url http://httpbin.org/user-agent) { const newResponse responseDetail.response; newResponse.body -- AnyProxy Hacked! --; return new Promise((resolve) { setTimeout(() resolve({ response: newResponse }), 5000); }); } }響應(yīng)體修改是接口 Mock、故障注入、A/B 文案替換的基石。鉤子函數(shù)支持返回 Promise意味著你可以在攔截時(shí)做異步操作比如讀取本地文件后替換響應(yīng)內(nèi)容。七、進(jìn)階玩法狀態(tài)碼、本地響應(yīng)與協(xié)議切換除了四大攔截rule_sample/還藏著三個(gè)高頻技巧修改狀態(tài)碼sample_modify_response_statuscode.jsnewResponse.statusCode 404一鍵模擬接口報(bào)錯(cuò)返回本地響應(yīng)sample_use_local_response.js在beforeSendRequest中直接返回response字段請(qǐng)求根本不會(huì)發(fā)出去后端沒(méi)寫(xiě)好也能聯(lián)調(diào)協(xié)議與路徑改寫(xiě)sample_modify_request_protocol.js、sample_modify_request_path.js把 HTTP 改成 HTTPS或把任意路徑重定向到指定接口非常適合灰度測(cè)試和鏈路演練。八、數(shù)據(jù)攔截原理淺析electron-anyproxy 的數(shù)據(jù)攔截發(fā)生在 lib/requestHandler.js 的請(qǐng)求處理鏈中先完整收集請(qǐng)求體組裝出requestDetail調(diào)用用戶規(guī)則的beforeSendRequest拿到遠(yuǎn)程響應(yīng)后再調(diào)用beforeSendResponse讓規(guī)則做最后加工最終把結(jié)果寫(xiě)回客戶端。整條鏈路清晰規(guī)則返回null即不干預(yù)返回對(duì)象則覆蓋對(duì)應(yīng)字段這也是「規(guī)則文件很簡(jiǎn)單」的根本原因。九、常見(jiàn)問(wèn)題與排查建議HTTPS 請(qǐng)求看不到內(nèi)容檢查是否已安裝并信任根證書(shū)必要時(shí)可在代理設(shè)置中開(kāi)啟強(qiáng)制代理 HTTPS。改了規(guī)則不生效確認(rèn)規(guī)則文件已正確加載且 URL 匹配條件寫(xiě)對(duì)可用summary()方法給規(guī)則命名便于在界面中識(shí)別。響應(yīng)數(shù)據(jù)是亂碼多數(shù)是壓縮內(nèi)容未解壓示例中的 gzip 處理可參考 lib/requestHandler.js 中的解壓邏輯。只想攔截特定域名所有示例都用了url.indexOf(...) 0做白名單匹配照抄即可。寫(xiě)在最后至此你已經(jīng)掌握了 electron-anyproxy 數(shù)據(jù)攔截的四大核心操作修改請(qǐng)求頭、修改請(qǐng)求體、修改響應(yīng)頭、修改響應(yīng)體以及狀態(tài)碼偽造、本地 Mock、協(xié)議切換等進(jìn)階玩法。把rule_sample/里的 8 個(gè)示例跑一遍再結(jié)合自己的項(xiàng)目寫(xiě)一個(gè)規(guī)則文件你就能真正把抓包與攔截變成日常開(kāi)發(fā)的得力工具?！久赓M(fèi)下載鏈接】electron-anyproxy A http/https proxy client, using to analyze and mock.項(xiàng)目地址: https://gitcode.com/gh_mirrors/el/electron-anyproxy創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考