VueJS Secure with Auth0 - 它是如何安全的？

Question

我缺少对保护 JavaScript 应用程序的某种（很可能是简单的）基本理解，例如使用 VueJS 框架和 Auth0（或任何其他 OAuth server/service 等服务的应用程序).

1) 如果您使用需要身份验证的路由创建 SPA VueJS 应用程序，是什么阻止用户查看您的捆绑代码并在无需登录的情况下看到该路由后面的 views/templates？

2) 如果您创建一个 VueJS 应用程序来验证用户并在组件中设置一些变量，如 isLoggedIn = true 或 isAdminUser = true，是什么阻止用户操纵 DOM 并强制这些值是吗？

您的所有 JavaScript 代码都暴露给客户端，那么如果可以在代码级别探索您的 code/content 中的任何代码，它实际上是如何安全的？

Answer 1

1) 你没看错，没有什么能阻止他。这就是为什么你总是在服务器端做所有这些。 browser/VueJS 中的代码只是为了让界面有意义，比如隐藏一个按钮，但服务器代码应该始终进行实际检查。

例如：

您有一个按钮 "Get secret document"，它在路径 /api/sendsecret
在您的 VueJS 应用程序中，您可以执行 v-if="user.isAdmin" 之类的操作以仅向用户显示按钮。

没有什么可以阻止用户找到该路径并使用 curl 或 postmaster 或任何其他类似工具手动点击它

这就是为什么服务器代码（例如带有 express 的 nodeJS）应该始终进行检查的原因：

app.get('api/sendsecret', (req, res) => {
  if (req.user.isAdmin) {
    res.send('the big secret')
  } else {
    res.sendStatus(401) // Unauthorized
  }
})

2) 同样，没有。你不应该在 VueJS 应用程序中对用户进行身份验证。可以使用一些变量，如 isLoggedIn 或 isAdminUser 来使界面有意义，但服务器代码应始终用于实际的身份验证或授权。

再举个例子。假设您要保存博客 post

axios.post('/api/save', {
  title: 'My Blog Post'
  userId: 'bergur'
}

服务器永远、永远不要读取那个 userId 并盲目地使用它。它应该根据请求使用实际用户。

app.post('api/save', (req, res) => {
  if (req.user.userId === 'bergur') {
    database.saveBlogpost(req.body)
  } else {
    res.sendStatus(401)
  }
})

关于你的最终成绩：

All your JavaScript code is exposed to the client, so how is any of your code/content actually secure if it can be explored on the code level?

你是对的，它不安全。客户端应该有帮助 UI 有意义的变量，但服务器不应该信任它并且总是检查请求的实际用户。客户端代码也不应包含密码或令牌（例如将 JSONWebToken 保存在本地存储中）。

检查请求是否有效始终是服务器的工作。您可以在 Auth0 网站上看到 NodeJS with Express 的示例。 https://auth0.com/docs/quickstart/backend/nodejs/01-authorization

// server.js

// This route doesn't need authentication
app.get('/api/public', function(req, res) {
  res.json({
    message: 'Hello from a public endpoint! You don\'t need to be authenticated to see this.'
  });
});

// This route need authentication
app.get('/api/private', checkJwt, function(req, res) {
  res.json({
    message: 'Hello from a private endpoint! You need to be authenticated to see this.'
  });
});

注意私有路由上的checkJwt。这是一个快速中间件，用于检查请求中的用户访问令牌是否有效。

VueJS Secure with Auth0 - 它是如何安全的？

VueJS Secure with Auth0 - How is it secure?

javascript

security

vue.js

auth0