【问题标题】:VueJS Secure with Auth0 - How is it secure?VueJS Secure with Auth0 - 它如何安全?
【发布时间】:2019-10-11 05:59:29
【问题描述】:

我缺少对保护 JavaScript 应用程序的某种(很可能是简单的)基本理解,例如使用 VueJS 框架和像 Auth0(或任何其他 OAuth 服务器/服务)这样的服务。

1) 如果您创建一个带有需要身份验证的路由的 SPA VueJS 应用程序,那么是什么阻止了用户查看您的捆绑代码并查看该路由后面的视图/模板而无需登录?

2) 如果您创建一个 VueJS 应用程序来验证用户身份并在组件中设置一些变量,例如 isLoggedIn = true 或 isAdminUser = true,那么是什么阻止了用户操作 DOM 并将这些值强制为 true?

您的所有 JavaScript 代码都暴露给客户端,那么如果您的代码/内容可以在代码级别进行探索,那么它的实际安全性如何?

【问题讨论】:

  • 您的视图/模板中的任何内容都不应保密。他们使用的数据可以是,但如果是这种情况,则不应将其与应用安装一起打包 - 它应该来自用户,或者在用户对其进行身份验证后来自您的 API。

标签: javascript security vue.js auth0


【解决方案1】:

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

例如:

  1. 您有一个“获取机密文档”按钮,其中包含路径 /api/sendsecret 后面的 axios 请求
  2. 在您的 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'
}

服务器永远不应该读取该用户 ID 并盲目使用它。它应该在请求中使用实际用户。

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

关于你的最终分数:

你所有的 JavaScript 代码都暴露给客户端,那么如何 如果可以在代码上进行探索,您的代码/内容实际上是安全的 等级?

你是对的,它不安全。客户端应该有变量来帮助 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 组件(敏感数据 + 视觉)?
  • 我不确定我是否完全理解这些问题,你能给我举个例子吗?
猜你喜欢
  • 2018-11-09
  • 2015-05-30
  • 2018-08-31
  • 2015-03-28
  • 2021-02-16
  • 2022-11-09
  • 1970-01-01
  • 2020-04-11
  • 2017-10-01
相关资源
最近更新 更多