Cross-Site Scripting (XSS) — один из самых коварных и распространённых видов уязвимостей в веб-разработке. Даже опытные разработчики иногда «ловят» XSS, особенно когда дело касается шаблонизаторов. Сегодня разберём, как избежать XSS, что уже умеют делать популярные движки, а что остаётся вашей ответственностью.
Пример в Twig:
Если в username прилетит что-то вроде:
то на странице вы увидите:
и атака не сработает.
⚠️ Но будьте осторожны: как только вы используете |raw в Twig или {!! !!} в Blade — вся защита отключается.
⚠️ Опасные конструкции в EJS и Pug
Не все движки заботятся о вашей безопасности. Например:
EJS
Pug
Ошибка многих начинающих разработчиков — «ускорить» работу и вставлять HTML напрямую. Но это прямое приглашение к XSS.
💣 Реальные примеры атак
Представим, что злоумышленник регистрируется и в качестве имени пользователя указывает:
Если шаблонизатор не экранирует вывод — этот код выполнится в браузере жертвы.
Более сложный пример (уход от фильтров):
В таких случаях защита на уровне шаблонизатора уже не всегда помогает — нужно фильтровать ввод.
🔍 Фильтрация пользовательского ввода
Простое правило: валидируйте и фильтруйте данные до того, как они попадут в шаблон.
В PHP:
В Node.js:
📊 Инфографика: Где прячется опасность
📋 Сравнительная таблица: безопасно или опасно?
🔥 Пример, как выглядит атака в уязвимой конструкции
Ввод злоумышленника:
Опасный вывод (EJS <%- var %>):
👉 Сработает JavaScript, выполненный в браузере жертвы.
Безопасный вывод (EJS <%= var %>):
🛠 Чеклист безопасного вывода в шаблонизаторах
✅ Используйте автоматическое экранирование по умолчанию
✅ Не отключайте его без веской причины
✅ Фильтруйте пользовательский ввод на бэкенде
✅ Для HTML, JS и CSS — используйте разные фильтры
✅ Проводите периодический аудит кода
💬 Вывод: XSS — это не просто баг, это часто входная точка для кражи данных, угонов сессий и вредоносных действий от лица пользователя. Потратьте немного времени на защиту — и сэкономите себе недели на устранение последствий.
Безопасность — это не та область, где можно «на авось». Даже если ваш шаблонизатор по умолчанию экранирует всё, всегда проверяйте, что выводите в HTML, и не доверяйте пользовательскому вводу.
🚀 Что можно сделать прямо сейчас:
- Проверьте свой код на использование опасных конструкций ( raw, {!! !!}, {{{ }}}, != ).
- Внедрите автоматическое тестирование на XSS в проект.
- Поделитесь этой статьёй с коллегами, чтобы они тоже избежали ошибок.
- Сохраните инфографику как «шпаргалку» для команды.
А теперь — загляните в свой проект и попробуйте найти хотя бы одну потенциальную XSS-уязвимость. Поверьте, это полезнее, чем кажется 😉