Какие знаешь методы защиты от веб-уязвимостей?

Методы защиты от веб-уязвимостей

Основные веб-уязвимости и защита от них

Безопасность — критический аспект веб-разработки. Frontend разработчик должен знать основные уязвимости и способы защиты от них.

1. XSS (Cross-Site Scripting)

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

Защита:

// Неправильно — опасно!
const userInput = '<img src=x onerror="alert("XSS")">';
document.innerHTML = userInput; // Выполнит вредоносный код

// Правильно — санитизировать вывод
const div = document.createElement('div');
div.textContent = userInput; // Безопасно
element.appendChild(div);

// В React (автоматически экранирует)
function Profile({ userBio }) {
  return <div>{userBio}</div>; // Безопасно
}

DOMPurify для очистки HTML:

import DOMPurify from 'dompurify';

const dirtyHTML = '<img src=x onerror="alert("XSS")">';
const cleanHTML = DOMPurify.sanitize(dirtyHTML);

2. CSRF (Cross-Site Request Forgery)

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

Защита:

const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

fetch('/api/update', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': csrfToken
  },
  body: JSON.stringify({action: 'delete'})
});

SameSite cookie:

// На сервере: Set-Cookie: session=abc123; SameSite=Strict;

3. SQL Injection

SQL Injection — внедрение SQL кода через пользовательский ввод.

Защита (на frontend):

// Неправильно
const query = `SELECT * FROM users WHERE id = ${userId}`;

// Правильно — параметризованные запросы на сервере
fetch('/api/users', {
  method: 'GET',
  headers: {'Content-Type': 'application/json'}
});

4. Content Security Policy (CSP)

CSP — механизм ограничения источников загрузки контента.

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' trusted-cdn.com">

В JavaScript:

// Неправильно
element.innerHTML = '<script>alert("XSS")</script>';

// Правильно
element.textContent = 'Safe text';

5. HTTPS и безопасность передачи данных

// Всегда используй HTTPS
fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include'
});

6. Валидация входных данных

function validateEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

function validatePassword(password) {
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
  return passwordRegex.test(password);
}

7. Защита от Clickjacking

<!-- В HTTP заголовках -->
X-Frame-Options: SAMEORIGIN

8. Защита данных в localStorage

// Никогда не храни чувствительные данные в localStorage!

// Неправильно
localStorage.setItem('authToken', token);

// Правильно
// 1. Используй httpOnly cookies
// 2. Добавляй CSRF токен
// 3. Используй session storage
sessionStorage.setItem('tempData', data);

9. Проверка прав доступа (на backend)

// Frontend может быть обманута, проверяй на сервере!
fetch('/api/admin/users')
.then(response => {
  if (response.status === 403) {
    console.log('Нет доступа');
  }
});

10. Использование безопасных библиотек

import DOMPurify from 'dompurify';
import validator from 'validator';

// Избегай eval() и new Function()
// Не используй innerHTML с пользовательским вводом

Чеклист безопасности Frontend

• Всегда экранируй пользовательский ввод
• Используй HTTPS для всех запросов
• Валидируй данные на frontend и backend
• Отправляй CSRF токен с каждым запросом
• Используй httpOnly cookies для токенов
• Не храни чувствительные данные в localStorage
• Используй CSP для ограничения контента
• Избегай eval() и innerHTML
• Обновляй зависимости
• Проверяй npm пакеты на уязвимости

Безопасность веб-приложения — общая ответственность frontend и backend разработчиков.