VueJS Secure с Auth0 - как это безопасно? - PullRequest
Новая
       21

VueJS Secure с Auth0 - как это безопасно?

0 голосов
/ 24 мая 2019

Мне не хватает какого-то (скорее всего, простого) фундаментального понимания защиты приложения JavaScript, такого как использование VueJS-фреймворка и сервиса, такого как Auth0 (или любого другого сервера / службы OAuth).

1) Если вы создаете приложение SPA VueJS с маршрутами, требующими аутентификации, что мешает пользователю просматривать ваш связанный код и просматривать представления / шаблоны за этим маршрутом без необходимости входа в систему?

2) Если вы создаете приложение VueJS, которое аутентифицирует пользователя и задает некоторую переменную в компоненте, например isLoggedIn = true или isAdminUser = true, что мешает пользователю манипулировать DOM и принудительно переводить эти значения в true?

Весь ваш код JavaScript предоставляется клиенту, так как на самом деле любой ваш код / ​​контент действительно безопасен, если его можно исследовать на уровне кода?

1 Ответ

3 голосов
/ 24 мая 2019

1) Вы правильно поняли, его ничто не останавливает. Вот почему вы всегда делаете все это на стороне сервера. Код в браузере / VueJS предназначен только для того, чтобы интерфейс имел смысл, например, для сокрытия кнопки, но код сервера всегда должен выполнять фактическую проверку.

Например:

  1. У вас есть кнопка «Получить секретный документ», в которой есть запрос axios к пути / api / sendsecret
  2. В вашем приложении VueJS вы можете сделать что-то вроде v-if = "user.isAdmin", чтобы показывать кнопку только пользователю.

Ничто не мешает пользователю найти этот путь и просто нажать его вручную с помощью curl или postmaster или любого другого аналогичного инструмента

Вот почему код сервера (например, nodeJS с express) всегда должен выполнять проверку: 

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

Сервер никогда не должен, никогда не должен читать этот идентификатор пользователя и использовать его вслепую. Следует использовать фактического пользователя по запросу. 

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

Относительно ваших окончательных оценок:

Весь ваш JavaScript-код доступен клиенту, так как Ваш код / ​​контент действительно безопасен, если его можно исследовать на коде уровень?

Вы правы, это не безопасно. У клиента должны быть переменные, которые помогают понять пользовательский интерфейс, но сервер никогда не должен доверять ему и всегда проверять фактического пользователя в запросе. Код клиента также никогда не должен содержать пароль или токен (например, сохранение JSONWebToken в локальном хранилище).

Работа сервера всегда проверять, действителен ли запрос. Вы можете увидеть пример на сайте Auth0 для NodeJS с 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 на частном маршруте. Это промежуточное ПО для экспресс-проверки, которое проверяет, является ли токен доступа пользователя по запросу действительным.

...