如何在 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