跨域嵌入iframe场景下登出时第三方Cookie无法删除问题咨询

问题场景 #

在域名1（domain 1）的页面嵌入托管于域名2（domain 2）的iframe时，存在如下现象：

• 用户触发登出操作时，删除该iframe下Cookie的操作失效
• 登录流程中可正常为该iframe设置Cookie
• 直接在浏览器打开iframe对应URL执行删除操作时，Cookie可被正常清除

现有Cookie设置代码：

document.cookie = "name="+state.name+";SameSite=None; Secure;expires="+new Date().getTime()+(24*60*60*1000)+";path=/";

现有Cookie删除代码：

document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;'

核心原因 #

跨域iframe场景下操作的是第三方Cookie，浏览器要求修改/删除Cookie时传入的属性必须和Cookie存储时的属性完全匹配，否则操作会被静默拦截。
现有逻辑的问题点：

1. 删除Cookie时遗漏了SameSite=None、Secure两个属性，和设置Cookie时的属性不匹配，在跨域iframe的第三方上下文里，浏览器会直接忽略该删除请求。
2. 设置Cookie时expires字段直接传入时间戳数值不符合规范，document.cookie的expires要求传入GMT格式时间字符串，当前写法仅靠部分浏览器的容错逻辑生效，存在兼容隐患。

直接打开iframe对应URL时，域名2属于第一方上下文，浏览器对第一方Cookie的属性校验规则更宽松，即使删除时不带SameSite=None、Secure属性也能命中目标Cookie完成删除，因此会出现两种场景表现不一致的问题。

修复方案 #

• 补全删除Cookie代码的属性，保证和设置时的属性完全一致，修正后的删除代码：

document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;SameSite=None;Secure';

• 规范Cookie设置逻辑的expires传值，将时间戳转为标准GMT格式字符串，修正后的设置代码参考：

const expires = new Date(Date.now() + 24 * 60 * 60 * 1000).toUTCString();
document.cookie = `name=${state.name};SameSite=None;Secure;expires=${expires};path=/`;

• 兼容性兜底：如果部分浏览器默认开启第三方Cookie拦截导致前端删除失效，可在域名2服务端提供专用登出接口，接口响应头通过Set-Cookie返回已过期的同名Cookie（同样携带SameSite=None;Secure;path=/属性），用户触发登出时调用该接口，由服务端完成Cookie清除，该方案兼容性比前端操作更稳定。

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