Laravel Vue SPA вход

Question

Я только что создал логин Vue + Laravel SPA, но не уверен, достаточно ли он безопасен.Я новичок в VUE:)

Я использую JWT Auth.Когда пользователь вводит учетные данные и отправляет форму, Auth на стороне Laravel возвращает модель пользователя с токеном.Этот пользователь хранится в локальном хранилище.В моем маршрутизаторе Vue я создал промежуточное программное обеспечение, которое запускается перед изменением каждого вида.Это работает хорошо, но в базе данных нет фактического токена, связанного с этим пользователем.Когда я вручную меняю токен в хранилище, я все равно передаю промежуточное ПО, потому что токен больше не проверяется.Он просто проверяет, существует ли в локальном хранилище ... Должен ли я хранить токен в БД и проверять его при каждом изменении представления?Или ... ??

Answer 1

Не похоже, что это безопасно, нет:)

Я никогда не использовал Laravel, поэтому я не могу говорить об этом конкретно, но могу объяснить, как этот процесс должен работать.

На вашем сервере у вас должна быть логика промежуточного уровня или какая-то логика, которая считывает токен и проверяет его целостность.Сам токен представляет собой просто строку Base64 с тремя компонентами

1. Заголовок
2. Полезная нагрузка (фактические данные)
3. Подпись

Еслиу вас есть токен, его легко прочитать, потому что это просто строка Base64.Поэтому недостаточно просто прочитать это, вам нужно убедиться, что подпись верна.

Когда вы создаете токен JWT, вы делаете это с секретом, когда есть запрос к вашему серверу.Сервер должен проверить подпись, чтобы убедиться, что это действительный токен.Если у вас нет секрета, вы не можете проверить подпись.Только у вас должен быть секрет.

Это останавливает "меня как нападающего", чтобы отправить токен с некоторой фальшивой полезной нагрузкой.Проверяя подпись, вы проверяете, что это созданный вами токен, а не какой-то фальшивый токен, который я отправляю на ваш сайт.

Вам также не следует хранить этот токен в локальном хранилище.Локальное хранилище никогда не должно содержать информацию, такую ​​как токен или пароль, потому что это просто словарь / карта, доступная для всех.Поэтому я могу создать веб-сайт, который читает локальное хранилище, получить созданный вами токен, и, поскольку это ваш токен с правильной подписью, я теперь могу отправлять запросы на ваш сайт.

Я бы рекомендовал хранить токен JWT.в файле cookie httpOnly по протоколу https (опция safe: true в большинстве сред).Браузер не может читать файлы cookie HTTPOnly, только сервер.

При отправке запросов из приложения VueJS на сервер, например при сохранении записи в блоге, сервер должен

1. Никогда не доверятьполезная нагрузка в JWT вслепую.
2. Никогда не доверяйте информации пользователя из приложения VueJS.
3. Всегда проверяйте пользователя на стороне сервера (проверяя подпись токена в вашем примере)

Например,

methods: {
  saveBlogPost() {
    axios.post('/api/save', {
      title: 'My blog title'
      userId: 'bergur'
    })
  }
}

Ваш сервер никогда не должен никогда читать этот идентификатор пользователя, отправленный из приложения VueJS.Посредник JWT должен проверить JWT, проверить его целостность и затем использовать информацию из полезной нагрузки.

Редактировать: я ответил на аналогичный пост о защите приложений VueJS.Вы можете найти его здесь: VueJS Secure с Auth0 - как это безопасно?

В основном: хорошо хранить информацию на клиенте, которая помогает сделать пользовательский интерфейс понятным, но когдавыполняя реальную работу, такую ​​как сохранение в базе данных или извлечение некоторых личных данных, сервер должен всегда проверять пользователя.