如何在 Cookie 上指定 SameSite 和 Secure（使用 axios/React/Node Express）答案

【问题标题】：How to Specify SameSite and Secure on Cookies (using axios/React/Node Express)如何在 Cookie 上指定 SameSite 和 Secure（使用 axios/React/Node Express）
【发布时间】：2020-11-22 07:58:24
【问题描述】：

我有这个聊天应用程序已经工作了一段时间，但突然之间它在客户端给了我这个问题：

Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax,
which prevents the cookie from being set in a cross-site context. This behavior protects 
user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts.
Note that only cookies sent over HTTPS may use the Secure attribute.

我在我的 React 客户端上使用这样的 axios：

axios.defaults.withCredentials = true
axios.post('https://easytalkchatappv2.herokuapp.com/signin', {
      username: username,
      password: password
    }).then(res => {
      console.log(res.data)
})

我正在使用 JWT 设置 cookie，方法是在我的 Nodejs Express 服务器中的 /signin 发布请求中执行此操作：

const user = {id: resp.insertedId}
const accessToken = await jwt.sign(user, process.env.ACCESS_TOKEN_SECRET)

res.cookie('token', accessToken)

我也在使用 cookie-parser。如何将这些 SameSite 和 Secure 属性添加到 cookie？

【问题讨论】：

您可以在 Node 应用程序中使用 CORS 作为中间件来实现此目的：npmjs.com/package/cors expressjs.com/en/resources/middleware/cors.html Stack Overflow 上还有另一个类似的问题，其答案可能会有所帮助：stackoverflow.com/questions/58270663/samesite-warning-chrome-77

标签： node.js reactjs express cookies axios

【解决方案1】：

您应该能够将 'secure' 和 'sameSite' 属性传递给 res.cookie 方法；如下所示，其中 x 被替换为您要使用的值：

res.cookie('token', accessToken, { sameSite: x, secure: x })

如 Express 文档中所示： https://expressjs.com/en/api.html#res.cookie

【讨论】：