next.js - 我是否应该使用httpOnly cookie?

Question

在nextjs项目中，我把后端返回给我的access_token加密之后存储到了cookie里面

然后我设置httpOnly，但是当我想要在客户端axios里面去获得这个token的的时候，我拿不到。

我想要改变一下这个cookie的性质，改成客户端可以访问的。但是我看很多帖子说，这样不安全。

我现在有点犹豫，如果每次取得token还要发个网络请求去获得，那这个性能损失太大了，但是吧，我改成浏览器可以获取的cookie,我又怕有什么我不知道的攻击方式，出了问题就完了。

请问，客户端可以访问的cookie真的那么弱吗？我们平时前端存token在 localStorage里面不也是客户端可以获取的吗？

Answer 1

回答问题

是否应该使用httpOnly cookie？

是的，你应该继续使用httpOnly cookie来存储敏感信息如access_token。

解释

1. 安全性考虑：

   • httpOnly Cookie 的主要目的是增加安全性。通过将 cookie 设置为 httpOnly，JavaScript 代码（包括在客户端执行的恶意脚本）将无法访问这些 cookie。这有助于防止跨站脚本攻击（XSS）中攻击者窃取 cookie。
   • 如果你将 token 存储在客户端可以访问的 cookie 或 localStorage 中，那么通过 XSS 攻击，恶意脚本可以轻易地读取这些 token，进而模拟用户身份或执行其他恶意操作。

2. 性能考虑：

   • 虽然每次需要 token 时都发送 HTTP 请求似乎会增加性能开销，但相比起安全漏洞的风险，这通常是可以接受的。现代网络性能通常能够处理这种开销，且 HTTP/2 和 HTTP/3 等协议进一步优化了网络请求的性能。
   • 你可以通过优化你的后端服务（如使用缓存、减少处理时间等）来减轻这种开销。

3. localStorage vs. Client-Accessible Cookies：

   • localStorage 和客户端可访问的 cookie 在安全性上都有类似的弱点：它们都可以被客户端的 JavaScript 访问。这意味着，如果网站受到 XSS 攻击，存储在这些位置的数据就可能被泄露。
   • 然而，与 localStorage 相比，客户端可访问的 cookie 还会通过 HTTP 请求发送到服务器，这可能会引入其他类型的漏洞，如 CSRF（跨站请求伪造）。

4. 最佳实践：

   • 对于敏感信息如认证 token，最佳实践是使用 httpOnly cookie 存储它们，并通过后端服务管理它们的验证和更新。
   • 如果你的应用确实需要在客户端存储某些状态（非敏感信息），可以考虑使用 localStorage，但务必确保这些信息不会泄露敏感数据或可以被轻易用于模拟用户身份。

结论

综上所述，你应该继续使用 httpOnly cookie 来存储 access_token，并接受通过 HTTP 请求获取 token 时的性能开销。这样做可以显著提高你的应用安全性，并减少因 XSS 攻击导致的数据泄露风险。