Skip to content

Security: AlexMaxeven/resume

Security

SECURITY.md

🔒 Захист від XSS та CSRF атак

Цей документ пояснює, як працює система захисту від XSS (Cross-Site Scripting) та CSRF (Cross-Site Request Forgery) атак у проекті.

📋 Зміст

  1. XSS захист (DOMPurify)
  2. CSRF захист
  3. Як це працює
  4. Приклади використання

🛡️ XSS захист (DOMPurify)

Що таке XSS?

XSS (Cross-Site Scripting) - це атака, коли зловмисний JavaScript код впроваджується на веб-сторінку через небезпечний ввід користувача.

Приклад атаки:

<!-- Користувач вводить у форму: -->
<script>alert('XSS атака!')</script>

<!-- Якщо не захищено, цей код виконається -->

Як працює DOMPurify?

DOMPurify - це бібліотека, яка очищає HTML від небезпечних елементів та атрибутів.

1. Санітизація HTML (utils/sanitize.js)

import { sanitizeHTML } from './utils/sanitize';

// Небезпечний ввід
const dangerousInput = '<script>alert("XSS")</script><p>Безпечний текст</p>';

// Безпечний вивід (script тег видалено)
const safeOutput = sanitizeHTML(dangerousInput);
// Результат: '<p>Безпечний текст</p>'

Що видаляється:

  • <script> теги
  • <iframe>, <object>, <embed>
  • Атрибути onclick, onerror, onload (event handlers)
  • Протоколи javascript:, data:, vbscript:
  • style атрибути (за замовчуванням)

Що залишається:

  • Безпечні теги: <p>, <strong>, <em>, <a>, <h1-h6>, тощо
  • Безпечні атрибути: href, title, class, id

2. Компонент SafeHTML (components/SafeHTML/SafeHTML.jsx)

import SafeHTML from './components/SafeHTML/SafeHTML';

// Безпечний рендеринг HTML
<SafeHTML 
  content="<p>Текст з <strong>HTML</strong></p>" 
  tag="div"
/>

Як працює:

  1. Контент автоматично санітизується через DOMPurify
  2. Використовується dangerouslySetInnerHTML, але з попередньо очищеним HTML
  3. Небезпечні елементи видаляються до рендерингу

3. Перевірка на небезпечний контент

import { containsDangerousContent } from './utils/sanitize';

if (containsDangerousContent(userInput)) {
  console.warn('Виявлено небезпечний контент!');
  // Автоматично санітизується
}

🔐 CSRF захист

Що таке CSRF?

CSRF (Cross-Site Request Forgery) - це атака, коли зловмисний сайт виконує дії від імені авторизованого користувача без його відома.

Приклад атаки:

<!-- Зловмисний сайт відправляє запит: -->
<img src="https://bank.com/transfer?to=hacker&amount=1000" />

<!-- Якщо користувач залогінений у банку, запит виконається! -->

Як працює CSRF захист?

1. Генерація токену (utils/csrf.js)

import { initCSRFToken, getCSRFToken } from './utils/csrf';

// Генерує та зберігає унікальний токен
const token = initCSRFToken();
// Приклад: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6"

Де зберігається:

  • localStorage (для клієнта)
  • Cookie (для сервера, якщо потрібно)

2. Додавання токену до запитів

import { secureFetch } from './utils/csrf';

// Автоматично додає CSRF токен до заголовків
const response = await secureFetch('/api/contact', {
  method: 'POST',
  body: JSON.stringify({ name: 'John', message: 'Hello' })
});

// Заголовок автоматично додається:
// X-CSRF-Token: a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6

3. Перевірка на сервері

Сервер повинен:

  1. Отримати токен з заголовка X-CSRF-Token
  2. Порівняти з токеном, збереженим у сесії користувача
  3. Відхилити запит, якщо токени не співпадають

Приклад серверної перевірки (Node.js/Express):

app.post('/api/contact', (req, res) => {
  const clientToken = req.headers['x-csrf-token'];
  const serverToken = req.session.csrfToken;
  
  if (clientToken !== serverToken) {
    return res.status(403).json({ error: 'Invalid CSRF token' });
  }
  
  // Безпечний запит
  // ...
});

🔄 Як це працює разом

Сценарій 1: Користувач вводить небезпечний HTML

1. Користувач вводить: <script>alert('XSS')</script>
2. containsDangerousContent() виявляє небезпечний контент
3. Показується попередження ⚠️
4. sanitizeHTML() видаляє <script> тег
5. SafeHTML рендерить безпечний контент
6. Результат: (пусто, бо script видалено)

Сценарій 2: Відправка форми

1. Користувач заповнює форму
2. Всі дані санітизуються (sanitizeText, sanitizeHTML)
3. CSRF токен автоматично додається до запиту
4. secureFetch() відправляє запит з заголовком X-CSRF-Token
5. Сервер перевіряє токен
6. Якщо токен валідний - запит виконується
7. Якщо токен невалідний - запит відхиляється (403)

💡 Приклади використання

1. Безпечний рендеринг HTML

import SafeHTML from './components/SafeHTML/SafeHTML';

function MyComponent() {
  const userContent = "<p>Мій <strong>текст</strong></p><script>alert('XSS')</script>";
  
  return (
    <SafeHTML content={userContent} />
    // Рендерить: <p>Мій <strong>текст</strong></p>
    // <script> автоматично видалено
  );
}

2. Санітизація форми

import { sanitizeText, sanitizeHTML } from './utils/sanitize';

function handleSubmit(e) {
  e.preventDefault();
  
  const sanitizedData = {
    name: sanitizeText(formData.name),      // Видаляє HTML
    email: sanitizeText(formData.email),    // Видаляє HTML
    message: sanitizeHTML(formData.message) // Очищає від небезпечних тегів
  };
  
  // Відправка даних...
}

3. Безпечний API запит

import { secureFetch } from './utils/csrf';

async function sendData(data) {
  const response = await secureFetch('/api/endpoint', {
    method: 'POST',
    body: JSON.stringify(data)
  });
  
  // CSRF токен автоматично додано до заголовків
  return response.json();
}

4. Перевірка URL

import { sanitizeURL } from './utils/sanitize';

const userLink = "javascript:alert('XSS')";
const safeLink = sanitizeURL(userLink);
// Результат: "" (порожній рядок, бо небезпечний протокол)

const safeLink2 = sanitizeURL("https://example.com");
// Результат: "https://example.com" (безпечний)

⚠️ Важливі зауваження

1. DOMPurify не захищає від:

  • SQL Injection (це завдання сервера)
  • CSRF (потрібні токени)
  • Clickjacking (потрібні заголовки X-Frame-Options)

2. CSRF токени працюють тільки якщо:

  • Сервер перевіряє токени
  • Токени генеруються унікально для кожної сесії
  • Токени зберігаються безпечно

3. Рекомендації:

  • ✅ Завжди санітизуйте ввід користувача
  • ✅ Використовуйте SafeHTML для рендерингу HTML
  • ✅ Додавайте CSRF токени до всіх POST/PUT/DELETE запитів
  • ✅ Перевіряйте токени на сервері
  • ✅ Використовуйте HTTPS для безпечної передачі токенів

📚 Додаткові ресурси

Створено для демонстрації захисту від XSS/CSRF атак у React додатку.

There aren’t any published security advisories