Что такое XSS и как защититься от него во фронтенде?

XSS (Cross-Site Scripting) — атака, при которой злоумышленник внедряет свой JavaScript на страницу, и он выполняется от имени сайта в браузере жертвы.

Виды

• Хранимая (stored) — вредоносный код сохранён на сервере (комментарий, профиль) и отдаётся всем.
• Отражённая (reflected) — код приходит в параметрах URL и сразу попадает в ответ.
• DOM-based — страница сама вставляет данные из URL или postMessage в DOM небезопасным способом.

Чем опасна

Скрипт читает cookie без HttpOnly, токены из localStorage, действует от имени пользователя и подменяет интерфейс.

Защита

• Не вставлять пользовательские данные как HTML: использовать textContent вместо innerHTML.
• Фреймворки экранируют вывод сами: опасны dangerouslySetInnerHTML в React и v-html во Vue.
• Если HTML необходим, чистить его санитайзером, например DOMPurify.
• Настроить Content Security Policy, чтобы браузер блокировал чужие и inline-скрипты.
• Ставить HttpOnly на cookie с сессией.

// опасно
el.innerHTML = userComment;
// безопасно
el.textContent = userComment;

Коротко для собеседования

XSS — выполнение чужого скрипта на вашей странице. Защита многоуровневая: экранирование, санитизация, CSP и HttpOnly-cookie.