🛡️ XSS Атака: Полное Руководство

// ✅ БЕЗОПАСНЫЙ код (защита от XSS):

// 1. Для input/textarea полей
outputText.value = result;  // ✅ Безопасно - текст НЕ интерпретируется как HTML

// 2. Для обычных элементов
element.textContent = userInput;  // ✅ Безопасно - только текст

// 3. Для счетчиков
charCount.textContent = inputText.length;  // ✅ Безопасно

// 4. Для создания элементов
const div = document.createElement('div');
div.textContent = userInput;  // ✅ Безопасно
document.body.appendChild(div);

// Простая санитизация
function sanitizeInput(input) {
    if (typeof input !== 'string') return '';

    return input
        .replace(/[<>]/g, '')           // Удаляем < и >
        .replace(/javascript:/gi, '')  // Удаляем javascript:
        .replace(/on\w+=/gi, '')        // Удаляем on* события
        .trim();
}

// Использование библиотеки DOMPurify (рекомендуется)
import DOMPurify from 'dompurify';

const dirty = '<script>alert("XSS")</script><p>Текст</p>';
const clean = DOMPurify.sanitize(dirty);
// Результат: '<p>Текст</p>' (скрипт удален)

function escapeHtml(text) {
    const map = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;',
        '/': '&#x2F;'
    };
    return String(text).replace(/[&<>"'\/]/g, (m) => map[m]);
}

// Пример использования:
const userInput = '<script>alert("XSS")</script>';
const safe = escapeHtml(userInput);
console.log(safe); 
// Результат: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

<!-- Метод 1: Мета-тег -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self'; 
               style-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:;
               connect-src 'self';
               font-src 'self';
               object-src 'none';
               media-src 'self';
               frame-src 'none';
               base-uri 'self';
               form-action 'self';">

// Метод 2: HTTP заголовок на сервере
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:", "https:"],
        connectSrc: ["'self'"],
        fontSrc: ["'self'"],
        objectSrc: ["'none'"],
        mediaSrc: ["'self'"],
        frameSrc: ["'none'"]
    }
}));

// На сервере
res.cookie('sessionId', 'abc123xyz', {
    httpOnly: true,      // ✅ JavaScript НЕ может прочитать
    secure: true,        // ✅ Только через HTTPS
    sameSite: 'strict',  // ✅ Защита от CSRF
    maxAge: 3600000,      // 1 час
    path: '/',
    domain: '.example.com'
});

// Проверка на клиенте (НЕ сработает):
console.
log(document.cookie); 
// sessionId НЕ будет видна - защищена httpOnly ✅

const express = require('express');
const validator = require('validator');
const xss = require('xss');

app.post('/comment', (req, res) => {
    let comment = req.body.comment;

    // 1. Проверка типа данных
    if (typeof comment !== 'string') {
        return res.status(400).json({ 
            error: 'Неверный формат данных' 
        });
    }

    // 2. Проверка длины
    if (comment.length > 5000 || comment.length < 1) {
        return res.status(400).json({ 
            error: 'Неверная длина комментария' 
        });
    }

    // 3. Очистка от HTML тегов
    comment = validator.escape(comment);

    // 4. Дополнительная XSS защита
    comment = xss(comment);

    // 5. Проверка на SQL инъекции (если используется)
    if (validator.contains(comment, 'DROP TABLE')) {
        return res.status(400).json({ 
            error: 'Подозрительная активность' 
        });
    }

    // 6. Сохранение в БД (используйте параметризованные запросы)
    const query = 'INSERT INTO comments (text, user_id) VALUES (?, ?)';
    db.execute(query, [comment, req.user.id], (err, result) => {
        if (err) {
            return res.status(500).json({ 
                error: 'Ошибка сервера' 
            });
        }
        res.json({ 
            success: true, 
            message: 'Комментарий добавлен' 
        });
    });
});

import React from 'react';

function UserComment({ comment }) {
    // ✅ React автоматически экранирует данные
    return (
        <div className="comment">
            {comment}  {/* Безопасно! */}
        </div>
    );
}

// ❌ ОПАСНО: Использование dangerouslySetInnerHTML
function UnsafeComponent({ htmlContent }) {
    return (
        <div 
            dangerouslySetInnerHTML={{ __html: htmlContent }} 
        />
    );
}

// ✅ БЕЗОПАСНО: Используйте DOMPurify
import DOMPurify from 'dompurify';

function SafeHtmlComponent({ htmlContent }) {
    const clean = DOMPurify.sanitize(htmlContent);
    return (
        <div 
            dangerouslySetInnerHTML={{ __html: clean }} 
        />
    );
}