JavaScript实现浏览器Cookie拦截与修改的操作方法
作者：星哲最开心
在浏览器中拦截和修改 Cookie 的设置或修改位置,通常可以通过以下方法实现,具体场景取决于你是想在前端 JavaScript 中操作,还是在底层网络请求中拦截,本文小编给大家介绍了浏览器Cookie拦截与修改方法,需要的朋友可以参考下
一、前端 JavaScript 层拦截（修改 document.cookie）
浏览器通过 document.cookie API 读写 Cookie，可通过重写其 getter 和 setter 实现拦截：
// 保存原始的 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;
},
});
二、拦截网络请求中的 Cookie（如 Set-Cookie 头）
若需拦截 HTTP 请求/响应中的 Cookie（如 Set-Cookie 头），可 Hook 网络请求：
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 拦截所有网络请求：
// 注册 Service Worker
navigator.serviceWorker.register('sw.js').then(() => {
console.log('Service Worker 注册成功');
});
// sw.js 文件内容
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 中监听请求
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 可能导致隐私泄露或会话劫持，需遵守法律法规。
- 兼容性：
Object.defineProperty对某些特殊 Cookie 可能失效，可改用Proxy增强拦截。
根据具体需求选择合适的方法。如果是用于调试或分析，推荐使用浏览器开发者工具的 Network 面板直接查看 Cookie 变化。
以上就是JavaScript实现浏览器Cookie拦截与修改的操作方法的详细内容，更多关于JavaScript浏览器Cookie拦截与修改的资料请关注脚本之家其它相关文章！