React前端CWE-113 Cookie操作漏洞修复疑问：已用encodeURIComponent仍有问题

你已经用encodeURIComponent处理了Cookie的名称和值，但仍存在漏洞，大概率是忽略了以下几个核心要点：

• 安全Cookie属性未强制配置
  编码只是防止特殊字符破坏Cookie格式，但没有从传输、访问权限层面做防护：

  • 必须添加HttpOnly：阻止前端JS读取Cookie，直接切断XSS窃取Cookie的可能
  • 强制Secure：仅允许Cookie通过HTTPS传输，避免明文被拦截
  • 设置SameSite=Strict或Lax：防范CSRF攻击，限制Cookie跨站发送
  • 明确Path：缩小Cookie的生效范围（比如设为/dashboard而不是全局/）
  • 配置Max-Age：避免Cookie永久有效，降低泄露后的风险
    示例代码：

  const safeCookie = [
    `${encodeURIComponent(name)}=${encodeURIComponent(value)}`,
    'HttpOnly',
    'Secure',
    'SameSite=Strict',
    'Path=/',
    'Max-Age=86400'
  ].join('; ');
  document.cookie = safeCookie;
  

• 输入验证缺失，仅编码不够
  encodeURIComponent只是转义特殊字符，但没有过滤非法输入：

  • 对Cookie名称：严格限制字符集，只允许字母、数字、下划线、连字符，直接过滤掉;、空格、=等Cookie语法分隔符，即使编码后也不要放过非法格式的名称
  • 对Cookie值：根据业务场景做格式校验，比如用户ID必须是数字，拒绝不符合规则的输入，而不是只做编码

• 第三方依赖存在漏洞
  漏洞提示指向vendor目录下的yM()方法，说明问题不在你自己的代码里，而是引入的第三方库（比如UI组件、工具包）在设置Cookie时没做安全处理：

  • 找到这个依赖包，查看它的Cookie操作源码
  • 检查该库是否有官方安全补丁，直接升级到修复后的版本
  • 无法升级的话，要么用自定义逻辑覆盖它的Cookie设置方法，要么换用更安全的替代库

• 敏感数据不应存入Cookie
  别把密码、令牌明文、用户隐私数据这类敏感信息存进Cookie，哪怕做了编码和安全属性也不行：

  • 敏感数据应该放在后端的Session中，前端只存非敏感的标识（比如加密后的用户ID）
  • 如果必须存敏感内容，先在服务器端加密，前端只负责存储加密后的字符串

• 防止存储型XSS的额外处理
  如果Cookie值后续会在页面中渲染，除了存入时的编码，在输出渲染时还要做二次编码，避免存储型XSS攻击

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