带有 React 和 Node 的 httpOnly cookie

关键词：

【中文标题】带有 React 和 Node 的 httpOnly cookie【英文标题】：httpOnly cookies with React and Node 【发布时间】：2021-06-23 03:54:34 【问题描述】：

我正在尝试弄清楚如何使用 httpOnly cookie 和可扩展性可选性来使用 React 和 Node 实现身份验证/授权。我读过 JWT 可以通过使用刷新令牌和 httpOnly cookie 来解决这个问题。

对我来说，第一个问题是如何通过 react 使其以正确的方式工作，因为 httOnly cookie 无法通过 JS 访问。 第二件事是，我希望我的前端和后端存在于分离的 dockerized 容器中，但据我所知，httpOnly cookie 仅添加到同一域（和同一端口）的标头中。* 更新实际上，我刚刚读到这不是真的，我可以在同一主机上使用 httpOnly cookie，但端口不同。*Update2，我记得它是什么关于：cookie 上的“SameSite”属性。这会将 cookie 绑定到同一个源，这意味着端口差异将被视为不同的源，并且不会传输 cookie。

能否请您澄清一下，也许可以解释一下，它真的那么重要吗？我的意思是，如果我想使用一些超级超高度安全的网站，我真的会处于危险之中，但是，我会使用 JWT 和本地存储（但有刷新令牌）？ httpOnly(and sameSite: true) cookie 真的会在这里有所作为吗？

谢谢

【问题讨论】：

【参考方案1】：

在我的项目（也是 Node + React）中，我做了以下事情：

对于每个经过身份验证的用户（用户名 + 密码），我签署了两个令牌，一个访问令牌和一个刷新令牌。 我使用httpOnly 属性在响应标头中设置了刷新令牌。请注意，除非您设置属性 Secure 和 SameSite，否则最新版本的浏览器将不允许第三方 cookie（来自不同域）。 我将访问令牌作为响应正文返回

现在在客户端（你的 React 应用）：

您将在响应正文中获得访问令牌，这里有两个选项。将其存储在local storage 或内存中。由于 XSS 漏洞，我选择将令牌保留在内存中。 （这显然需要您在每次页面刷新时获取另一个访问令牌，因为内存已被清除） 刷新令牌无法通过 JS 访问你是对的，但你不需要它。这个令牌将在每个请求上发送，通常它的到期日期应该很长（我设置为 6-12 个月） 每次你想获得一个新的访问令牌（因为它的到期时间应该是 一个小的，大约 15-20 分钟），您将向服务器发送请求以“刷新”您的访问令牌，服务器将检查请求标头中是否存在刷新令牌，如果不返回状态 @ 987654326@

编辑：jwt 令牌不是“安全”或“不安全”，它们只是包含一些数据的令牌，它们允许您使您的身份验证过程无状态（而不是管理服务器中的会话）。只要您不在其中存储任何敏感数据，并使用只有您拥有的密钥对其进行签名，就可以了

编辑 2：由于您使用的是“清理”DOM 的反应，XSS 的可能性很小，所以使用本地存储是可以的，很多网站都这样做。但是因为仍有可能（您或客户将脚本注入某个输入元素），所以我决定将访问令牌存储在内存中，这有点开销，但我更喜欢这样做。

【讨论】：

感谢您尝试提供帮助并分享您解决问题的方法，但是，由于许多原因，我认为这不是正确的方法...例如，是什么让您认为-内存比本地存储更安全？潜在的黑客可以像访问本地存储一样访问它......此外，长时间制作刷新令牌是没有意义的，你失去了制作它们的全部意义，因为它们存在确保常规令牌无效，但您可以通过实现另一个可能“丢失”的令牌来解决这个问题。废话。 本地存储更容易受到攻击，因为任何人都可以访问它 (window.localstorage)。将它存储在内存中的好处是访问通常存在于函数范围内的 js 变量的机会较小（尤其是在反应中）。关于刷新令牌策略，这就是您使用它们的方式。他们有这么长的时间来刷新您的访问令牌是有原因的。 6-12 个月的到期日期是可选的。如果您查看 Google OAuth2 服务，它们的刷新令牌永远不会过期。另一方面，访问令牌应该在短时间内有效，以防被盗。 这里有一个很好的video 说明如何使用刷新令牌进行身份验证

Heroku 上带有 Node.JS 和 Create-React-App BuildPack 的 413（请求实体太大）

】Heroku上带有Node.JS和Create-React-AppBuildPack的413（请求实体太大）【英文标题】：413(RequestEntityTooLarge)onHerokuw/Node.JSandCreate-React-AppBuildPack【发布时间】：2019-03-1217:25:19【问题描述】：在过去的3天里，我一直在扰乱互联网，似乎在兜... 查看详情

在带有 React.js 前端的 Node.js 上使用 Passport.js 进行身份验证

】在带有React.js前端的Node.js上使用Passport.js进行身份验证【英文标题】：AuthenticationusingPassport.jsonNode.jswithReact.jsfrontend【发布时间】：2018-03-0817:42:55【问题描述】：在身份验证方面，我完全是新手。我正在尝试将ColtSteele使用的方... 查看详情

节点，带有 PHP api 服务器的 React 网络服务器

】节点，带有PHPapi服务器的React网络服务器【英文标题】：Node,Reactweb-serverwithaPHPapiserver【发布时间】：2016-03-2000:43:14【问题描述】：在Node/ReactWeb服务器和PHPapi服务器之间进行通信时，最佳做法是通过Web服务器而不是直接向api服... 查看详情

带有 Webpack、React 和 Babel 的 Sass-loader 无法正常工作

】带有Webpack、React和Babel的Sass-loader无法正常工作【英文标题】：Sass-loaderwithWebpack,ReactandBabelnotworking【发布时间】：2018-03-0203:46:42【问题描述】：对于代码繁重的帖子，我深表歉意。我是Node、React和Webpack的新手，也是第一次使用... 查看详情

我可以使用带有 create-react-app 的自定义 node_modules 路径吗

】我可以使用带有create-react-app的自定义node_modules路径吗【英文标题】：CanIuseacustomnode_modulespathwithcreate-react-app【发布时间】：2021-02-1514:49:07【问题描述】：我正在一个虚拟机内的项目上工作（实际上是通过vscode远程容器在Windows... 查看详情

facebook-passport 在 node.js 后端带有 react-redux

】facebook-passport在node.js后端带有react-redux【英文标题】：facebook-passportwithreact-reduxonnode.jsbackend【发布时间】：2019-03-2115:10:12【问题描述】：很抱歉，如果之前有人问过这个问题，我们已经研究并观看了一些教程，但似乎没有一个... 查看详情

如何在heroku上托管带有node后端的react应用程序？(代码片段)

我正在尝试在Heroku实例上托管使用create-react-app创建的React应用程序。它具有来自Node后端的API调用，我还需要托管它。我已经四处询问并且人们声称使用express中间件将从React应用程序构建的文件作为静态文件提供。我不确定这是... 查看详情

带有 reactjs 和 nodejs 的 Shopify 应用程序没有 nextjs？

】带有reactjs和nodejs的Shopify应用程序没有nextjs？【英文标题】：Shopifyappwithreactjsandnodejswithoutnextjs?【发布时间】：2019-07-1604:29:45【问题描述】：我正在开发一个shopify应用程序，因此reactjs处理UI部分，而node-express处理shopifyauth事情... 查看详情

带有 create-react-app 的 webpack-dev-middleware

】带有create-react-app的webpack-dev-middleware【英文标题】：webpack-dev-middlewarewithcreate-react-app【发布时间】：2018-01-2513:17:30【问题描述】：在我的react\\node应用程序中，我在节点端使用webpack-dev-middleware和webpack-hot-middleware以便在客户端中... 查看详情

将 JSON 数据库与 Node 和 React 一起使用

】将JSON数据库与Node和React一起使用【英文标题】：UseJSONdatabasewithNode&React【发布时间】：2018-12-2320:26:57【问题描述】：我正在使用Node.js和React开发一个Web应用程序。一个JSON文件用于存储文本数据和我使用的图片的存储库。它... 查看详情

React/Node/Express 和 google OAuth 的 CORS/CORB 问题

】React/Node/Express和googleOAuth的CORS/CORB问题【英文标题】：CORS/CORBissuewithReact/Node/ExpressandgoogleOAuth【发布时间】：2019-03-1415:56:12【问题描述】：我有一个React应用程序，我正在尝试使用OAuth添加一个Node/Express/MySQL后端。我的React应用... 查看详情

根据用户角色隐藏一些 React 组件子项

...题描述】：我正在用React和Redux编写一个单页应用程序（带有Node.js后端）。我想实现基于角色的访问控制，并想控制应用的某些部分（或子部分）的显示。我要从Node.js获取权限列表，它只是一个具有这种结构的对象：users: 查看详情

如何使 Node 和 React 应用程序共享类

】如何使Node和React应用程序共享类【英文标题】：HowtomakeNodeandReactapptoshareclasses【发布时间】：2021-04-2207:24:00【问题描述】：我正在使用TypeScript构建一个Node和React应用程序。其目录树如下：我的问题：由于我对两个堆栈使用相同... 查看详情

如何克服 Redux React Express 和 Node 的 CORS 问题？

】如何克服ReduxReactExpress和Node的CORS问题？【英文标题】：HowToOvercomeCORSissueswithReduxReactExpressandNode?【发布时间】：2016-12-0912:00:33【问题描述】：我有一个使用ReactRouter和Redux作为其状态管理器的React应用程序。应用的服务器端使用E... 查看详情

带有 React 和 Vue 的语义 UI 和 jQuery

】带有React和Vue的语义UI和jQuery【英文标题】：SemanticUI&jQuerywithReact&Vue【发布时间】：2017-07-2823:09:11【问题描述】：我计划使用semanticUI来构建前端，但也想使用React或Vue来构建组件。我想知道如何将基于jQuery的框架（如语义... 查看详情

为啥在 JS React 和 Node 中处理导入的方式不同？ [复制]

】为啥在JSReact和Node中处理导入的方式不同？[复制]【英文标题】：WhyinJSReactandNodehandleimportingdifferently?[duplicate]为什么在JSReact和Node中处理导入的方式不同？[复制]【发布时间】：2019-10-0501:37:42【问题描述】：为什么在JS中，React像... 查看详情

使用 MongoDB、express、node 和 react 上传图片

】使用MongoDB、express、node和react上传图片【英文标题】：UploadingimageswithMongoDB,express,node,andreact【发布时间】：2020-11-0614:54:33【问题描述】：我一直在关注YouTube上的这个很棒的教程，试图建立一个网站。但是，一旦我部署它，图像... 查看详情

带有 React、TypeScript 和 Webpack 的空白页面

】带有React、TypeScript和Webpack的空白页面【英文标题】：BlankpagewithReact,TypeScript,andWebpack【发布时间】：2022-01-2306:51:03【问题描述】：我使用create-react-app创建了一个React应用程序，并向其中添加了TypeScript。我添加了Webpack，因为我... 查看详情