Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Чеклист безопасности 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
89 · 3.4K ·