Реакт безопасности на государственное управление

Question

Допустим, у меня есть этот код:

const UserProfile: React.FC<RouteComponentProps> = (props) => {

    const { isAdmin} = useContext(GlobalContext);

    if (isAdmin()) {
      return <CriticalFeature/>;
    } else {
    return <NonCriticalFeature/>;
    }

}

export default UserProfile;

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

как вы справляетесь эта ситуация?

Answer 1

Если вы разрешили браузеру извлекать код, который обрабатывает / обрабатывает CriticalFeature, игра окончена. Пользователь может обработать или иным образом проанализировать этот код.

Единственный способ избежать этого - никогда не передавать код CriticalFeature неавторизованному пользователю. Для этого URL-адрес страницы профиля администратора должен отличаться от URL-адреса пользователя без прав администратора, а код для CriticalFeature должен находиться в отдельном пакете, который предоставляется только авторизованным пользователям.

IDK если вам нужен этот уровень разделения, хотя; проблеск интерфейса администратора не позволит неавторизованному пользователю делать все, что требует прав администратора. Только если вам нужно внимательно следить за набором функций, доступных для администраторов, вы можете реализовать вышеуказанное.

Answer 2

Это правда, что кто-то может изменить состояние и отобразить компонент CriticalFeature, но в этом случае рекомендуется использовать аутентифицированные запросы к бэкэнду.

Таким образом, даже если кто-то может отобразить компонент, он не может олицетворять профиль администратора на сервере.

Просто убедитесь, что у вас установлена ​​правильная аутентификация