Как решить данные вопросы по реакту?

Question

[Егор Астрейко]

Всем привет.
Просьба сильно не критиковать (так как могу писать бред, но я бы хотел в этом разобраться ) и помочь советом или литературой.

Вопрос 1: Где хранить данные полученные от сервера после авторизации (id, access_token(это jwt, который живет 3 минуты), refresh_token(это крипто ключ, который живет пока не авторизуешься или не сделаешь refresh access_token-а)),
что бы не было такого: пользователь обновил страницу и авторизация пропала, так как данные с стейта свалили.
Сейчас у меня так:
Полученные данные после авторизации, записываю в authReducer и при помощи redux-persist сохраняю в local storage, но меня смущает что это все видимо, так как вк ведь тоже на react-е, но при этом в local storage нет токенов, нет данных пользователя (данные находятся в объекте vk).

Вопрос 2: Как разрешить указывать уникальный url для страницы профиля, на сервере используется Mongo и у нее id "5d314338655a4b0e64813823" и адрес localhost:3000/account/5d314338655a4b0e64813823 не реально быстро запомнить.
Сейчас у меня так:
В бд есть таблица "page" которая содержит два поля (title, url) в title содержится id пользователя (если он не изменял адрес), новый адрес страницы профиля (если он изменял адрес) и адреса страниц которые нельзя использовать, а url записывается id пользователя(которому принадлежит адрес) и url страниц, название которых нельзя использовать.
На реакте, есть роут который перенаправляет запрос (localhost:3000/account/:id) в контейнерную компоненту аккаунта из которой отправляется запрос на сервер с этим id, проверяется есть ли вообще этот пользователь или такой адрес. Мне кажется не правильным при каждом переходи на страницу аккаунта делать такой запрос.

Что бы хотел получить в ответ на вопросы:
1) Правильно ли у меня сейчас сделано.
2) Если не правильно, то как сделать правильно.
3) Литературу, которая бы помогла приблизиться к вк по реализации этого вопроса.
4) Так же очень сильно хотелось бы узнать, где можно найти литературу, которая бы помогла сделать приложение максимально безопасным.

Заранее спасибо.

Answer 1

[Антон Спирин]

так как вк ведь тоже на react-е

VK написан не на React. Там может и есть новые React модули, но весь основной функционал написан на ванильном JS.

но при этом в local storage нет токенов

VK на web-клиенте хранят токены в HTTP Only Cookie. А ключ для запросов к бэкенду возвращают в коде авторизованной страницы.

нет данных пользователя

Что касается данных пользователя, то хранить их в localStorage нет особого смысла. Их можно запрашивать при инициализации приложения.

Где хранить данные полученные от сервера после авторизации

Ваше решение должно учитывать требования к безопасности конкретного приложения. Безопасней всего ничего нигде не хранить. На втором месте использование HTTP Only Cookie.

Как разрешить указывать уникальный url для страницы профиля

Добавить уникальное поле, например, userName.

Что бы хотел получить в ответ на вопросы:
1) Правильно ли у меня сейчас сделано.
2) Если не правильно, то как сделать правильно.
3) Литературу, которая бы помогла приблизиться к вк по реализации этого вопроса.
4) Так же очень сильно хотелось бы узнать, где можно найти литературу, которая бы помогла сделать приложение максимально безопасным.

1) Ну в теории данные легко украсть, например, с помощью, браузерного расширения, вредоносной библиотеки или если будет дыра, позволяющая выполнить XSS. Если не ошибаюсь, то простые XSS атаки вроде:

https://site.net/?name=<script>alert(document.cookie)</script>

давно не работают.
2) Сложный вопрос и у разных разработчиков на него разные ответы. Изучайте чужой опыт и обсуждения.
3) Тут разве ждать когда разработчики VK решат написать об этом статью или рассказать о своем опыте на конференции. Еще вы можете самостоятельно заняться реверс инжинирингом их клиента или поискать статьи/посты людей которые им занимались.
4) Начните с чек-листа по безопасности web-приложения.

Comments

[Егор Астрейко]

Правильно ли я понял, что вк не spa, а ssr ?
И как можно реализовать "Безопасней всего ничего нигде не хранить. " ?

[Антон Спирин]

Егор Грубов, да, вы можете в этом сами убедиться если посмотрите ответ сервера или откроете исходный код страницы.
По поводу "нигде не хранить" вам этот вариант не подойдет. Попробуйте реализовать хранение по примеру VK в HTTP Only Cookies.