Как происходит кража данных в приложении?

Векторы атак и кража данных в веб-приложениях

Кража данных - это одна из главных угроз безопасности. Frontend разработчик должен понимать основные векторы атак и как их предотвращать.

1. XSS (Cross-Site Scripting)

Злоумышленник внедряет вредоносный JavaScript код в приложение.

// УЯЗВИМО - innerHTML позволяет XSS
function displayComment(comment) {
  document.getElementById('comments').innerHTML += comment;
  // Если comment содержит: <img src=x onerror="stealCookie()">
}

// БЕЗОПАСНО - используй textContent
function safeDisplayComment(comment) {
  const el = document.createElement('div');
  el.textContent = comment;
  document.getElementById('comments').appendChild(el);
}

// React защищён от XSS автоматически
function CommentList({ comments }) {
  return <div>{comments.map(c => <p key={c.id}>{c.text}</p>)}</div>;
}

2. CSRF (Cross-Site Request Forgery)

Злоумышленник заставляет пользователя отправить запрос от его имени.

// УЯЗВИМО - нет защиты
fetch('/api/transfer-money', {
  method: 'POST',
  body: JSON.stringify({ amount: 1000 })
});

// ЗАЩИТА - используй CSRF токены
const csrfToken = document.querySelector('meta[name=csrf-token]').content;
fetch('/api/transfer-money', {
  method: 'POST',
  headers: { 'X-CSRF-Token': csrfToken },
  body: JSON.stringify({ amount: 1000 })
});

3. Чтение Local Storage

Данные в localStorage доступны любому коду.

// УЯЗВИМО
localStorage.setItem('token', jwtToken);
// XSS атака может прочитать это

// ЗАЩИТА 1 - httpOnly cookies
// Set-Cookie: token=...; HttpOnly; Secure

// ЗАЩИТА 2 - хранение в памяти
let accessToken = null;
useEffect(() => {
  refreshAccessToken(); // при загрузке
}, []);

4. Man-in-the-Middle (MITM) атаки

Перехват данных при передаче.

// УЯЗВИМО - HTTP
fetch('http://api.example.com/user', {
  credentials: 'include'
});

// ЗАЩИТА - HTTPS
fetch('https://api.example.com/user', {
  credentials: 'include'
});

5. Утечка через консоль

Разработчики случайно логируют чувствительные данные.

// УЯЗВИМО
console.log('User:', { email, password });

// ЗАЩИТА
if (process.env.NODE_ENV === 'development') {
  console.log('User:', user);
}

6. Инъекции и eval

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

// УЯЗВИМО
eval('setUser("' + userInput + '")');

// ЗАЩИТА - никогда не используй eval
function setUser(name) {
  return { name: sanitizeInput(name) };
}

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

• HTTPS везде
• HttpOnly cookies для токенов
• Не логируй чувствительные данные
• Escape XSS через React
• CSRF токены для изменений
• Валидация на фронте И на бэкенде
• Content Security Policy headers
• OWASP Top 10 знание

Безопасность - постоянный процесс, не одноразовая задача.