如何在 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 是一个 httpOnly cookie，我从使用 Set-Cookie header.

发送的 post 请求中收到

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

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

Answer 1

the idea of getting the token in getServerSideProps is that nobody can see it

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

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

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

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

如果您的企业只需要向用户显示 10，除非 his/her 令牌增加了该限制，并且您不希望用户操纵该限制，请将其保留为 httpOnly，在 getServerSideProps 中读取它，然后将 number 传递给您的组件。然后，无法操纵或更改任何内容，因为客户端不能乱用令牌来解锁更多日志。

如何在 getServerSideProps 之外获取 cookie？

How to get a cookie outside getServerSideProps?

cookies

reactjs

next.js

react-context