Безопасность: XSS, CSRF, CORS
Same-origin policy и 4 атаки, которые должен знать каждый фронтенд-разработчик.
Обновлено
Зачем это знать фронтенд-разработчику
Большинство веб-атак используют браузер и фронтенд-код. Не обязательно быть экспертом по безопасности, но нужно знать 4 главные проблемы и способы защиты от них.
Same-origin policy
Базовое правило браузера: скрипт с одного origin не может читать ответы с другого origin. Без него любой открытый сайт мог бы прочитать вашу почту из соседней вкладки.
4 атаки, которые нужно знать
| Атака | Что происходит | Защита |
|---|---|---|
| XSS | злоумышленник запускает JS на вашей странице (через неотфильтрованный ввод) | экранирование при выводе, никакого innerHTML с данными пользователя, CSP, cookie с HttpOnly |
| CSRF | другой сайт отправляет запрос от вашего имени, используя ваши cookie | SameSite=Lax, CSRF-токен, проверка Origin (Next делает это для Server Actions) |
| Clickjacking | ваш сайт помещают в невидимый iframe, и пользователь кликает, не зная об этом | X-Frame-Options: DENY / CSP frame-ancestors |
| Утечка секретов | API-ключи попадают в JS-бандл | переменные без NEXT_PUBLIC_, server-only |
XSS подробнее
el.innerHTML = `Привет, ${name}` // ✗ если name = '<img src=x onerror=alert(1)>' → выполнится код
el.textContent = `Привет, ${name}` // ✓ обрабатывается как текстReact автоматически экранирует всё, что вы помещаете в {}. Единственная открытая дверь — dangerouslySetInnerHTML: используйте его только с доверенным HTML (как markdown этих уроков, написанный нами) или очищенным (DOMPurify).
CORS
CORS (Cross-Origin Resource Sharing) — механизм, которым сервер явно разрешает другим origin'ам читать его ответы:
Access-Control-Allow-Origin: https://app.com
Важно понимать:
- CORS не защищает вас — он защищает пользователя. Запрос всё равно уходит; браузер лишь отказывается отдать вам ответ.
- Ошибка CORS исправляется на сервере (или через прокси / Route Handler на том же origin), а не во фронтенде.
Access-Control-Allow-Origin: *не работает вместе с cookie.
HTTPS
Шифрует общение — никто в сети не может прочитать или изменить данные. На Vercel включено автоматически. Без HTTPS cookie с Secure и многие современные API (геолокация, service workers) не работают.
Чек-лист для любого проекта
- Не используйте
innerHTML/dangerouslySetInnerHTMLс вводом пользователя. - Проверяйте данные на сервере, а не только в форме.
- Проверяйте аутентификацию в каждом Server Action и Route Handler.
- Сессионные cookie:
HttpOnly; Secure; SameSite=Lax. - Никаких секретов в переменных
NEXT_PUBLIC_.
Коротко
- Same-origin policy изолирует сайты друг от друга.
- XSS — чужой код на вашей странице; CSRF — запрос от вашего имени.
- CORS решает сервер, и он защищает пользователя.