react cookie_安全React快速应用程序jsonwebtoken cookie会话auth0和通行证教程

react cookie

I’ve been a long-time learner of express, node, and react projects. I’m always hopping from one example to another trying to figure out the best configuration for my express servers. There is one particular topic/question that has seemed to vacuum several days (if not entire weeks) out of my life during my developments.

我是Express，Node和React项目的长期学习者。 我总是从一个例子跳到另一个例子，试图找出适合我的快速服务器的最佳配置。 在开发过程中，有一个特定的主题/问题似乎已经消失了几天(如果不是整整几周)。

您将如何确保会话安全？ (How will you secure your session?)

Whether you are authenticating your users via Google, Facebook, or another third party authenticator, or even if you are creating your own local authentication (mostly a bad idea unless you know what your doing), the security of your authentication process also rests on how you maintain that session with your users.

无论您是通过Google，Facebook还是其他第三方身份验证器对用户进行身份验证，或者即使您正在创建自己的本地身份验证(除非您知道自己的工作方式，否则大多数情况下都是一个坏主意)，身份验证过程的安全性还取决于如何您可以与用户保持该会话。

The point of this tutorial is to create a secure express react app that we can use over and over for other cool projects. I will be going over my preferred configuration, and my understanding behind it, for those who are looking for a (sorta) simple and secure setup for their react-express projects. There are many more configurations out there with higher levels of security or ease, so if you come across any or wish to thrash my pitch, I would love to hear them.

本教程的重点是创建一个安全的Express React应用程序，我们可以一遍又一遍地将其用于其他出色的项目。 对于那些正在为他们的react-express项目寻找(某种)简单而安全的设置的人，我将介绍我偏爱的配置及其背后的理解。 那里有更多具有更高安全性或便捷性的配置，因此，如果您遇到任何问题或希望克服我的疑问，我很想听听他们的意见。

您首先需要了解的是： (What you need to know first:)

There are a few key concepts you that I will be using in this tutorial, so here is a brief overview:

我将在本教程中使用一些关键概念，因此这里是一个简要概述：

Cookies

饼干

HTTP Cookies are small pieces of data stored on the web browser, sent from the server side. There are some key properties that go into cookies. A secure cookie can only be transmitted over an encrypted connection (https). A http-only cookie cannot be access by client-side APIs, such as javascript. These cookies get sent back to the originating server, so they can hold information about the connecting user.

HTTP Cookie是存储在Web浏览器中的小块数据，是从服务器端发送的。 Cookie中包含一些关键属性。 安全cookie只能通过加密连接(https)传输。 客户端API(例如javascript)无法访问仅HTTP的Cookie。 这些cookie被发送回原始服务器，因此它们可以保存有关连接用户的信息。

JSON Web Tokens (JWT)

JSON Web令牌(JWT)

JWT tokens are cryptographically signed, base64 JSON objects. You can create these tokens and send them from your backend server to your frontend to be stored. When these tokens are sent back, you can verify the signature on the token to verify that the JWT is valid. This can be used as a very handy way to verify a session.

JWT令牌是经过密码签名的base64 JSON对象。 您可以创建这些令牌，并将其从后端服务器发送到前端进行存储。 当这些令牌发送回时，您可以验证令牌上的签名以验证JWT有效。 这可以用作验证会话的便捷方法。

Why Cookies To Hold JWTs and Not Local-Storage?

为什么Cookies保留JWT，而不保留本地存储？

Local storage on the browser is susceptible to XSS attacks, in which malicious code can scrape the users browser storage and snag valuable session data. This is easily avoided through secure/http-only cookies

浏览器上的本地存储易受XSS攻击，其中，恶意代码会抓取用户浏览器存储并捕获有价值的会话数据。 通过安全/仅HTTP cookie可以轻松避免这种情况

我第一次学习时遇到的是：(What I came across as I was first learning:)

There are two very popular packages available for maintaining sessions in express:

有两种非常流行的软件包可用于维护快速会话：

express-session and cookie-session

express-session and cookie-session

Express-session

快速会议

Express-session is a session middleware used for storing session data server-side. This means that when the user logs in, their session data is being stored in a database somewhere on the backend, and the session id is stored in a cookie, which is then passed to the frontend. When the cookie comes back on a request, this session Id is used to lookup the session in the database.

Express-session是用于在服务器端存储会话数据的会话中间件。 这意味着，当用户登录时，其会话数据将存储在后端某处的数据库中，而会话ID被存储在cookie中，然后将其传递给前端。 当Cookie根据请求返回时，该会话ID用于在数据库中查找会话。

Cookie-session

Cookie会话

Cookie-session is another session middleware. This middleware creates a cookie which can be used to store information within a cookie that gets sent to the frontend. This does not store any data on the server, so there is no storage involved.

Cookie会话是另一种会话中间件。 该中间件创建一个cookie，该cookie可用于将cookie中的信息存储到发送到前端的cookie中。 这不会在服务器上存储任何数据，因此不涉及任何存储。

为什么一个接一个？ (Why one over the other?)

Express-session seems to be used more often in tutorials I find online, especially with popular authentication libraries such as passport. This could certainly save some time and headache for beginners who just want to dive in via a quick tutorial.

我在网上找到的教程似乎更常使用Express-session，特别是在通行证等流行的身份验证库中。 对于只想通过快速教程学习的初学者来说，这无疑可以节省一些时间和头痛。

Unfortunately, moving past development is where things with express-session get more involved. Since the default session storage for express-session is the MemoryStore, it is purposely not designed for a production environment, and will leak memory since it does not scale past a single process. It will require a separate server-side storage system such as redis or mongodb in order to operate nicely in a production environment.

不幸的是，超越发展才是涉及快速会话的事情。 由于用于Express-Session的默认会话存储是MemoryStore，因此它不是专门为生产环境设计的，并且由于无法扩展到单个进程，因此会泄漏内存。 它将需要一个单独的服务器端存储系统，例如redis或mongodb，以便在生产环境中正常运行。

Adding a server-side session-storage comes also comes with a performance hindrance, but allows for more data to be stored regarding the session, since its an actual storage system and not a small cookie. Cookies (by the RFC625 specification) recommends that a browser should allow at least 4096 bytes per cookie. Unfortunately this means that you should not exceed 4093 bytes per domain.

添加服务器端会话存储也带来了性能上的障碍，但是由于它是实际的存储系统，而不是很小的cookie，因此允许存储有关该会话的更多数据。 Cookies(根据RFC625规范)建议浏览器每个cookie至少允许4096个字节。 不幸的是，这意味着每个域最多不能超过4093字节。

Why Cookie-session is a lovely choice:

为什么Cookie会话是一个不错的选择：

Cookie-session does not require server-side storage for production, and you have free manipulation of what goes into your cookie session. We can easily assign values to our session cookie, such as a JWT token. This frees your server for less latency and problems in load-balancing situations.

Cookie会话不需要用于生产的服务器端存储，并且您可以自由操作Cookie会话中的内容。 我们可以轻松地为会话cookie分配值，例如JWT令牌。 这样可以释放您的服务器，以减少等待时间和负载平衡情况下的问题。

And if you wanted to add a server side storage for tracking sessions, you can add this logic to a cookie-session setup, in case you had a use-case for this functionality. cookie-session middleware is flexible, and just needs a bit of a love.

而且，如果您想添加服务器端存储来跟踪会话，则可以在cookie会话设置中添加此逻辑，以防万一您有此功能的用例。 cookie会话中间件是灵活的，只需要一点爱。

看起来像什么： (What it looks like:)

We are going to use passport, jsonwebtoken, and cookie-session. I will also be using a ReactJS frontend.

我们将使用护照，jsonwebtoken和cookie会话。 我还将使用ReactJS前端。

Create a new project directory and initialize a new node project.

创建一个新的项目目录并初始化一个新的节点项目。

$ mkdir secure-starter
$ cd secure-starter
$ npm init

Nothing fancy, I just like to set my “main” as server.js. And now we have a package.json file.

没什么，我只想将我的“ main”设置为server.js。 现在我们有了一个package.json文件。

Let’s download the starting dependencies

让我们下载开始的依赖

$ npm install --save express cookie-session

And now we create server.js at the root directory for a simple express app: