Предотвращение XSS, CSRF и SQL-инъекций в JavaScript

const query = `SELECT * FROM users WHERE username = '${username}'`;

// Небезопасный код на стороне сервера
app.get('/search', (req, res) => {
  const query = req.query.q;
  res.send(`Результаты поиска для: ${query}`);
});

// Опасный код для сохранения комментария
app.post('/comments', (req, res) => {
  const comment = req.body.comment;
  // Сохранение комментария без очистки
  db.saveComment(comment);
  res.redirect('/post');
});

// Уязвимый клиентский код
const name = new URLSearchParams(window.location.search).get('name');
document.getElementById('greeting').innerHTML = 'Привет, ' + name + '!';

function escapeHTML(str) {
  return str.replace(/[&<>"']/g, function(match) {
    return {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '''
    }[match];
  });
}
 
// Безопасное использование
document.getElementById('greeting').textContent = name; // Вместо innerHTML

// Простая валидация на стороне сервера
app.post('/comment', (req, res) => {
  const comment = req.body.comment;
  // Проверка наличия подозрительных тегов
  if (/<script|<img|<iframe|javascript:/i.test(comment)) {
    return res.status(400).send('Подозрительный контент');
  }
  // Дальнейшая обработка...
});

const DOMPurify = require('dompurify');
 
// Очистка HTML
const cleanHTML = DOMPurify.sanitize(userInput);

// Настройка CSP-заголовка в Express
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' https://trusted-cdn.com"
  );
  next();
});

// Настройка HttpOnly-куки в Express
res.cookie('sessionId', 'abc123', {
  httpOnly: true,
  secure: true, // Также рекомендуется использовать Secure-флаг
});

// Опасно в React
<div dangerouslySetInnerHTML={{ __html: userContent }} />
 
// Безопасно
<div>{userContent}</div>

// Пример замаскированного XSS-кода
const evilCode = "%3Cimg%20src%3Dx%20onerror%3D%22eval(atob(%27YWxlcnQoJ1hTUycpOw%3D%3D%27))%22%3E";

// Очистка входных данных перед сохранением в базу
const sanitizedComment = DOMPurify.sanitize(req.body.comment, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong'], // Разрешаем только безопасные теги
  ALLOWED_ATTR: [] // Запрещаем любые атрибуты
});
 
db.saveComment(sanitizedComment);

function sanitizeUserInput(input, userTrustLevel) {
  switch(userTrustLevel) {
    case 'admin':
      return DOMPurify.sanitize(input, { USE_PROFILES: { html: true }});
    case 'trusted':
      return DOMPurify.sanitize(input, { 
        ALLOWED_TAGS: ['b', 'i', 'a', 'p', 'br'],
        ALLOWED_ATTR: ['href']
      });
    default:
      return DOMPurify.sanitize(input, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] });
  }
}

function validateUserInput(input, expectedType) {
  switch(expectedType) {
    case 'username':
      return /^[\w\d\s]{3,20}$/.test(input) ? input : null;
    case 'email':
      return /^[\w\d._%+-]+@[\w\d.-]+\.[\w]{2,}$/.test(input) ? input : null;
    case 'number':
      return !isNaN(parseFloat(input)) ? Number(input) : null;
    default:
      return null;
  }
}

const fileExtension = path.extname(file.originalname).toLowerCase();
if (['.svg', '.html', '.htm'].includes(fileExtension)) {
  // Для SVG можно использовать специализированные очистители
  if (fileExtension === '.svg') {
    const sanitizedSvg = sanitizeSvg(fs.readFileSync(file.path, 'utf8'));
    fs.writeFileSync(file.path, sanitizedSvg);
  } else {
    // Опасные типы файлов лучше отклонить или конвертировать
    return res.status(400).send('Unsafe file type');
  }
}

// Пример простого сканера для проверки содержимого в базе данных
async function scanForXSS() {
  const comments = await db.getAllComments();
  const suspiciousPatterns = [
    /<script/i, 
    /javascript:/i, 
    /on\w+=/i, 
    /eval\(/i, 
    /document\.cookie/i
  ];
  
  const suspiciousComments = comments.filter(comment => 
    suspiciousPatterns.some(pattern => pattern.test(comment.content))
  );
  
  if (suspiciousComments.length > 0) {
    notifyAdmin('Потенциальный XSS обнаружен', suspiciousComments);
  }
}

app.use((req, res, next) => {
  if (req.path.startsWith('/user-content')) {
    res.setHeader(
      'Content-Security-Policy',
      "default-src 'none'; script-src 'none'; style-src 'self'; img-src 'self' https://safe-img-cdn.com; font-src 'self'"
    );
  } else {
    res.setHeader(
      'Content-Security-Policy',
      "default-src 'self'; script-src 'self' https://trusted-cdn.com"
    );
  }
  next();
});

// Через заголовок в Express
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' https://trusted-domain.com"
  );
  next();
});
 
// Или через мета-тег в HTML
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-domain.com">

script-src 'none';

script-src 'self' https://cdn.example.com;

script-src 'self' 'nonce-random123' 'sha256-hashOfScript';

app.use((req, res, next) => {
  const nonce = crypto.randomBytes(16).toString('base64');
  res.locals.nonce = nonce;
  res.setHeader('Content-Security-Policy', [INLINE]script-src 'self' 'nonce-${nonce}'[/INLINE]);
  next();
});
 
// В шаблоне
<script nonce="<%= nonce %>">
  // Код, который будет выполнен
</script>

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report-endpoint

app.post('/csp-report-endpoint', (req, res) => {
  console.log('CSP нарушение:', req.body);
  // Здесь можно сохранить отчет в базу данных или отправить уведомление
  res.status(204).end();
});

script-src 'self' 'unsafe-inline' 'unsafe-eval';

script-src 'self' 'nonce-random123' 'sha256-hashValue';

frame-ancestors 'none'; // запрещает встраивание страницы в iframe

frame-ancestors 'self' https://trusted-parent.com;

// Базовое использование DOMPurify
import DOMPurify from 'dompurify';
 
const dirtyHTML = '<script>alert("XSS")</script><p>Привет, мир!</p>';
const cleanHTML = DOMPurify.sanitize(dirtyHTML);
// Результат: "<p>Привет, мир!</p>"

const config = {
  ALLOWED_TAGS: ['b', 'i', 'p', 'a'],
  ALLOWED_ATTR: ['href', 'title', 'target'],
  FORBID_TAGS: ['script', 'style'],
  FORBID_ATTR: ['onerror', 'onload']
};
 
const cleanHTML = DOMPurify.sanitize(userInput, config);

// Базовое использование js-xss
import xss from 'xss';
 
const dirtyHTML = '<script>alert("XSS")</script><p>Привет, мир!</p>';
const cleanHTML = xss(dirtyHTML);
// Результат будет похожим: "<p>Привет, мир!</p>"

const options = {
  whiteList: {
    p: ['class'],
    a: ['href', 'title'],
    img: ['src', 'alt']
  },
  onIgnoreTag: function (tag, html, options) {
    // Пользовательская логика для игнорируемых тегов
    return '';
  }
};
 
const cleanHTML = xss(userInput, options);

const tricky = '<svg><animate onbegin="alert(1)" attributeName="x"/></svg>';

// js-xss автоматически блокирует javascript: URL
const dirtyURL = '<a href="javascript:alert(\'XSS\')">Нажми на меня</a>';
const cleanURL = xss(dirtyURL);
// Результат: <a href>Нажми на меня</a>

// Расширенный пример с DOMPurify
const clean = DOMPurify.sanitize(userInput, {
  ALLOWED_TAGS: ['p', 'br', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li'],
  ALLOWED_ATTR: ['href', 'target'],
  ALLOW_DATA_ATTR: false, // Отключаем data-атрибуты
  ADD_URI_SAFE_ATTR: ['target'], // Дополнительные безопасные атрибуты
  SAFE_FOR_TEMPLATES: true, // Удаляет потенциально опасный контент для шаблонов
  USE_PROFILES: {
    html: true, // Используем профиль HTML
    svg: false, // Отключаем SVG
    mathMl: false // Отключаем MathML
  }
});

// Расширенная конфигурация js-xss
const options = {
  stripBlankChar: true,
  css: false,
  whiteList: {
    // Определите свой белый список тегов и атрибутов
  },
  onTag: (tag, html, options) => {
    // Пользовательские действия с тегами
    return html;
  },
  onTagAttr: (tag, name, value, isWhiteAttr) => {
    // Пользовательская логика для атрибутов
    if (tag === 'a' && name === 'href' && value.startsWith('/')) {
      return `${name}="${value}"`;
    }
  }
};
 
const clean = xss(userInput, options);

// Двойная защита
let cleanHTML = DOMPurify.sanitize(userInput);
cleanHTML = xss(cleanHTML);

// Генерация CSRF-токена на сервере (Express.js)
app.use((req, res, next) => {
  const token = crypto.randomBytes(32).toString('hex');
  res.cookie('csrf_token', token, { httpOnly: false });
  res.locals.csrfToken = token;
  next();
});
 
// Middleware для проверки токена
function validateCsrfToken(req, res, next) {
  const token = req.body._csrf || req.headers['x-csrf-token'];
  const cookieToken = req.cookies.csrf_token;
  
  if (!token || !cookieToken || token !== cookieToken) {
    return res.status(403).send('CSRF атака обнаружена');
  }
  
  next();
}
 
// Использование middleware для защищенных маршрутов
app.post('/transfer', validateCsrfToken, (req, res) => {
  // Обработка запроса
});

fetch('/api/user/settings', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': document.cookie.match(/csrf_token=([\w-]+)/)[1]
  },
  body: JSON.stringify(data)
})

// Настройка куки с SameSite атрибутом
res.cookie('sessionId', 'abc123', {
  httpOnly: true,
  secure: true,
  sameSite: 'strict' // Куки не будет отправляться в cross-site запросах
});

function checkOrigin(req, res, next) {
  const origin = req.headers.origin;
  const referer = req.headers.referer;
  
  // Проверяем, что запрос пришел с нашего домена
  if (origin && !origin.startsWith('https://mysite.com') &&
      referer && !referer.startsWith('https://mysite.com')) {
    return res.status(403).send('Запрос отклонен');
  }
  
  next();
}

// Генерация токена
const token = crypto.randomBytes(16).toString('hex');
res.cookie('csrfCookie', token, { httpOnly: false });
 
// В форме
<input type="hidden" name="csrfParam" value="<%=token%>">
 
// Проверка на сервере
if (req.cookies.csrfCookie !== req.body.csrfParam) {
  return res.status(403).send('CSRF атака обнаружена');
}

// Клиент
fetch('/api/data', {
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
})
 
// Сервер
if (req.xhr || req.headers['x-requested-with'] === 'XMLHttpRequest') {
  // AJAX запрос, вероятно легитимный
} else {
  // Подозрительно
}

function generateToken() {
  // Минимум 16 байт (128 бит) случайных данных
  const buffer = crypto.randomBytes(32);
  return buffer.toString('hex');
}

// При начале сессии
app.use((req, res, next) => {
  if (!req.session.csrfToken) {
    req.session.csrfToken = generateToken();
  }
  res.locals.csrfToken = req.session.csrfToken;
  next();
});

app.use((req, res, next) => {
  // Генерируем новый токен для каждого запроса
  const token = generateToken();
  req.session.latestCsrfToken = token;
  res.locals.csrfToken = token;
  next();
});

app.use((req, res, next) => {
  const token = generateToken();
  res.cookie('csrfToken', token, { 
    httpOnly: false, // Важно: доступ из JavaScript
    secure: true,
    sameSite: 'strict'
  });
  res.locals.csrfToken = token;
  next();
});

// Сервер хранит токен
req.session.csrfToken = token;
 
// Клиент получает его через шаблон или API
<input type="hidden" name="_csrf" value="<%= csrfToken %>" />

// Устанавливаем куки
res.cookie('csrf', token, { httpOnly: false, secure: true });
 
// Клиент считывает значение из куки
const csrfToken = document.cookie
  .split('; ')
  .find(row => row.startsWith('csrf='))
  .split('=')[1];

// Получаем токен с сервера
fetch('/csrf-token')
  .then(response => response.json())
  .then(data => {
    sessionStorage.setItem('csrfToken', data.token);
  });
 
// Используем при запросах
const token = sessionStorage.getItem('csrfToken');
fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': token
  },
  body: JSON.stringify(data)
});

function validateCsrfToken(req, res, next) {
  // Получаем токен из разных источников
  const token = req.body._csrf || 
                req.query._csrf || 
                req.headers['x-csrf-token'];
  
  // Получаем эталонный токен
  const storedToken = req.session.csrfToken;
  
  // Проверяем соответствие токенов
  if (!token || !storedToken || token !== storedToken) {
    return res.status(403).json({ error: 'CSRF validation failed' });
  }
  
  next();
}

function validateDoubleSubmitCookie(req, res, next) {
  const cookieToken = req.cookies.csrfToken;
  const requestToken = req.body._csrf || req.headers['x-csrf-token'];
  
  if (!cookieToken || !requestToken || cookieToken !== requestToken) {
    return res.status(403).json({ error: 'CSRF validation failed' });
  }
  
  next();
}

function rotateTokenMiddleware(req, res, next) {
  // Проверяем возраст токена
  const tokenAge = Date.now() - req.session.tokenCreatedAt;
  const maxAge = 1000 * 60 * 30; // 30 минут
  
  if (!req.session.csrfToken || tokenAge > maxAge) {
    // Генерируем новый токен
    req.session.csrfToken = generateToken();
    req.session.tokenCreatedAt = Date.now();
  }
  
  res.locals.csrfToken = req.session.csrfToken;
  next();
}

function handleCsrfError(err, req, res, next) {
  if (err.code === 'EBADCSRFTOKEN') {
    // Логируем инцидент
    logger.warn('CSRF attack detected', {
      ip: req.ip,
      path: req.path,
      headers: req.headers
    });
    
    // Возвращаем общую ошибку клиенту
    return res.status(403).send('Форма устарела или запрос отклонен по соображениям безопасности');
  }
  
  next(err);
}

// При начале многошагового процесса
app.get('/wizard/start', (req, res) => {
  req.session.wizardCsrfToken = generateToken();
  res.render('step1', { csrfToken: req.session.wizardCsrfToken });
});
 
// Во всех последующих шагах используем тот же токен
app.get('/wizard/step2', (req, res) => {
  res.render('step2', { csrfToken: req.session.wizardCsrfToken });
});

// Эндпоинт для получения токена
app.get('/api/csrf-token', (req, res) => {
  if (!req.session.csrfToken) {
    req.session.csrfToken = generateToken();
  }
  res.json({ token: req.session.csrfToken });
});
 
// Клиентский код в SPA
async function initCsrfProtection() {
  const response = await fetch('/api/csrf-token');
  const { token } = await response.json();
  
  // Настраиваем перехватчик для всех исходящих запросов
  axios.interceptors.request.use(config => {
    config.headers['X-CSRF-Token'] = token;
    return config;
  });
}

res.cookie('sessionId', 'a1b2c3', {
  httpOnly: true,
  secure: true,
  sameSite: 'Strict'
});

res.cookie('sessionId', 'a1b2c3', {
  httpOnly: true,
  secure: true,
  sameSite: 'Lax'
});

res.cookie('sessionId', 'a1b2c3', {
  httpOnly: true,
  secure: true, // Обязательно для SameSite=None
  sameSite: 'None'
});

// Проверка поддержки в клиентском коде
function detectSameSiteSupport() {
  return 'cookieStore' in window || 'SameSite' in document.createElement('meta').__proto__;
}

// Проблематичный сценарий
// Сайт a.com встраивает iframe с b.com
// Если b.com использует SameSite=Strict для куки аутентификации,
// пользователю придется авторизоваться отдельно в iframe

// Проблемный паттерн в Android WebView
// Запросы из WebView могут не включать куки с SameSite=Strict,
// что приводит к необходимости постоянной повторной аутентификации

function configureCookieForClient(req, res, name, value, options) {
  // Проверяем User-Agent на проблемные клиенты
  const ua = req.headers['user-agent'] || '';
  const isProblematicClient = /Android 8|Chrome 5\d|iPhone OS 12/i.test(ua);
  
  if (isProblematicClient) {
    // Для проблемных клиентов используем более свободные настройки
    res.cookie(name, value, { ...options, sameSite: 'None' });
  } else {
    // Для современных клиентов используем основные настройки
    res.cookie(name, value, options);
  }
}

// Раньше работало для сторонних куки
document.cookie = "tracker=123; domain=analytics.com";
 
// Теперь многие браузеры блокируют сторонние куки независимо от SameSite

// Запрос с JWT в заголовке, но без куки из-за SameSite
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer eyJhbG...'
  }
});
 
// Сервер может не распознать пользователя, если проверяет и куки, и токен

// Для аутентификации пользователя
res.cookie('sessionId', sessionId, {
  httpOnly: true,
  secure: true,
  sameSite: 'Lax' // Баланс между безопасностью и удобством
});
 
// Для критически важных операций
res.cookie('financialToken', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'Strict' // Максимальная защита
});
 
// Для кросс-доменной интеграции
res.cookie('partnerRef', partnerId, {
  secure: true,
  sameSite: 'None' // Разрешить кросс-сайтовое использование
});

// Комбинированный подход
app.post('/transfer', validateCsrfToken, validateActionToken, (req, res) => {
  // Куки с SameSite уже дают базовую защиту
  // validateCsrfToken проверяет CSRF токен как второй уровень
  // validateActionToken проверяет дополнительный токен для критичной операции
  
  // Выполнение операции...
});

// Серверный код для мониторинга проблем с куки
app.use((req, res, next) => {
  const expectedCookies = ['sessionId', 'csrfToken'];
  const missingCookies = expectedCookies.filter(name => !req.cookies[name]);
  
  if (missingCookies.length > 0) {
    // Логируем проблему и клиентскую информацию
    logger.warn('Missing cookies', {
      missing: missingCookies,
      userAgent: req.headers['user-agent'],
      referer: req.headers.referer
    });
  }
  
  next();
});

// Запрос токена при загрузке приложения
function initApp() {
  fetch('/api/csrf-token')
    .then(response => response.json())
    .then(data => {
      // Сохраняем токен в памяти приложения
      window.csrfToken = data.token;
      
      // Настраиваем interceptors для всех последующих запросов
      setupRequestInterceptors();
      
      // Продолжаем инициализацию приложения
      renderApp();
    });
}
 
function setupRequestInterceptors() {
  // Для Axios
  axios.interceptors.request.use(config => {
    config.headers['X-CSRF-Token'] = window.csrfToken;
    return config;
  });
}

// Обработчик ответов для проверки ошибок CSRF
axios.interceptors.response.use(
  response => response,
  error => {
    // Если сервер вернул ошибку CSRF, пробуем обновить токен
    if (error.response && error.response.status === 403 && 
        error.response.headers['x-csrf-token-expired']) {
      
      // Получаем новый токен
      return axios.get('/api/csrf-token')
        .then(response => {
          window.csrfToken = response.data.token;
          
          // Повторяем оригинальный запрос с новым токеном
          const originalRequest = error.config;
          originalRequest.headers['X-CSRF-Token'] = window.csrfToken;
          return axios(originalRequest);
        });
    }
    
    return Promise.reject(error);
  }
);

// На сервере генерируем уникальный ID для фронтенда
app.get('/api/auth', (req, res) => {
  const clientId = generateUniqueId();
  
  // Сохраняем в базе данных связь между clientId и пользователем
  db.storeClientId(req.user.id, clientId);
  
  res.json({ clientId });
});
 
// Клиент использует этот ID в каждом запросе
const clientId = localStorage.getItem('clientId');
fetch('https://api.example.com/data', {
  headers: {
    'Client-ID': clientId
  }
});
 
// На стороне API проверяем валидность Client-ID
app.use((req, res, next) => {
  const clientId = req.headers['client-id'];
  
  // Проверяем, существует ли такой ID в нашей базе
  db.validateClientId(clientId)
    .then(valid => {
      if (valid) {
        next();
      } else {
        res.status(403).send('Неверный Client-ID');
      }
    });
});

// Подключение WebSocket с токеном авторизации
const socket = new WebSocket(`wss://api.example.com/ws?token=${authToken}`);
 
// На сервере проверяем токен при подключении
wss.on('connection', (ws, req) => {
  const url = new URL(req.url, 'wss://example.com');
  const token = url.searchParams.get('token');
  
  validateToken(token)
    .then(valid => {
      if (!valid) {
        ws.close(1008, 'Invalid token');
      }
    });
});

// Центральный менеджер безопасности
class SecurityManager {
  constructor() {
    this.tokens = {};
    this.interceptors = [];
  }
  
  // Получение токена для определенного модуля
  getToken(module) {
    return this.tokens[module] || this.fetchToken(module);
  }
  
  // Запрос нового токена для модуля
  fetchToken(module) {
    return fetch(`/api/${module}/csrf-token`)
      .then(response => response.json())
      .then(data => {
        this.tokens[module] = data.token;
        return data.token;
      });
  }
  
  // Регистрация перехватчика запросов
  registerInterceptor(modulePattern, interceptorFn) {
    this.interceptors.push({ pattern: modulePattern, fn: interceptorFn });
  }
  
  // Применение подходящего перехватчика к запросу
  processRequest(url, config) {
    for (const { pattern, fn } of this.interceptors) {
      if (url.match(pattern)) {
        return fn(url, config, this);
      }
    }
    return config;
  }
}
 
// Использование менеджера для всех запросов
const securityManager = new SecurityManager();
 
fetch = new Proxy(fetch, {
  apply: function(target, thisArg, argumentsList) {
    const [url, config = {}] = argumentsList;
    return securityManager.processRequest(url, config)
      .then(newConfig => target.apply(thisArg, [url, newConfig]));
  }
});

// Хук для работы с CSRF-защитой
function useCsrfProtection() {
  const [csrfToken, setCsrfToken] = useState(null);
  
  // Получаем токен при первой загрузке компонента
  useEffect(() => {
    // Функция для извлечения значения куки по имени
    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }
    
    // Получаем токен из куки
    const tokenFromCookie = getCookie('csrf_token');
    
    if (tokenFromCookie) {
      setCsrfToken(tokenFromCookie);
    } else {
      // Если токена нет в куки, запрашиваем новый
      fetch('/api/csrf-token', { credentials: 'include' })
        .then(response => response.json())
        .then(data => {
          setCsrfToken(data.token);
        })
        .catch(error => {
          console.error('Ошибка получения CSRF-токена:', error);
        });
    }
  }, []);
  
  // Функция для выполнения защищенных запросов
  const fetchWithCsrf = useCallback((url, options = {}) => {
    if (!csrfToken) {
      return Promise.reject(new Error('CSRF токен не найден'));
    }
    
    const headers = {
      ...options.headers,
      'X-CSRF-Token': csrfToken
    };
    
    return fetch(url, {
      ...options,
      headers,
      credentials: 'include' // Важно для отправки куки
    });
  }, [csrfToken]);
  
  return { csrfToken, fetchWithCsrf };
}

function UserProfile() {
  const { fetchWithCsrf } = useCsrfProtection();
  const [profile, setProfile] = useState(null);
  
  const updateProfile = async (newData) => {
    try {
      const response = await fetchWithCsrf('/api/user/profile', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(newData)
      });
      
      if (!response.ok) throw new Error('Ошибка обновления профиля');
      
      const updatedProfile = await response.json();
      setProfile(updatedProfile);
    } catch (error) {
      console.error('Не удалось обновить профиль:', error);
    }
  };
  
  // Остальной код компонента...
}

// Redux middleware для CSRF-защиты
const csrfMiddleware = store => next => action => {
  if (action.type === 'API_REQUEST') {
    const csrfToken = document.cookie
      .split('; ')
      .find(row => row.startsWith('csrf_token='))
      ?.split('=')[1];
    
    if (csrfToken) {
      action.payload.headers = {
        ...action.payload.headers,
        'X-CSRF-Token': csrfToken
      };
    }
  }
  
  return next(action);
};

// src/plugins/csrf.js
export default {
  install(app) {
    const csrfToken = getCookie('csrf_token');
    
    // Если токена нет, запрашиваем его
    if (!csrfToken) {
      fetch('/api/csrf-token', { credentials: 'include' })
        .then(response => response.json())
        .then(data => {
          // Токен автоматически устанавливается как куки сервером
          console.log('Получен новый CSRF-токен');
        });
    }
    
    // Создаем глобальную функцию для защищенных запросов
    app.config.globalProperties.$fetchWithCsrf = function(url, options = {}) {
      const token = getCookie('csrf_token');
      
      if (!token) {
        return Promise.reject(new Error('CSRF токен не найден'));
      }
      
      const headers = {
        ...options.headers,
        'X-CSRF-Token': token
      };
      
      return fetch(url, {
        ...options,
        headers,
        credentials: 'include'
      });
    };
    
    // Добавляем утилиту для получения токена в компонентах
    app.config.globalProperties.$getCsrfToken = function() {
      return getCookie('csrf_token');
    };
  }
};
 
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import csrfPlugin from './plugins/csrf';
 
const app = createApp(App);
app.use(csrfPlugin);
app.mount('#app');

<template>
  <form @submit.prevent="updateProfile">
    <!-- Форма редактирования профиля -->
    <button type="submit">Сохранить</button>
  </form>
</template>
 
<script>
export default {
  data() {
    return {
      profile: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    async updateProfile() {
      try {
        const response = await this.$fetchWithCsrf('/api/user/profile', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.profile)
        });
        
        if (!response.ok) throw new Error('Ошибка обновления профиля');
        
        const result = await response.json();
        this.$emit('updated', result);
      } catch (error) {
        console.error('Не удалось обновить профиль:', error);
      }
    }
  }
};
</script>

// store/actions.js
export default {
  async apiRequest({ commit }, { url, method = 'GET', data = null }) {
    const csrfToken = document.cookie
      .split('; ')
      .find(row => row.startsWith('csrf_token='))
      ?.split('=')[1];
    
    const options = {
      method,
      headers: {
        'Content-Type': 'application/json'
      },
      credentials: 'include'
    };
    
    if (csrfToken) {
      options.headers['X-CSRF-Token'] = csrfToken;
    }
    
    if (data) {
      options.body = JSON.stringify(data);
    }
    
    try {
      const response = await fetch(url, options);
      return await response.json();
    } catch (error) {
      console.error('API request failed:', error);
      throw error;
    }
  }
}

// Опасный код, уязвимый к SQL-инъекции
const express = require('express');
const mysql = require('mysql');
const app = express();
 
app.use(express.json());
 
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'users_db'
});
 
app.get('/users', (req, res) => {
  const username = req.query.username;
  // Уязвимый запрос!
  const query = `SELECT * FROM users WHERE username = '${username}'`;
  
  connection.query(query, (err, results) => {
    if (err) throw err;
    res.json(results);
  });
});
 
app.listen(3000);

app.get('/users', (req, res) => {
  const username = req.query.username;
  // Безопасный параметризованный запрос
  const query = `SELECT * FROM users WHERE username = ?`;
  
  connection.query(query, [username], (err, results) => {
    if (err) throw err;
    res.json(results);
  });
});

const { Sequelize, Model, DataTypes } = require('sequelize');
const sequelize = new Sequelize('sqlite::memory:');
 
class User extends Model {}
User.init(
  { username: DataTypes.STRING },
  { sequelize, modelName: 'user' }
);
 
app.get('/users', async (req, res) => {
  const username = req.query.username;
  // Sequelize автоматически защищает от SQL-инъекций
  const users = await User.findAll({
    where: { username }
  });
  
  res.json(users);
});

function isValidUsername(username) {
  // Только буквы и цифры, длина 3-20 символов
  return /^[a-zA-Z0-9]{3,20}$/.test(username);
}
 
app.get('/users', (req, res) => {
  const username = req.query.username;
  
  if (!isValidUsername(username)) {
    return res.status(400).json({ error: 'Invalid username' });
  }
  
  // Продолжаем с безопасным запросом...
});

function escapeSQL(value) {
  return String(value)
    .replace(/[\0\n\r\b\t\\\'\"\x1a]/g, function(s) {
      switch(s) {
        case "\0": return "\\0";
        case "\n": return "\\n";
        case "\r": return "\\r";
        case "\b": return "\\b";
        case "\t": return "\\t";
        case "\x1a": return "\\Z";
        case "'": return "''";
        case '"': return '""';
        default: return "\\" + s;
      }
    });
}

// Пользователь только с правами чтения
const readOnlyConnection = mysql.createConnection({
  user: 'app_readonly',
  password: '[B][/B]',
  // Другие параметры...
});
 
// Пользователь с правами записи
const writeConnection = mysql.createConnection({
  user: 'app_readwrite',
  password: '[B][/B]',
  // Другие параметры...
});
 
// Используем соответствующее подключение в зависимости от операции

app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  
  // Уязвимый запрос!
  const user = await db.collection('users').findOne({
    username: username, 
    password: password
  });
  
  if (user) {
    // Аутентификация успешна
    res.json({ success: true, token: generateToken(user) });
  } else {
    res.status(401).json({ success: false });
  }
});

app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  
  // Проверяем, что username и password - строки
  if (typeof username !== 'string' || typeof password !== 'string') {
    return res.status(400).json({ error: 'Invalid input' });
  }
  
  // Безопасный запрос с проверенными данными
  const user = await db.collection('users').findOne({
    username, password
  });
  
  // Остальная логика...
});

const UserSchema = new mongoose.Schema({
  username: String,
  password: String
});
 
const User = mongoose.model('User', UserSchema);
 
app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  
  // Mongoose автоматически проверяет типы
  const user = await User.findOne({ username, password });
  
  // Остальная логика...
});

function sanitizeObject(obj) {
  if (!obj || typeof obj !== 'object') {
    return obj;
  }
  
  const result = {};
  
  // Обходим все свойства объекта
  for (const key in obj) {
    // Отфильтровываем ключи, начинающиеся с $
    if (key.startsWith('$')) {
      continue;
    }
    
    // Рекурсивно обрабатываем вложенные объекты
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      result[key] = sanitizeObject(obj[key]);
    } else {
      result[key] = obj[key];
    }
  }
  
  return result;
}
 
// Использование
app.post('/api/search', async (req, res) => {
  const filter = sanitizeObject(req.body.filter || {});
  const results = await db.collection('items').find(filter).toArray();
  res.json(results);
});

app.get('/api/users', async (req, res) => {
  // Возвращаем только безопасные поля, исключая пароль
  const users = await db.collection('users').find({}, { 
    projection: { username: 1, email: 1, _id: 1 } 
  }).toArray();
  
  res.json(users);
});

// Опасно
const pipeline = [
  { $match: req.body.match },
  { $group: req.body.group }
];
 
// Безопасно
const pipeline = [
  { $match: { status: req.query.status === 'active' ? 'active' : 'inactive' } },
  { $group: { _id: "$category", count: { $sum: 1 } } }
];

// Роли можно настроить в MongoDB
// db.createUser({
//   user: "readOnlyUser",
//   pwd: "password",
//   roles: [{ role: "read", db: "myDb" }]
// })
 
// Затем использовать соответствующего пользователя для подключения
const readOnlyClient = new MongoClient(uri, {
  auth: {
    username: 'readOnlyUser',
    password: 'password'
  }
});

const { createComplexityLimitRule } = require('graphql-validation-complexity');
 
const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
  validationRules: [
    createComplexityLimitRule(1000, {
      scalarCost: 1,
      objectCost: 2,
      listFactor: 10
    })
  ]
});

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
  validationRules: [
    // Отключаем интроспекцию по условию
    process.env.NODE_ENV === 'production' 
      ? NoSchemaIntrospectionRule : () => true
  ]
});

// Уязвимый резолвер
const resolvers = {
  Query: {
    users: (_, args) => {
      const query = `SELECT * FROM users WHERE role = '${args.role}'`;
      return db.raw(query);
    }
  }
};

const resolvers = {
  Query: {
    users: async (_, args) => {
      // Валидируем аргументы
      if (!['admin', 'user', 'guest'].includes(args.role)) {
        throw new Error('Invalid role');
      }
      // Используем параметризованные запросы
      return db('users').where({ role: args.role });
    }
  }
};

app.use('/graphql', (req, res, next) => {
  // Если это батч запрос
  if (Array.isArray(req.body)) {
    // Ограничиваем количество запросов
    if (req.body.length > 10) {
      return res.status(400).json({
        errors: [{ message: 'Too many operations in single request' }]
      });
    }
  }
  next();
});

// Клиент отправляет только хеш
fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    documentId: 'HASH_OF_PREDEFINED_QUERY',
    variables: { userId: 123 }
  })
});

const persistedQueries = {
  'HASH_OF_PREDEFINED_QUERY': `
    query GetUser($userId: ID!) {
      user(id: $userId) {
        name
        email
      }
    }
  `
};
 
app.use('/graphql', (req, res, next) => {
  if (req.body.documentId) {
    req.body.query = persistedQueries[req.body.documentId];
    if (!req.body.query) {
      return res.status(400).json({
        errors: [{ message: 'Unknown query id' }]
      });
    }
  }
  next();
});

const typeDefs = gql`
  type User {
    id: ID!
    email: String! @auth(requires: ADMIN)
    name: String!
    role: String!
  }
`;
 
// Добавляем директиву для контроля доступа
const resolvers = {
  User: {
    email: (user, _, context) => {
      if (context.user && context.user.role === 'ADMIN') {
        return user.email;
      }
      throw new Error('Not authorized');
    }
  }
};

const { shield, rule, and, or, not } = require('graphql-shield');
 
const isAuthenticated = rule()((_, __, context) => {
  return Boolean(context.user);
});
 
const isAdmin = rule()((_, __, context) => {
  return context.user && context.user.role === 'ADMIN';
});
 
const permissions = shield({
  Query: {
    users: isAdmin,
    user: isAuthenticated
  },
  User: {
    email: isAdmin,
    settings: isAuthenticated
  }
});
 
// Применяем middleware к схеме
const schemaWithPermissions = applyMiddleware(schema, permissions);

const rateLimiter = require('graphql-rate-limit');
 
const limiter = rateLimiter({
  identifyContext: (ctx) => ctx.ip,
  formatError: () => 'Слишком много запросов, попробуйте позднее'
});
 
const resolvers = {
  Query: {
    sensitiveData: limiter({
      window: '1m',
      max: 10
    }, (_, args, context) => {
      return fetchSensitiveData();
    })
  }
};

const emailInput = document.getElementById('email');
const emailRegex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
 
emailInput.addEventListener('input', function() {
  if (!emailRegex.test(this.value)) {
    this.setCustomValidity('Пожалуйста, введите корректный email');
  } else {
    this.setCustomValidity('');
  }
});
 
form.addEventListener('submit', function(e) {
  const username = document.getElementById('username').value;
  
  // Проверка на потенциально опасные символы
  if (/[<>'"&]/.test(username)) {
    e.preventDefault();
    alert('Имя пользователя содержит недопустимые символы');
  }
});

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
 
// Определение схемы валидации
const schema = yup.object().shape({
  username: yup.string()
    .required('Имя пользователя обязательно')
    .matches(/^[a-zA-Z0-9_]+$/, 'Только буквы, цифры и подчёркивания')
    .min(3, 'Минимум 3 символа')
    .max(20, 'Максимум 20 символов'),
  email: yup.string()
    .required('Email обязателен')
    .email('Введите корректный email'),
  password: yup.string()
    .required('Пароль обязателен')
    .min(8, 'Минимум 8 символов')
    .matches(/[0-9]/, 'Должен содержать цифру')
    .matches(/[A-Z]/, 'Должен содержать заглавную букву')
});
 
function RegistrationForm() {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema)
  });
  
  const onSubmit = data => {
    // Данные прошли валидацию, можно отправлять на сервер
    api.register(data);
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="username" ref={register} />
      {errors.username && <p>{errors.username.message}</p>}
      
      <input name="email" ref={register} />
      {errors.email && <p>{errors.email.message}</p>}
      
      <input name="password" type="password" ref={register} />
      {errors.password && <p>{errors.password.message}</p>}
      
      <button type="submit">Зарегистрироваться</button>
    </form>
  );
}

function validateUserInput(input) {
  // Проверка на потенциальные XSS-векторы
  if (/<script|javascript:|on\w+=|data:/i.test(input)) {
    return {
      valid: false,
      message: 'Обнаружен потенциально опасный контент'
    };
  }
  
  // Ограничение длины для предотвращения DoS-атак
  if (input.length > 1000) {
    return {
      valid: false,
      message: 'Слишком длинный текст'
    };
  }
  
  return { valid: true };
}
 
// Использование в обработчике формы
submitButton.addEventListener('click', () => {
  const commentText = document.getElementById('comment').value;
  const validation = validateUserInput(commentText);
  
  if (!validation.valid) {
    showError(validation.message);
    return;
  }
  
  // Отправка данных на сервер
});