如何在 getServerSideProps 之外获取 cookie?

Posted

技术标签:

【中文标题】如何在 getServerSideProps 之外获取 cookie?【英文标题】:How to get a cookie outside getServerSideProps? 【发布时间】:2021-09-23 19:14:05 【问题描述】:

我在 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是没人能看到,还是我错了?

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

【问题讨论】:

【参考方案1】:

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

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

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

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

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

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

【讨论】:

谢谢!我将值传递给道具并且它起作用了。我发现此解决方案非常有用,因此我将其标记为答案。顺便说一句,我不知道当我设置一个 httpOnly cookie 时,我可以通过传递“withCredentials: true”将它发送到服务器。然后我根本不需要授权 - 我将 cookie 直接发送到服务器并在我的服务器中进行检查。

以上是关于如何在 getServerSideProps 之外获取 cookie?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Nextjs 的 getServerSideProps 中包含我的凭据?

如何在 getServerSideProps 中获取 Auth0 用户对象?

如何将道具从组件传递到 NextJS 中的 getServerSideProps()?

如何在 nextJS getserversideprops 中使用 firebase

如何在我的IndexPage中得到getServerSideProps的结果?

如何组合多个 getServerSideProps 包装器?