英文:
Best way to store tokens in Next.js for authentication
问题
以下是您要翻译的内容：
我正在开发一个Next.js应用程序，并使用令牌实现身份验证。我有三个令牌：accessToken，refreshToken（都是jwt，包含userId、email和role），以及csrfToken（具有加密随机生成的32位字符字符串）。我想知道在我的Next.js应用程序中安全存储这些令牌的最佳做法。以下是我的当前方法，我将感激您对此方法是否为推荐方式或是否存在更好替代方法的反馈和建议。
我的建议是将refreshToken存储在安全的HTTP-only cookie中。这种方法确保令牌受到跨站脚本（XSS）攻击的保护，无法被JavaScript访问。
至于accessToken和csrfToken，我计划在登录POST请求的响应中接收它们，然后使用上下文提供程序将它们存储在Next.js中。通过这样做，我可以轻松在应用程序的不同组件和页面之间访问这些令牌。
这种方法是否推荐？是否存在潜在的安全风险或缺点需要我注意？在Next.js应用程序中存储令牌的最佳实践是否有其他替代方法？任何见解或示例将不胜感激。
英文:
I am working on a Next.js application and implementing authentication using tokens. I have three tokens: accessToken, refreshToken (both are jwt and contain userId, email and role), and csrfToken (cryptographically random 32 digit character string). I would like to know the best practices for storing these tokens securely in my Next.js application. Here is my current approach, and I would appreciate feedback and suggestions on whether this is the recommended way or if there are better alternatives.
My suggestion is to store the refreshToken in a secure, HTTP-only cookie. This approach ensures that the token is protected from cross-site scripting (XSS) attacks and cannot be accessed by JavaScript.
As for the accessToken and csrfToken, I plan to receive them as a response from the login POST request and then store them in Next.js using a context provider. By doing this, I can easily access these tokens across different components and pages within my application.
Is this approach recommended? Are there any potential security risks or drawbacks that I should be aware of? Are there any alternative methods that are considered best practices for storing tokens in a Next.js application? Any insights or examples would be greatly appreciated.
答案1
得分: 1
OAuth for Browser Based Apps文章提供了一些最新的最佳实践。在浏览器中无法完全安全地存储安全值。第6.2节描述了一种常见的前端后端分离方法，这种方法在当今经常使用。
围绕XSS漏洞和令牌截取存在额外的攻击向量，这意味着基于HTTP-only cookie的安全性被认为更安全，威胁也更容易理解，当数据请求被发送时。
一个可靠的方法是将所有OAuth令牌存储在最新的HTTP-only SameSite=strict cookie中。CSRF令牌是一个次要值，可以存储在内存中，甚至是本地存储中。如果从浏览器中泄露，它不会提供对受保护数据的访问权限。
使用cookie时，XSS仍然是一个关注点。对于任何存在XSS漏洞的基于浏览器的应用程序，恶意代码可以执行应用程序能执行的任何操作，例如将cookie发送到后端。因此，还应遵循OWASP的XSS最佳实践，包括内容安全策略，这可以帮助减轻数据泄露风险。
英文:
The OAuth for Browser Based Apps article provides some up to date best practices. Secure values cannot be stored entirely safely in the browser. Section 6.2 describes a backend for frontend approach that is commonly used these days.
Extra attack vectors around XSS concerns and token interception mean that HTTP-only cookie based security is perceived to be safer, and threats better understood, when data requests are sent.
A solid approach is to store all OAuth tokens in the latest HTTP-only SameSite=strict cookies. The CSRF token is a secondary value which can be stored in memory or even local storage. If it is exfiltrated from the browser it does not provide access to secured data.
With cookies, XSS remains a concern. For any browser based app with XSS vulnerabilities, malicious code can do anything your app can do, eg send the cookie to the backend. Therefore also follow OWASP XSS best practices, including a Content Security Policy, which can help to mitigate data exfiltration risks.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论