JavaScript實現(xiàn)瀏覽器Cookie攔截與修改的操作方法
一、前端 JavaScript 層攔截(修改 document.cookie)
瀏覽器通過 document.cookie
API 讀寫 Cookie,可通過重寫其 getter
和 setter
實現(xiàn)攔截:
// 保存原始的 cookie 操作 const originalCookie = Object.getOwnPropertyDescriptor(Document.prototype, 'cookie').get; // 重寫 cookie 的 setter 和 getter Object.defineProperty(document, 'cookie', { get() { const value = originalCookie.call(document); console.log('讀取 Cookie:', value); return value; }, set(newValue) { console.log('修改 Cookie:', newValue); // 在此處攔截或修改 Cookie 值 // 例如:阻止特定 Cookie 寫入 if (newValue.includes('block_this_cookie')) { return; } originalCookie.call(document, newValue); return true; }, });
二、攔截網(wǎng)絡(luò)請求中的 Cookie(如 Set-Cookie 頭)
若需攔截 HTTP 請求/響應(yīng)中的 Cookie(如 Set-Cookie
頭),可 Hook 網(wǎng)絡(luò)請求:
1. 攔截 XMLHttpRequest 和 fetch
// 攔截 XMLHttpRequest const originalXHROpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function (method, url) { this.addEventListener('readystatechange', function () { if (this.readyState === 4) { const cookies = this.getResponseHeader('Set-Cookie'); if (cookies) { console.log('攔截到 Set-Cookie:', cookies); } } }); originalXHROpen.apply(this, arguments); }; // 攔截 fetch const originalFetch = window.fetch; window.fetch = async function (...args) { const response = await originalFetch.apply(this, args); const cookies = response.headers.get('Set-Cookie'); if (cookies) { console.log('攔截到 Set-Cookie:', cookies); } return response; };
2. 使用 Service Worker(更底層攔截)
通過 Service Worker 攔截所有網(wǎng)絡(luò)請求:
// 注冊 Service Worker navigator.serviceWorker.register('sw.js').then(() => { console.log('Service Worker 注冊成功'); }); // sw.js 文件內(nèi)容 self.addEventListener('fetch', (event) => { event.respondWith( (async () => { const response = await fetch(event.request); const cookies = response.headers.get('Set-Cookie'); if (cookies) { console.log('攔截到 Set-Cookie:', cookies); // 修改后返回新響應(yīng) const newHeaders = new Headers(response.headers); newHeaders.set('Set-Cookie', 'modified_cookie=value'); return new Response(response.body, { headers: newHeaders }); } return response; })() ); });
三、瀏覽器擴展(Chrome Extension)
通過瀏覽器擴展的 webRequest
API 修改請求頭:
// manifest.json 中聲明權(quán)限 { "permissions": ["webRequest", "webRequestBlocking", "http://*/*", "https://*/*"] } // background.js 中監(jiān)聽請求 chrome.webRequest.onHeadersReceived.addListener( (details) => { const headers = details.responseHeaders; for (const header of headers) { if (header.name.toLowerCase() === 'set-cookie') { header.value = header.value.replace('original=', 'modified='); } } return { responseHeaders: headers }; }, { urls: ["<all_urls>"] }, ["blocking", "responseHeaders"] );
四、代理工具攔截(如 Charles/Fiddler)
使用代理工具直接修改請求/響應(yīng)中的 Cookie:
- 啟動代理工具(如 Charles),設(shè)置 SSL 代理。
- 在工具中找到目標請求,修改
Cookie
請求頭或Set-Cookie
響應(yīng)頭。
注意事項
- 跨域限制:前端 Hook 受同源策略限制,無法直接訪問跨域請求的 Cookie。
- 安全性:修改 Cookie 可能導致隱私泄露或會話劫持,需遵守法律法規(guī)。
- 兼容性:
Object.defineProperty
對某些特殊 Cookie 可能失效,可改用Proxy
增強攔截。
根據(jù)具體需求選擇合適的方法。如果是用于調(diào)試或分析,推薦使用瀏覽器開發(fā)者工具的 Network 面板直接查看 Cookie 變化。
以上就是JavaScript實現(xiàn)瀏覽器Cookie攔截與修改的操作方法的詳細內(nèi)容,更多關(guān)于JavaScript瀏覽器Cookie攔截與修改的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js調(diào)試系列 斷點與動態(tài)調(diào)試[基礎(chǔ)篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎(chǔ)知識,支持亂碼兄弟為大家?guī)砹薺s斷點與動態(tài)調(diào)試方法,需要的朋友可以參考下2014-06-06