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)絡請求中的 Cookie(如 Set-Cookie 頭)
若需攔截 HTTP 請求/響應中的 Cookie(如 Set-Cookie 頭),可 Hook 網(wǎng)絡請求:
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)絡請求:
// 注冊 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);
// 修改后返回新響應
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 中聲明權限
{
"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)
使用代理工具直接修改請求/響應中的 Cookie:
- 啟動代理工具(如 Charles),設置 SSL 代理。
- 在工具中找到目標請求,修改
Cookie請求頭或Set-Cookie響應頭。
注意事項
- 跨域限制:前端 Hook 受同源策略限制,無法直接訪問跨域請求的 Cookie。
- 安全性:修改 Cookie 可能導致隱私泄露或會話劫持,需遵守法律法規(guī)。
- 兼容性:
Object.defineProperty對某些特殊 Cookie 可能失效,可改用Proxy增強攔截。
根據(jù)具體需求選擇合適的方法。如果是用于調(diào)試或分析,推薦使用瀏覽器開發(fā)者工具的 Network 面板直接查看 Cookie 變化。
以上就是JavaScript實現(xiàn)瀏覽器Cookie攔截與修改的操作方法的詳細內(nèi)容,更多關于JavaScript瀏覽器Cookie攔截與修改的資料請關注腳本之家其它相關文章!
相關文章
js調(diào)試系列 斷點與動態(tài)調(diào)試[基礎篇]
上幾篇文章已經(jīng)為大家介紹了js調(diào)試系列的一些基礎知識,支持亂碼兄弟為大家?guī)砹薺s斷點與動態(tài)調(diào)試方法,需要的朋友可以參考下2014-06-06

