如何通过JavaScript动态记录Cookie创建？能否通过重写原型实现？

完全可以通过重写document.cookie的setter访问器来实现这个需求，不用遍历所有Cookie就能精准捕获每次设置Cookie的操作。

实现思路 #

document.cookie不是普通属性，而是带有getter和setter的访问器属性。我们只需保存原始的setter方法，再自定义一个新的setter：在这个新setter里先解析传入的Cookie字符串，提取名称和值并输出到控制台，最后调用原始setter完成Cookie的实际创建。

具体代码实现 #

// 保存原始的cookie setter方法
const originalCookieSetter = Object.getOwnPropertyDescriptor(document, 'cookie').set;

// 重新定义document.cookie的setter
Object.defineProperty(document, 'cookie', {
  set: function(cookieString) {
    // 解析Cookie的名称和值：分割分号取第一部分键值对
    const [nameValuePair] = cookieString.split(';').map(item => item.trim());
    const [name, value] = nameValuePair.split('=', 2);
    
    // 输出记录信息到控制台
    console.log(`创建Cookie: 名称=${name}, 值=${value}`);
    
    // 调用原始setter完成实际的Cookie设置
    originalCookieSetter.call(this, cookieString);
  },
  // 保留原始的getter方法，不破坏读取逻辑
  get: Object.getOwnPropertyDescriptor(document, 'cookie').get,
  configurable: true,
  enumerable: true
});

测试验证 #

当执行document.cookie = "test=myvalue;domain=test";时，控制台会直接输出：

创建Cookie: 名称=test, 值=myvalue

同时浏览器会正常创建对应的Cookie，不会影响原有功能。

注意事项 #

• 解析逻辑会自动忽略Cookie字符串中附带的domain、path、expires等参数，只提取核心的名称和值。
• 必须保留原始的getter和setter，避免破坏document.cookie原本的读取和设置逻辑。
• 该方法仅能捕获通过document.cookie = ...方式创建的Cookie，无法拦截通过HTTP响应头设置的Cookie（这属于浏览器接收响应时的底层操作，JS无法直接干预）。

内容的提问来源于stack exchange，提问作者TheImporter