Question

我缺少某种（最可能是最简单的）基本知识来保护JavaScript应用程序的安全，例如使用VueJS框架和Auth0（或任何其他OAuth服务器/服务）之类的服务。

1）如果您使用需要身份验证的路由创建SPA VueJS应用，是什么导致用户无需登录即可查看捆绑的代码并查看该路由背后的视图/模板？

2）如果您创建可对用户进行身份验证的VueJS应用，并在组件中将某些变量设置为isLoggedIn = true或isAdminUser = true，那么阻止用户操纵DOM并将这些值强制为true的原因是什么？

您所有的JavaScript代码都已公开给客户端，因此，如果可以在代码级进行浏览，那么您的任何代码/内容实际上如何安全？

Answer 1

1）您正确理解，没有任何东西可以阻止他。这就是为什么您总是在服务器端执行所有这些操作的原因。浏览器/ VueJS中的代码仅使界面有意义，就像隐藏按钮一样，但是服务器代码应始终进行实际检查。

例如：

您有一个“获取机密文档”按钮，该按钮在/ api / sendsecret路径后面具有axios请求
在您的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之类的变量来使该界面有意义，但是服务器代码应始终针对实际的身份验证或授权。

另一个例子。假设您要保存一篇博客文章

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)
  }
})

关于您的最终成绩：

您所有的JavaScript代码都已公开给客户端，因此如何如果可以在代码上进行浏览，则您的代码/内容实际上是安全的水平？

您是正确的，它并不安全。客户端应具有有助于使UI有意义的变量，但服务器不应信任它，并始终检查请求中的实际用户。客户端代码也不应包含密码或令牌（例如，将JSONWebToken保存在本地存储中）。

总是服务器的工作来检查请求是否有效。您可以在Auth0网站上看到带有Express的NodeJS的示例。 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。这是一个快速的中间件，用于检查请求上的用户访问令牌是否有效。

带有Auth0的VueJS安全-如何安全？

1 个答案: