Веб-приложения на JavaScript часто становятся целью атак не из-за “дырявого языка”, а из-за ошибок в обработке данных и логике авторизации. Две самые частые угрозы — XSS и CSRF. Разберёмся, что это и как защититься на практике.
XSS (Cross-Site Scripting) — это внедрение вредоносного JavaScript-кода на страницу.
Обычно атака происходит, когда приложение выводит пользовательский ввод без экранирования. Например, комментарий, имя профиля или поле поиска могут стать точкой входа.
Чем опасен XSS:
- кража cookies и токенов
- подмена интерфейса
- выполнение действий от имени пользователя
- перенаправление на фишинговые страницы
Как защититься от XSS:
- Экранируйте данные при выводе — не вставляйте пользовательский ввод в HTML “как есть”
- Используйте безопасные методы DOM: textContent, setAttribute, а не innerHTML без необходимости
- Включите Content Security Policy (CSP) — она ограничивает выполнение сторонних скриптов
- Проверяйте и очищайте ввод на клиенте и сервере
- HttpOnly cookies — даже если XSS случится, злоумышленник не сможет прочитать такие cookies через JS
CSRF (Cross-Site Request Forgery) — это атака, при которой злоумышленник заставляет браузер авторизованного пользователя отправить запрос на сайт без его ведома.
Например, пользователь вошёл в интернет-банк, а затем открыл вредоносный сайт, который отправил запрос на перевод средств.
Чем опасен CSRF:
- изменение пароля
- отправка платежей
- смена email
- выполнение административных действий
Как защититься от CSRF:
- CSRF-токены — уникальные токены в формах и запросах, которые сервер проверяет
- SameSite cookies — ограничивают автоматическую отправку cookies между сайтами
- Проверка Origin и Referer для критичных запросов
- Запрет на state-changing операции через GET — изменение данных должно идти через POST/PUT/DELETE
- Повторная аутентификация для чувствительных действий
⚙️ Что важно для фронтенд-разработчика:
- не доверять данным от пользователя никогда
- избегать небезопасной вставки HTML
- понимать, как браузер работает с cookies, заголовками и политиками безопасности
- помнить: клиентская валидация полезна для UX, но безопасность обеспечивает сервер
Короткий вывод:
XSS — это про выполнение чужого кода в вашем интерфейсе.
CSRF — это про выполнение чужих действий от имени пользователя.
Надёжная защита строится не одной “магической настройкой”, а комбинацией: экранирование, CSP, токены, SameSite, безопасная серверная логика 🛡️
Подборку полезных каналов про IT стоит посмотреть — там регулярно публикуют практику, разборы уязвимостей и советы по безопасной разработке.