Чеклист безопасности React приложения

Обзор популярных уязвимостей фронтенд приложений в контексте React:

🔴Cross-Site Scripting (XSS). Атака заключающаяся в внедрении вредоносного кода, который вызывается на странице у пользователя. Связано это с тем, что выводимые данные не обрабатывается должным образом. React хорошо защищен от XSS атак, однако все равно уязвим из-за неправильного использования функций, сторонних библиотек или нестандартных реализаций. При использовании dangerouslySetInnerHTML санитизируйте передаваемые данные, например, через библиотеку dompurify:

import DOMPurify from 'dompurify';

const comment = '<script>alert("XSS Attack!")</script>Great article!';

const UserComments = () => {
  return (
    <div>
      <li dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment) }} />
    </div>
  );
}; 

🔴Content Security Policy (CSP) заголовок. Использование CSP заголовка защитит от большинства веб-атак, включая XSS. CSP заголовок позволяет указать какие ресурсы могут загружаться и исполняться браузером. Позволяет работать в Report-Only режиме, позволяя только собирать обнаруженные проблемы, не применяя правила. Пример:

header Content-Security-Policy "script-src 'self' 'unsafe-inline' https://maps.googleapis.com https://www.googletagmanager.com;" 

🔴Cross-Site Request Forgery (CSRF). При CSRF атаке злоумышленник обманом заставляет пользователя отправить запрос, который он не собирался делать. Обычно это делается путем внедрения вредоносных запросов на сайт или e-mail, с которым взаимодействует пользователь. Для противодействия CSRF атаке используются токены, которые генерируются на странице и передаются вместе с запросом. Пример:

function CSRFProtectedForm() {
  const [csrfToken, setCsrfToken] = useState('');

  {/* Запрос CSRF токена */}

  return (
    <form onSubmit={submitForm}>
      <input type="hidden" name="_csrf" value={csrfToken} />
      {/* --snip-- */}
      <button type="submit">Submit</button>
    </form>
  );
}

🔴Переменные окружения. Используйте env переменные и не храните их значения в коде в репозитории.

https://www.trevorlasn.com/blog/frontend-security-checklist