如何在解耦的前端和后端中的每个请求中仅发送 http cookie(包含 jwt)?

Posted

技术标签:

【中文标题】如何在解耦的前端和后端中的每个请求中仅发送 http cookie(包含 jwt)?【英文标题】:How to send http only cookies(containing jwt) with every request in decoupled frontend and backend? 【发布时间】:2021-10-15 11:47:00 【问题描述】:

如何在分离的前端和后端中为每个请求发送仅 http cookie?我的前端和后端是通过 heroku 部署的,前端在这里 :- https://chatapp-client-12345.herokuapp.com/

后端在这里 :- https://chatappbackend12345.herokuapp.com/

我想将我的 http only cookie(包含 jwt)发送到我的后端,每个请求都是这样设置的:-

// generate jwt
    let jwtToken = jwt.sign(
        email:email,
        userId:userData._id
    ,"somesupersecret");
    res.cookie("jwtToken",jwtToken,
        expires:new Date(Date.now() + 3600000),
        httpOnly:true,
        domain:"chatapp-client-12345.herokuapp.com"
    );

但是前端没有设置http only cookie

通过研究发现我只能访问同域的cookie,但是如果我的前端和后端解耦了怎么办?

我的后端基于使用 rest apis 构建的节点 js,前端包含使用节点 js 提供的简单 html css js

【问题讨论】:

您部署到 https 并将配置设置为仅适用于 http @EzizHudayberdiyev 我该如何配置? @EzizHudayberdiyev cookie 中的 httpOnly 标志限制了脚本对 cookie 的访问。无论您通过 HTTPS 还是 HTTP 发送 cookie,都可以使用。 @Michal***owski 确定那是我的错) 【参考方案1】:

假设您的域是https://chatappbackend12345.herokuapp.com/,您只能在两个域上设置 cookie:

(1) 确切域和子域:

chatappbackend12345.herokuapp.com

(2) 根域:

.herokuapp.com

对于您的情况,您的前端和后端的域不同,这意味着 cookie 永远无法同时被双方访问。

也不太可能(或不可行)将 cookie 设置为根域,因为您几乎无法信任来自不属于您的网站的 cookie。

域和解耦是分离的概念。在前端和后端应用程序保持分离的情况下,您可以拥有相同的域。

实现它的一种方法是通过反向代理(参考:nginx reverse proxy)。您可以在前端和后端之上添加反向代理,将它们路由到同一个域。

例如,在您自己的域下,您可以使用以下路由策略制作反向代理应用程序:

https://chatappbackend12345.herokuapp.com/login: 后端应用 https://chatappbackend12345.herokuapp.com/* : 前端应用

对于这种情况,cookie 可以由您的服务器在客户端设置,而两个应用程序保持解耦。

有关 cookie 政策的更多信息,请查看rfc6265。

【讨论】:

如何设置反向代理来共享我的 http cookie?链接文章下面的另一件事表明我可以在这两个子域之间共享 cookie。 ***.com/questions/18492576/…. 是的,cookie 可以通过根域在两个子域之间共享。在您的情况下,如果您在 herokuapp.com 中设置 cookie,您的两个子域都可以获取 cookie。但是,我不确定这是否适用于您的情况,因为 herokuapp.com 不是您拥有的域,并且可能有一些逻辑将第三方托管网站从在根域中设置 cookie 中删除。您可以尝试在您的根域中设置 cookie 并查看它是否首先起作用。 然而,即使它有效,也不是推荐的方法。想象一下,您可以将 cookie 设置为根域,但其他 herokuapp 用户也是如此。根域 cookie 没有真正的完整性,因为它可以由任何其他 herokuapp 用户设置。 要设置反向代理,您可以查看website

以上是关于如何在解耦的前端和后端中的每个请求中仅发送 http cookie(包含 jwt)?的主要内容,如果未能解决你的问题,请参考以下文章

在前端和后端之间发送请求时如何防止我的秘密数据(例如来自“中间人攻击”)?

前端(SPA)和后端解耦:JWT 认证 + 持久登录

为啥我的后端中的 axios 发布请求没有将任何数据发送回我的外部 api? -

使用 Django、webpack、reactjs、react-router 解耦前端和后端

如何使用我的后端中使用的前端反应中的 Auth0 访问令牌

求解,前端和后端交互需要学啥?比如说,后端发送数据,前端接收到数据后自动生成数据的折线图或表格。