Безопасность ReactJs

Question

Я только начал изучать авторизацию и аутентификацию по реакции, и я пишу это после завершения моей первой простой системы входа в систему с использованием JWT, поскольку большинство из вас знает, что вы храните токен в браузере, а затем сравниваете его с сохраненнымтокены в вашем бэкэнде теперь, когда проверка действительно выполнена, я установил Authenticated Boolean на true и получил доступ к веб-сайту, после завершения этой простой системы я проверил инструменты реагирования и обнаружил, что могу просто изменить booleanна true и обойти все аутентификационные работы!

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

Так может ли кто-нибудь порекомендовать платный или бесплатный курс или учебное пособие, чтобы узнать больше о безопасности и аутентификации?

Answer 1

Поскольку приложения React являются одностраничными (если вы выполняете рендеринг на стороне клиента), все приложение (все файлы html / css / js) отправляется клиенту в первоначальном запросе.Обычно аутентификация работает так, как вы указали, где статус аутентификации пользователя хранится в состоянии приложения.Это, конечно, означает, что кто-то, знакомый с веб-приложениями, сможет установить для переменной isAuthenticated значение true.Если у вас есть конфиденциальная информация, хранящаяся статически (записанная буквально в html / css / js), тогда это будет проблемой.

Причина, по которой этот сценарий обычно не рассматривается как проблема, заключается в том, что приложения React обычно не содержат никакихданные.И данные, как правило, чувствительные вещи в приложении.Данные могут быть привязаны к пользователю и не должны предоставляться тем, кто не прошел надлежащую аутентификацию или не имеет необходимых разрешений.Данные хранятся на сервере, который может контролировать то, что он отправляет (проверяя проверенные JWT) через API для приложения.Таким образом, ваш сервер должен проверять действительный JWT по любому запросу, который возвращает конфиденциальную информацию - как правило, все запросы, за исключением запросов самого приложения и запросов на аутентификацию.

Короче говоря: Да, кто-то может получить доступ к «аутентифицированному»на стороне вашего приложения, но любые запросы к API данных для приложения в этот момент будут (или должны) быть заблокированы как несанкционированные (то есть статус 401).Таким образом, они могут видеть, как приложение выглядит как для аутентифицированного пользователя, но не сможет видеть конфиденциальную информацию.

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

Если вы хотите заблокировать возможность неаутентифицированного пользователя получить доступ к аутентифицированномуна стороне вашего приложения вы можете сделать страницу входа своим собственным приложением или документом HTML и отправлять только полную / аутентифицированную версию приложения аутентифицированным пользователям.