Этап 11 из 19 · ≈ 4 ч

Безопасность фронтенда

Основа с Junior

XSS, CSRF, CORS, хранение токенов и Content Security Policy.

Код фронтенда открыт любому пользователю, поэтому фронтенд не может быть местом проверки прав — это делает сервер. Задача фронтенда — не открыть дыру в браузере пользователя.

Основные угрозы

  • XSS — внедрение чужого скрипта через данные. Защита: экранирование вывода (React делает это сам), осторожность с innerHTML и dangerouslySetInnerHTML, санитизация HTML (DOMPurify), CSP.
  • CSRF — чужой сайт отправляет запрос с cookies пользователя. Защита: SameSite у cookies, CSRF-токены, проверка Origin.
  • CORS — механизм, который ослабляет ограничение одного источника для доверенных доменов; ошибка CORS в консоли — это настройка сервера.

Токены и сессии

где хранитьXSSCSRF
localStorageукрадут скриптомне уязвим
cookie HttpOnly; Secure; SameSiteскрипт не прочитаетнужна защита SameSite или токеном

Чаще рекомендуют cookie с HttpOnly и короткоживущий токен доступа.

Ещё

  • Content Security Policy ограничивает источники скриптов.
  • Зависимости — регулярное обновление и аудит.
  • Не класть секреты в код фронтенда и переменные сборки.

Критерии освоения

Junior ≈ 4 ч

  • Объясняет XSS и CSRF и не вставляет пользовательские данные через innerHTML
  • Не хранит секреты в коде фронтенда

Практика. Найти и исправить XSS в учебном приложении с выводом комментариев.

Middle ≈ 6 ч

  • Выбирает хранение токенов — HttpOnly-cookie с SameSite против localStorage — с обоснованием
  • Настраивает Content Security Policy и санитизирует HTML при необходимости
  • Объясняет CORS и preflight

Практика. Настроить CSP для своего приложения без unsafe-inline и перенести токен из localStorage в HttpOnly-cookie.

Senior ≈ 4 ч

  • Проводит ревью безопасности фронтенда и зависимостей и вводит правила для команды

Практика. Провести аудит безопасности фронтенда (XSS, CSP, токены, зависимости) и оформить план исправлений.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Что такое XSS и как от неё защищаться?Junior

XSS — злоумышленник заставляет сайт выполнить его JavaScript в браузере другого пользователя: скрипт работает с правами сайта — читает данные страницы, отправляет запросы от имени жертвы.

Полный разбор
Что такое CSRF и как он связан с CORS?Middle

CSRF — чужой сайт заставляет браузер жертвы отправить запрос на ваш сайт; браузер сам приложит cookie, и запрос выполнится от имени пользователя. CORS — правила, когда скрипт с одного домена может читать ответы другого.

Полный разбор
Что такое cookies? Чем они отличаются от localStorage и sessionStorage?Junior

Cookies — небольшие данные, которые браузер отправляет на сервер с каждым запросом (сессия, настройки); localStorage и sessionStorage — хранилища, доступные только скриптам страницы.

Полный разбор
Что верно про использование JWT для аутентификации?Middle

JWT самодостаточен — сервер проверяет подпись без базы. Отсюда главный минус: его нельзя отозвать до истечения. Решение — короткий access-токен (минуты) и отзываемый refresh, хранимый на сервере.

Полный разбор
Чем аутентификация отличается от авторизации?Junior

Идентификация — кто вы (логин), аутентификация — докажите это (пароль, код), авторизация — что вам разрешено делать.

Полный разбор
Как React защищает от XSS при выводе строк и когда эта защита не работает?Junior

React экранирует строки, вставленные в JSX: {comment} с текстом <script> покажется как текст, а не выполнится. Защита не работает: в dangerouslySetInnerHTML (HTML вставляется как есть — нужна санитизация, например DOMPurify), в href со схемой javascript: из…

Полный разбор
Как правильно хранить пароли пользователей?Junior

Не хранить пароль вовсе — только результат медленной функции с солью: argon2id, bcrypt или scrypt. При входе считаем то же самое и сравниваем.

Полный разбор
Чем хеширование отличается от шифрования и кодирования?Junior

Кодирование (Base64, URL-кодирование) — смена формата, обратимо без секрета. Шифрование — обратимо только с ключом. Хеширование — необратимый отпечаток фиксированной длины.

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования