Что такое XSS (cross-site scripting)? Какие виды XSS существуют и как от них защититься на фронте?

1️⃣ Как кратко ответить

XSS (cross-site scripting) — это уязвимость, позволяющая злоумышленникам внедрять вредоносные скрипты в веб-страницы, которые затем выполняются в браузере других пользователей. Существуют три основных вида XSS: Stored, Reflected и DOM-based. Защита на фронте включает в себя использование Content Security Policy (CSP), экранирование пользовательского ввода, избегание небезопасных методов работы с DOM и регулярные обновления библиотек.

2️⃣ Подробное объяснение темы

XSS (cross-site scripting) — это тип уязвимости безопасности, который позволяет злоумышленникам внедрять вредоносные скрипты в веб-страницы, которые затем выполняются в браузере других пользователей. Это может привести к краже данных, захвату сессий пользователей и другим атакам.

Виды XSS

1. Stored XSS (Хранимый XSS):

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

2. Reflected XSS (Отраженный XSS):

   • Вредоносный скрипт передается через URL или форму и немедленно возвращается сервером в ответе. Например, если злоумышленник отправляет ссылку с вредоносным кодом, и пользователь переходит по этой ссылке, скрипт выполняется в его браузере.

3. DOM-based XSS:

   • Вредоносный скрипт изменяет DOM напрямую в браузере, без участия сервера. Это происходит, когда JavaScript на странице небезопасно обрабатывает данные из URL или других источников.

Защита на фронте

1. Content Security Policy (CSP):

   • CSP — это HTTP-заголовок, который ограничивает, какие ресурсы могут быть загружены и выполнены на странице. Это помогает предотвратить выполнение неавторизованных скриптов.

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

   • default-src 'self'; — разрешает загрузку ресурсов только с того же домена.
   • script-src 'self' https://trusted.cdn.com; — разрешает выполнение скриптов только с того же домена и указанного CDN.

2. Экранирование пользовательского ввода:

   • Все данные, вводимые пользователем, должны быть экранированы перед отображением на странице. Это предотвращает выполнение вредоносных скриптов.

   function escapeHtml(unsafe) {
       return unsafe
           .replace(/&/g, "&")
           .replace(/</g, "&lt;")
           .replace(/>/g, "&gt;")
           .replace(/"/g, "&quot;")
           .replace(/'/g, "&#039;");
   }
   

   • replace(/&/g, "&") — заменяет амперсанд на HTML-сущность.
   • replace(/</g, "&lt;") — заменяет символ "меньше" на HTML-сущность.
   • Аналогично для других символов.

3. Избегание небезопасных методов работы с DOM:

   • Избегайте использования innerHTML, document.write и других методов, которые могут вставлять HTML-код напрямую. Вместо этого используйте безопасные методы, такие как textContent или setAttribute.

   const element = document.createElement('div');
   element.textContent = userInput; // безопасно вставляет текст
   document.body.appendChild(element);
   

4. Регулярные обновления библиотек:

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

Эти меры помогут значительно снизить риск XSS-атак и защитить пользователей вашего веб-приложения.