В настоящее время я работаю над авторизацией в проекте стека MERN. Я создал внутренний API, который проверяет JWT, который имеет пользователь при попытке отобразить сайт.
Я покажу некоторую подробную информацию здесь, в «Псевдокоде»:
КАК СКАЗАНО РАНЬШЕ, ЭТО НЕ НАСТОЯЩИЙ СИНТАКСИС, ПРОСТО ВЫ МОЖЕТЕ ПОНЯТЬ, ЧЕГО Я ХОЧУ ДОСТИЖАТЬ.
Backend:
server(/auth){
validateJWT
res.json("Success")
on error res.json("Unauthorized")
}
Frontend:
Useeffect({
req.server("/auth")
if (response === "Success"){
render Page
}
else{
redirect to login
}
})
Таким образом, возможно, я использовал ловушку useEffect реакции, чтобы проверить, есть ли у пользователя действительный JWT, а затем визуализировать страницу, если да, и если она недействительна. Моя проблема в том, что я хочу убедиться и понять, сохранено ли это. Есть ли способы редактировать файлы js и перезагрузить компонент с отредактированными файлами js? Например, предположим, что у кого-то нет JWT, и он просто редактирует код следующим образом:
Useeffect({
req.server("/auth")
if (response === "Unauthorized"){
render Page
}
else{
redirect to login
}
это теоретически сработает? и если да, то как вообще можно защитить, например, панель администратора внешнего интерфейса?
🤔 А знаете ли вы, что...
С JavaScript можно создавать интерактивные формы и проверять введенные пользователем данные.
Безопасность не является обязанностью фронтенда. Это ответственность бэкенда. Твой
if (response === "Success")
чек не имеет никакой ценности с точки зрения безопасности. Пользователи могут (и злонамеренные пользователи будут) редактировать файлы JS так, как захотят.
Таким образом, чтобы защитить, скажем, панель администратора, вам необходимо реализовать правильную авторизацию на внутренней стороне и гарантировать, что сервер не предоставляет ограниченный контент неавторизованным людям.
Причина, по которой вы выполняете if (response === "Success") проверки на стороне интерфейса, — это пользовательский опыт. Это только для того, чтобы вы могли отображать красивую графику для пользователей. В противном случае им пришлось бы читать необработанные файлы JSON или XML. Не круто. Но это не имеет никакого отношения к безопасности.
Например, предположим, что у кого-то нет JWT, и он просто редактирует код следующим образом:
Если у вас нет JWT, сервер не должен обслуживать данные с ограниченным доступом. (Злонамеренный) пользователь все равно может обойти if (response === "Success") проверку и попытаться render Page, но откуда он возьмет данные? Например, вы можете визуализировать страницу администратора, но какая от нее польза без данных? Это просто пустая графика. Это как красивая обложка книги с пустыми страницами внутри.
При этом, если сервер обслуживает ограниченные данные без JWT, то возникает огромная утечка безопасности. Но опять же: это проблема и ответственность бэкэнда.
Чтобы избежать описанного сценария, вы можете отфильтровать текущий маршрут из приложения React на основе ответа, полученного от внутреннего API. Благодаря этому методу никто никогда не узнает о существовании этого маршрута. Если они знают, они не смогут изменить в JavaScript.
Более того, React Js не может отслеживать, когда мы вносим изменения в загруженные файлы JavaScipt (на вкладках «Источник»).