Как кавычка в атрибуте HTML позволяет обойти защиту от XSS

🔥 Разбор пятничного XSS Challenge — нашли уязвимость? Вчера мы разбирали интересный случай, когда разработчики попытались защититься от XSS, но забыли про одну маленькую деталь. 😈 Проблема в том, что пользовательский ввод находится внутри HTML-атрибута value. Если двойные кавычки не экранируются, мы можем выйти за пределы атрибута и добавить собственные. 🎯 Один из возможных payload:

" autofocus onfocus="alert(1)" x="

После подстановки HTML будет выглядеть так:

<input type="text" value="" autofocus onfocus="alert(1)" x="">

🧠 Разбираем по шагам: 1️⃣ Первая " закрывает исходный атрибут value. 2️⃣ autofocus просит браузер автоматически установить фокус на поле ввода. 3️⃣ onfocus="alert(1)" добавляет JavaScript-обработчик события получения фокуса. 4️⃣ x=" позволяет корректно завершить оставшуюся часть исходного HTML-атрибута. ⚡️ Что произойдёт? Если браузер установит фокус на поле ввода, сработает onfocus и выполнится alert(1). При этом важно понимать: autofocus не гарантирует автоматического выполнения во всех браузерах и условиях. Например, фокус уже может находиться на другом элементе. Но главное здесь другое: мы смогли внедрить JavaScript-обработчик, даже не используя символы < и >. 🛡 Как правильно защититься? Недостаточно просто заменять < и >. Нужно экранировать пользовательский ввод с учётом контекста, в котором он используется. Для значения HTML-атрибута необходимо корректно обрабатывать кавычки и другие специальные символы. А ещё лучше — использовать безопасные механизмы шаблонизатора или DOM API, например присваивать значение через свойство .value, а не собирать HTML из строк. 💡 Главный вывод XSS — это не всегда внедрение тега <script>. Иногда достаточно одной неэкранированной кавычки, чтобы изменить структуру HTML и получить возможность выполнения JavaScript. Поэтому при поиске XSS важно понимать не только что фильтруется, но и куда именно попадает пользовательский ввод.