如何在 getServerSideProps 之外获取 cookie？

Question

我在 getServerSideProps 中有这段代码，它为我提供了来自名为 token 的 cookie 的令牌值：

const token = context.req.cookies?.token || null;
const auth = true;
//Then I sent the token to server
const settings = {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Authorization': "Bearer " + token,
  },
  body: JSON.stringify({ "limit": "10" })

};

cookie 是我从带有 Set-Cookie 标头的 post 请求中收到的 httpOnly cookie。

问题是，我想不仅在页面组件中使用令牌（getServerSideProps 仅在页面组件中）。在其他组件中，有时我想使用能够为我提供更多数据的函数，比如说客户端的所有消息 - 基于他的令牌（我在 logs.js 中将其限制为 10，并且我想在我的内部组件中增加它职能） 。通过道具传递令牌然后在我的函数中使用它是否安全？我有logs.js 组件，它有另一个名为Messages 的组件，在Messages 组件内部我想调用一个函数来获取更多消息，但我不确定它是否安全，因为获取getServerSideProps中的token是没人能看到，还是我错了？

如果我没记错的话，从客户端获取令牌以便在内部组件中发送请求的最佳方法是什么？

Answer 1

在getServerSideProps中获取token的思路是没人能看到

在 cookie 方面并非如此。 Cookie 将被发送到浏览器，因此任何人都可以看到它。您在 getServerSideProps 中对它所做的操作是隐藏的，但 cookie 本身是可见的。

因为它是一个 httpOnly cookie，所以您无法在客户端使用 javascript 访问它。因此，如果您需要 javascript 中的 cookie 值，您有几个选择：

1. 读取getServersideProps 中的cookie 并将该值传递给您的页面并传递给您的组件。如果您只需要您的组件读取 cookie 值，这将起作用。
2. 更改为{ httpOnly: false } cookie，这将允许javascript 读取（和写入）它。如果它与安全性有关，我不会这样做，因为这样任何人不仅可以读取 cookie，而且可以更改它并用它做任何他们想做的事情。

您提到它是一个令牌 - 最大的问题是：就安全性而言，令牌的用途是什么？您提到使用它来确定您是否应该拥有超过 10 个日志。这是业务需求吗？如果有人操纵它显示 20、30、1,000，会发生什么不好的事情（比如你赔钱、违规等？）？

如果您的业务只需要向用户显示 10 个，除非他/她的令牌增加了该限制，并且您不希望用户操纵该限制，请将其保留为 httpOnly，在 @ 中阅读987654325@，然后将 number 传递给您的组件。然后，什么都不能被操纵或改变，因为客户端不能乱用令牌来解锁更多的日志。