Какие виды атак на фронтенде вы знаете? Как от них защититься?

Основные виды атак на фронтенде

Фронтенд-разработчики должны понимать угрозы безопасности, чтобы защитить пользователей и данные. Наиболее распространенные атаки включают XSS, CSRF, Clickjacking, SQL-инъекции и атаки через зависимости.

XSS (Cross-Site Scripting)

XSS позволяет злоумышленнику внедрить вредоносный скрипт в веб-страницу, который выполняется в браузере жертвы. Это может привести к краже cookies, перенаправлению на фишинговые сайты или изменению содержимого страницы.

Защита:

• Экранирование пользовательского ввода (например, использование textContent вместо innerHTML).
• Применение Content Security Policy (CSP) для ограничения источников скриптов.
• Использование библиотек, автоматически экранирующих данные (например, React по умолчанию экранирует JSX).

// Пример экранирования в JavaScript
function escapeHTML(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}
const userInput = '<script>alert(1)</script>';
document.getElementById('output').innerHTML = escapeHTML(userInput);

CSRF (Cross-Site Request Forgery)

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

Защита:

• Использование CSRF-токенов, которые проверяются на сервере.
• Установка атрибута SameSite для cookies (например, SameSite=Strict).
• Проверка заголовка Origin или Referer.

// Пример установки CSRF-токена в форме
<form action="/change-password" method="POST">
  <input type="hidden" name="_csrf" value="{{csrfToken}}">
  <input type="password" name="newPassword">
  <button type="submit">Изменить пароль</button>
</form>

Clickjacking

Clickjacking скрывает целевой сайт под прозрачным слоем, заставляя пользователя кликать по невидимым элементам. Например, кнопка "Лайк" может быть скрыта под видимой кнопкой.

Защита:

• Добавление заголовка X-Frame-Options: DENY или SAMEORIGIN.
• Использование CSP с директивой frame-ancestors.

// Пример настройки заголовка в Express
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  next();
});

SQL-инъекции

Хотя SQL-инъекции чаще ассоциируются с бэкендом, фронтенд может быть точкой входа. Если пользовательский ввод напрямую вставляется в SQL-запрос, злоумышленник может выполнить произвольные команды.

Защита:

• Никогда не передавать непроверенные данные в SQL-запросы.
• Использовать параметризованные запросы на сервере.
• Валидировать и санировать ввод на клиенте (но основная защита — на сервере).

Атаки через зависимости

Использование устаревших или уязвимых библиотек (например, jQuery с известными XSS) может открыть путь для атак.

Защита:

• Регулярно обновлять зависимости.
• Использовать инструменты анализа уязвимостей, такие как npm audit или Snyk.
• Минимизировать количество внешних библиотек.

Вывод: Защита фронтенда требует комплексного подхода: экранирование ввода, использование CSP, CSRF-токенов, заголовков безопасности и регулярное обновление зависимостей. Эти меры помогают предотвратить большинство распространенных атак и обеспечить безопасность пользователей.