Nextjs：能够使用服务器操作获取仅 HTTPS 的 cookie，是否存在漏洞？

Question

从 Next 13.4 开始，我们可以执行以下操作

• 设置带有 HTTP-ONLY 标志的 cookie
• 在客户端组件中使用服务器操作来获取 HTTP-ONLY cookie。基本上我可以有一个按钮，当您单击它时，它将返回 HTTP-ONLY cookie 的值，我们将其附加到请求标头

这安全吗？ jwt 令牌存储的最大妥协是让自己暴露于针对我们 jwt 的 XSS 或 CSRF

使用 Nextjs，我们可以使用 Bearer Auth，并将 cookie 存储在 http-only 中，并将其附加到标头，从而减少 XSS 和 CSRF 攻击向量。

这有漏洞吗？

Answer 1

这有漏洞吗？

只要获取的仅 HTTP cookie 不暴露给客户端 JavaScript，就不应该存在漏洞。使用仅 HTTP 的 cookie 是一种安全措施，可防止客户端脚本访问 cookie 数据，这有助于减轻跨站点脚本 (XSS) 攻击。

基本上我可以有一个按钮，当您单击它时，它将返回 HTTP-ONLY cookie 的值，我们将其附加到请求标头？

我想，只要一切都是在服务器端通过服务器操作完成的。 是否通过也没关系：

• SSR（服务器端渲染），涉及在服务器上渲染组件并将 HTML 发送到客户端。在 SSR 期间，可以在服务器上访问 HTTP-ONLY cookie，以使用可能特定于用户的数据预渲染页面。
• RSC（React 服务器组件），允许您构建仅在服务器上渲染的组件。这些组件可以直接访问服务器端数据源，例如数据库或文件系统，并且可以使用服务器上的 HTTP-ONLY cookie。

您问题中提到的按钮可能旨在触发服务器端操作。该按钮将是客户端组件的一部分，单击时，它将向服务器操作发送请求。

该按钮的原因是启动需要涉及 HTTP-ONLY cookie 的服务器端处理的交互，例如刷新会话、获取用户特定的数据或执行需要身份验证的操作。通过使用服务器端逻辑来处理 cookie，您可以通过永远不会将令牌暴露到客户端环境来保证令牌的安全，从而降低 XSS 和 CSRF 攻击的风险。

典型的工作流程是：

Client-Side                  Next.js Server                 External API
     |                             |                             |
     |     Click Button            |                             |
     |------------------------->   |                             |
     |                             | Read HTTP-only cookie       |
     |                             | from request headers        |
     |                             |                             |
     |                             | Attach cookie to            |
     |                             | Authorization header        |
     |                             |                             |
     |                             |---------------------------> |
     |                             | Make authenticated          |
     |                             | request to API              |
     |                             |                             |
     |  <------------------------- |                             |
Receive |  Response (no sensitive  |                             |
   data |     data exposed)        |                             |
     |                             |                             |
     |                             |                             |
     V                             V                             V

用户通过单击按钮与客户端交互，单击事件会触发对 Next.js 应用程序中服务器端端点的请求。

服务器端代码从请求标头中读取仅 HTTP 的 cookie（浏览器会随请求自动发送 cookie）。然后，它将此 cookie 附加到授权标头（作为不记名令牌），以便向外部 API 发出传出请求。此操作在服务器端执行，并且 cookie 值永远不会暴露给客户端。

Next.js 服务器（例如）向外部 API 发出经过身份验证的请求。一旦外部 API 响应，Next.js 服务器就会处理该响应。它可能会向客户端返回一些数据，但此响应中不包含仅 HTTP 的 cookie 值，以确保它不会暴露给客户端 JavaScript。

---

作为这个问题的一个很好的说明，请考虑

vercel/next.js

讨论 59303:

无法（安全）访问客户端组件 SSR 的 cookie/标头

讨论涉及到需要一种在 SSR 期间安全地访问 cookie 而不将其暴露给客户端的方法，这正是您对安全处理 JWT 和存储在 cookie 中的其他敏感信息的担忧。

将 cookie 作为 prop 传递给客户端组件将导致 cookie 值在页面中序列化，从而可供 JavaScript 访问。

因此，这是 Next.js 可能需要进一步开发的领域，以确保可以轻松可靠地实施安全最佳实践。