JavaScript實(shí)現(xiàn)瀏覽器Cookie攔截與修改的操作方法
一、前端 JavaScript 層攔截(修改 document.cookie)
瀏覽器通過 document.cookie API 讀寫 Cookie,可通過重寫其 getter 和 setter 實(shí)現(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ò)請(qǐng)求中的 Cookie(如 Set-Cookie 頭)
若需攔截 HTTP 請(qǐng)求/響應(yīng)中的 Cookie(如 Set-Cookie 頭),可 Hook 網(wǎng)絡(luò)請(qǐ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)絡(luò)請(qǐng)求:
// 注冊(cè) Service Worker
navigator.serviceWorker.register('sw.js').then(() => {
console.log('Service Worker 注冊(cè)成功');
});
// 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;
})()
);
});
三、瀏覽器擴(kuò)展(Chrome Extension)
通過瀏覽器擴(kuò)展的 webRequest API 修改請(qǐng)求頭:
// manifest.json 中聲明權(quán)限
{
"permissions": ["webRequest", "webRequestBlocking", "http://*/*", "https://*/*"]
}
// background.js 中監(jiān)聽請(qǐng)求
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)
使用代理工具直接修改請(qǐng)求/響應(yīng)中的 Cookie:
- 啟動(dòng)代理工具(如 Charles),設(shè)置 SSL 代理。
- 在工具中找到目標(biāo)請(qǐng)求,修改
Cookie請(qǐng)求頭或Set-Cookie響應(yīng)頭。
注意事項(xiàng)
- 跨域限制:前端 Hook 受同源策略限制,無法直接訪問跨域請(qǐng)求的 Cookie。
- 安全性:修改 Cookie 可能導(dǎo)致隱私泄露或會(huì)話劫持,需遵守法律法規(guī)。
- 兼容性:
Object.defineProperty對(duì)某些特殊 Cookie 可能失效,可改用Proxy增強(qiáng)攔截。
根據(jù)具體需求選擇合適的方法。如果是用于調(diào)試或分析,推薦使用瀏覽器開發(fā)者工具的 Network 面板直接查看 Cookie 變化。
以上就是JavaScript實(shí)現(xiàn)瀏覽器Cookie攔截與修改的操作方法的詳細(xì)內(nèi)容,更多關(guān)于JavaScript瀏覽器Cookie攔截與修改的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用JavaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)
下面小編就為大家?guī)硪黄褂肑avaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Grid得到選擇行數(shù)據(jù)的方法總結(jié)
Grid得到選擇行數(shù)據(jù)的方法總結(jié),需要的朋友可以參考下。2011-01-01
setinterval()與clearInterval()JS函數(shù)的調(diào)用方法
這篇文章主要介紹了setinterval()與clearInterval()JS函數(shù)的調(diào)用方法,實(shí)例分析了setinterval()與clearInterval()的語法結(jié)構(gòu)及使用技巧,需要的朋友可以參考下2015-01-01
json對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨son對(duì)象轉(zhuǎn)為字符串,當(dāng)做參數(shù)傳遞時(shí)加密解密的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實(shí)例
這篇文章主要介紹了微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript實(shí)現(xiàn)大文件上傳的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)大文件上傳功能的示例代碼,文中的代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript有一定幫助,感興趣可以跟隨小編一起學(xué)習(xí)一下2022-11-11

