Що таке XSS (Cross-Site Scripting)?

Повне пояснення

Що це і навіщо

XSS (Cross‑Site Scripting) – тип веб‑атак, що дозволяє зловмиснику виконувати скрипти у контексті браузера користувача. Це використовується для крадіжки даних, підробки UI або розповсюдження шкідливого коду.

Ключові принципи

• Injection – вставка скрипту в HTML‑вміст.
• Execution context – код виконується з правами поточної сторінки.
• DOM manipulation – зміну структури DOM, доступу до куків та localStorage.

Як працює

1. Користувач вводить дані (наприклад, у форму коментаря).
2. Сервер повертає ці дані без escaping.
3. Браузер інтерпретує вставлений скрипт як частину DOM.
4. Скрипт виконується, отримуючи доступ до сесійних даних.

Практика і реалізація (JavaScript/TypeScript)

// Приклад небезпечного рендеру
const comment = '<script>alert("XSS")</script>';
document.getElementById('comments').innerHTML = comment; // XSS

// Захищений рендер за допомогою textContent
const safeComment = document.createElement('div');
safeComment.textContent = comment;
document.getElementById('comments').appendChild(safeComment);

Тестування

• Unit: перевірка функцій escaping за допомогою Jest.

import { escapeHtml } from './utils';
expect(escapeHtml('<script>')).toBe('&lt;script&gt;');

• Integration: Cypress тест, що перевіряє відсутність виконання скриптів у DOM.

Безпека і приватність

• Content‑Security‑Policy: script-src 'self' обмежує джерела скриптів.
• HTTPOnly cookies: запобігає доступу до куків через JavaScript.
• Sanitization libraries: DOMPurify, xss-filters.

Альтернативи і порівняння

• Server‑side rendering з escaping vs. Client‑side rendering без sanitization.
• React: JSX автоматично escaping, але dangerouslySetInnerHTML потребує ручного очищення.

Часті помилки

1. Використання innerHTML без escaping.
2. Неправильна CSP, що дозволяє inline‑скрипти.
3. Залишення куків без HTTPOnly.
4. Необхідність очищати дані на сервері, а не лише в клієнті.

Cheatsheet

• escapeHtml(str) → <script>.
• CSP header: Content-Security-Policy: default-src 'self'; script-src 'self'.
• React: dangerouslySetInnerHTML={{ __html: safeHtml }} після очищення.

Follow‑up питання

• Як працює CSP разом з nonce?
• Які ризики пов’язані з використанням eval у контексті XSS?