nuxt/auth 如何真正安全？答案

【问题标题】：How is nuxt/auth really secure?nuxt/auth 如何真正安全？
【发布时间】：2021-12-24 22:48:00
【问题描述】：

假设客户在索引页面上打开您的nuxt.js 网站。从那里，他们进行身份验证（您为此使用了@nuxtjs/auth-next）。然后他们移动到只有经过身份验证的用户才能看到的安全页面。这个安全页面是一个 .vue 文件，位于您的“pages”文件夹中，带有middleware: ["auth"]。

现在，这个页面真的安全吗？ ~~我的意思是，恶意用户不能在没有经过身份验证的情况下修改页面并访问它吗？因为这个场景中的“安全”只在客户端实现对吧？~~ [编辑]

【问题讨论】：

one way to display secure data on a page is to access it using asyncData from a secure backend API 你从哪里得到这个？即使使用target: 'server'，也不确定如何更安全，因为一旦水合完成，这个钩子将是客户端的。
asyncData 钩子也是客户端的，是的，但是如果您使用它使用 API 获取服务器上的数据，您可以在发送数据之前检查客户端是否有效。
如果您只想保护特定的页面子集，请创建conditional in your middleware。如果它是一个安全页面（包含敏感数据并且需要来自后端的有效 JWT），那么中间件将需要到达后端进行验证。如果它是一个可公开访问的页面，您甚至不需要打扰后端。 Nuxt（服务器端）的后端实际上不需要处理任何特定的事情，因为它无论如何都是客户端导航。至少，我看不到服务器端中间件可以在这里实现什么。
因为我们没有为这里的 10k 人构建所有安全页面的生成版本。作为 Facebook，我们将在该人连接时获取实际数据，因此仅在客户端。当然，公共页面可以提前生成。另外，当我在下面谈论后端时，我指的是外部后端，例如 Rails、PHP 或 Node.js。当然，你可以使用你的 Nuxt 应用程序作为代理，但 JWT 不应该在同一个 repo 中处理，而是在完全不同的东西上处理。 TDLR：forget Nuxt backend, think regular non-nuxt backend 这里。
抱歉 @kissu 删除了我的 EDIT，但我认为创建一个新问题更合适，因为这与我最初在这里创建的问题不同。

标签： javascript vue.js security nuxt.js nuxt-auth

【解决方案1】：

你的应用程序最后是一个 SPA，如果你想绕过一个带有安全检查的中间件，你可以禁用页面上的 JS。但是，由于没有直接生成内容，因此您将看不到任何内容，因为它不在这里（作为静态文件）。

如果你的应用是同构的（基本上有一个ssr: true），auth 模块仍然会禁止访问这些页面（你可以仔细检查）。

最后，在以下情况下收到关键信息：

您确实有一个有效的 JWT 令牌（在登录后）
您向后端提交 HTTP 查询
后端确认并且令牌有效
后端通过 HTTP 响应为您提供敏感信息

最后，您的客户端代码不需要是安全的。如果有人以某种方式破解您的客户端状态并到达敏感页面，他仍将没有有效的 JWT 令牌，因为验证仍在后端进行。
只有在将正确的凭证发送到后端并让后端验证这些凭证时才能生成的凭证。

【讨论】：

我知道您可以使用serverMiddleware 对客户端首页加载/重新加载执行任何类型的检查。但是当客户端已经使用有效的 JWT 令牌在另一个页面上加载了应用程序并且他们请求安全页面时，您可以在将页面 .js 文件发送到客户端之前检查服务器上的 JWT 有效性吗？据我所知，您不能，并且此检查是在客户端进行的。但是我错过了什么吗？
@Kay 实际上，JWT 的目的正是在客户端提供一些后端的检查（我们的用例在这里）。你所有的电话都应该用它包裹起来。如果它无效或丢失，您应该注销用户（如果我没记错，该模块会为您完成）。后端会在第一次调用时抛出错误，并带有无效的 JWT。
你如何在服务器上进行这些检查？
@Kay 当前端将在路由上使用其令牌到达后端时，后端将使用某些数据库检查 JWT 的有效性并给你一个真/假。
好的，非常感谢@kissu 抽出宝贵时间。对最后一个问题感兴趣的朋友，也许我会得到一个准确的答案here。

【解决方案2】：

现在，这个页面真的安全吗？

如果客户端提供了有效的访问令牌，则从请求中提供受保护的内容。受保护的内容在运行时提供。

因为这个场景中的“安全”只在客户端实现对吧？

安全性不仅在客户端实现。前提是：访问令牌已通过身份验证服务器的身份验证流程安全获得。如果这听起来不清楚，我建议阅读有关身份验证流程的更多信息。 Auth0 对不同的流程有一些很好的文档。 https://auth0.com/docs/authorization/flows

那么，仅向经过身份验证的用户显示复杂页面的最佳方式是什么？

内容在运行时提供。服务器端或客户端。这里有一些 Nuxt 的设置指南。这是我从列表中找到的第一个 (Auth0)。 https://auth.nuxtjs.org/providers/auth0

我不知道这些指南的更新程度，但身份验证服务提供商往往会自行更新指南。

【讨论】：

正如我在其他回复中评论的那样：让我尝试重新表述我的问题。让我们想象一下这种情况： - 您的客户首先将您的网站加载到索引页面（/index）上； - 他们使用 nuxt/auth 登录并获得有效的 JWT 令牌； - 他们导航到只有经过身份验证的用户才能看到的安全页面。在这最后一步中，客户端通过使用有效的 JWT 令牌请求从服务器获取安全页面块（.js 文件）。现在我的问题是：在服务器上提供安全页面块之前是否进行了某种验证？
如果是，假设我必须自己实现这个验证（没有 auth 模块），我应该把它放在哪里？我的意思是在 Nuxt 中的哪个选项或哪个选项？请不要说中间件，因为它们在客户端或服务器端运行，但仅在第一页加载时运行。所以对我来说，任何客户端都是不安全的，并且可以被有经验的用户篡改。
@Kay 基本上是“如何处理后端和前端 SPA 之间的安全调用”的首选，所以是的，不用担心它在任何方面都不是 hacky 和不安全的。否则，它不会是当今 SPA 使用中最常用的身份验证方法之一。唯一的事情是，如果您想删除对某人的访问权限，您可能需要等待令牌过期。但这不是一个大问题，如果您将access_token 修复为 5 分钟左右。如果您的令牌被撤销，后端也可以在您的下一个客户端导航中使其无效。阅读一些文档以了解主要概念。
"在服务器上提供安全页面块之前是否进行了某种验证" 这听起来像是一个静态编译的 JS 文件？那么我会在没有 100% 确定的情况下说不。受保护的内容发生在运行时。如果匿名用户导航到安全页面，那么我们会将用户扔到登录页面或其他地方。如果用户通过身份验证。然后在运行时请求受保护的内容。
我没有看到 Nuxt 阻止访问“特权”路由源文件。鉴于我知道（或猜测）哈希文件名，我可以从 Nuxt 服务器下载 js 块而无需经过身份验证。