Facebook Instant Game JS Cookie在Chrome浏览器设置失效问题求助

Chrome针对第三方iframe场景的Cookie拦截策略是该问题的核心触发点，你的现有实现缺少Chrome强制要求的Cookie属性，具体排查与修正点如下：

缺失的关键配置 #

• SameSite属性未显式声明：Chrome从V80开始，将所有未指定SameSite的Cookie的默认值设为Lax，跨站iframe（也就是你的Facebook Instant Game嵌入场景）下，Lax属性的Cookie会被直接拦截。第三方上下文必须显式设置SameSite=None才能允许写入。
• Secure属性未配套添加：只要Cookie设置了SameSite=None，Chrome强制要求该Cookie必须关联Secure属性，即仅能通过HTTPS协议传输，否则会直接判定为非法Cookie拒绝写入。
• 排除测试环境干扰：如果测试时使用Chrome无痕模式、或是开启了“阻止第三方Cookie”的严格跟踪保护设置，无论Cookie配置如何都无法写入，需先排除这类环境因素。

修正后的自定义setCookie代码 #

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=None; Secure";
}

js-cookie的适配方式 #

你之前使用js-cookie失败，是因为没有在调用时传入对应的配置参数，js-cookie本身支持自定义Cookie属性，正确调用示例：

Cookies.set('目标Cookie名', '目标Cookie值', {
  expires: days,
  path: '/',
  sameSite: 'none',
  secure: true
})

特殊场景补充说明 #

如果使用的是Chrome 115及以上版本，浏览器已开始逐步默认拦截所有未获得用户许可的第三方Cookie，上述配置也可能被拦截。这类场景下可优先替换为window.localStorage作为存储方案，无需依赖Cookie规则即可实现持久化存储，适配所有浏览器环境。

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