重新认识一下cookie —— samesite+secure解决跨域请求cookie问题

2024-08-13

字数统计: 791字 | 阅读时长≈ 3分

做一个有温度和有干货的技术分享作者 —— Qborfy

背景

最近在开发微软的Teams应用，在开发过程中遇到了一个跨域请求cookie的问题，具体表现是，当我在Teams应用中登录后，然后通过iframe的方式打开一个第三方网站，第三方网站无法获取到cookie，导致无法登录。这个问题困扰了我很久，最后通过Google找到了解决方案，特此记录一下。

问题描述

Teams应用是在Teams的iframe中打开的，第三方网站是独立于Teams的，所以是跨域的，当我在Teams中登录后，第三方网站无法获取到cookie，导致无法登录。

解决方案

在cookie中设置SameSite属性为None，Secure属性为true，具体代码如下：

// 以下配置为express-session
session({
    cookie: {
        sameSite: 'none',
        secure: true,
        httpOnly: false,
        maxAge: 86400,
    },
    proxy: true,
    name: 'xxxx.sid',
})

解决途中遇到的问题：

如果只设置SameSite属性为None，Secure属性为false，则无法在Chrome浏览器中正常工作，具体表现是 Set-Cookie 请求被浏览器拒绝，具体原因可以参考这里。
当Secure属性设置为true，express-session中没有设置proxy属性，那么express不会返回set-cookies header信息，因为express-session默认是关闭的proxy(反向代理)，打开后才支持x-forwarded-for，具体原因可以参考这里。
express还需要设置app.set('trust proxy', 1)，否则无法获取到x-forwarded-for信息，具体原因可以参考这里。

浏览器Cookie

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Cookie 主要用于以下三个方面：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
追踪用户行为（如广告跟踪、网站分析等）

如何设置Cookie

Cookie 通常设置在 HTTP 头中，格式为：Set-Cookie: <cookie名>=<cookie值>，例如：Set-Cookie: name=value。

Cookie 一般是在后端设置，但也可以在前端设置，例如：document.cookie = 'name=value'。

Cookie的属性

表格如下：

属性	作用	默认值	示例
Name	Cookie 的名称	无	name
Value	Cookie 的值	无	value
Domain	Cookie 所属域名	当前文档所在域名	example.com
Path	Cookie 所在路径	当前文档所在路径	/
Expires	Cookie 过期时间	当前会话	Thu, 01 Jan 1970 00:00:00 GMT
Max-Age	Cookie 过期时间（秒）	当前会话	86400
Secure	Cookie 是否仅通过 HTTPS 发送	false	true
HttpOnly	Cookie 是否仅允许 HTTP 进行操作，就是说不允许在前端JS中操作	false	true
SameSite	Cookie 是否仅通过同一站点发送	None	Strict、Lax、None

Cookie的优先级

当浏览器同时设置多个同名 Cookie 时，它们的优先级如下：

SameSite=None 优先级高于 SameSite=Strict。
Secure 优先级高于 SameSite。
Domain 优先级高于 Path。

如果以上几个

参考资料

Cookie 的 SameSite 属性

本文作者： Qborfy
本文链接： https://www.qborfy.com/today_2024/20240813.html
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！