- Регистрация
- 7 Авг 2025
- Сообщения
- 19
- Реакции
- 0
- Баллы
- 1
- Возраст
- 31
Как использовать HTML-всплывающие окна (popover) в Chrome и их влияние на XSS-уязвимости
С выходом последних обновлений Chrome появилась новая и малоизвестная функция — HTML-всплывающие окна (popover). Эта возможность позволяет создавать всплывающие элементы без использования JavaScript. И, как ни странно, именно это нововведение открывает новый вектор для потенциальных XSS-атак.Что такое popover и как он работает?
HTML-атрибут popover делает элемент невидимым до тех пор, пока он не будет явно отображён с помощью связанного элемента, обладающего атрибутом popovertarget. Например:<button popovertarget="popup">Нажми меня</button>
<div popover id="popup">Я — всплывающее окно</div>
Эта функциональность прекрасно справляется с созданием всплывающих окон для уведомлений, модальных окон или подсказок. Но, как выяснилось, при неправильной обработке пользовательских данных она может стать источником XSS-уязвимостей.
Использование onbeforetoggle для запуска XSS
Особый интерес представляет событие onbeforetoggle, которое запускается в момент активации всплывающего окна. Это событие может использоваться даже в скрытых элементах, что открывает неожиданные возможности для внедрения вредоносного кода:<button popovertarget="x">Click me</button>
<xss onbeforetoggle=alert(1) popover id="x">XSS</xss>
Нажатие на кнопку вызывает всплывающее окно, в результате чего срабатывает событие onbeforetoggle, и JavaScript-код выполняется.
XSS во скрытых полях форм
Одна из опасных особенностей заключается в том, что XSS можно внедрить даже в скрытое поле формы:<button popovertarget="x">Click me</button>
<input type="hidden" value="test" popover id="x" onbeforetoggle=alert(1)>
Хотя такие элементы обычно не взаимодействуют напрямую с пользователем, всплывающая система Chrome позволяет активировать их события простым нажатием кнопки.
Один идентификатор — два элемента
Особую угрозу представляет возможность использования одинакового id у нескольких элементов. Если у вас есть скрытое поле с вредоносным скриптом и существующее всплывающее окно с тем же идентификатором, браузер будет использовать первый найденный элемент:<input type="hidden" popover id="x" onbeforetoggle=alert(1)>
<div popover id="x">Я обычный popup</div>
<button popovertarget="x">Нажми</button>
В результате запускается событие в скрытом поле, несмотря на наличие "легального" всплывающего окна.
XSS в <meta>-тегах через popover
Ещё одна неожиданная уязвимость — использование popover в meta-элементах внутри <head>. Хотя meta-теги обычно не участвуют в DOM-взаимодействиях, при наличии элемента с popovertarget можно активировать событие и в них:<head>
<meta name="viewport" content="width=device-width" popover id="newsletter" onbeforetoggle=alert(1)>
</head>
<body>
<button popovertarget="newsletter">Подписаться</button>
<div popover id="newsletter">Форма подписки</div>
</body>
Таким образом, даже данные в <meta> становятся потенциальной мишенью.
Почему это опасно?
Функция popover может быть полезна в UI, но если веб-приложение не экранирует пользовательские данные, это превращается в XSS-апокалипсис. Уязвимости:- Не требуют JavaScript для создания модальных окон.
- Активируются простым нажатием кнопки.
- Работают в скрытых и служебных элементах (input hidden, meta).
- Часто обходят Web Application Firewall (WAF), так как используют нестандартные события (onbeforetoggle).
Как защититься?
Чтобы предотвратить XSS-атаки с использованием popover, необходимо:- Экранировать все пользовательские данные, вставляемые в DOM.
- Не позволять HTML-инъекции в id, on* события и другие чувствительные атрибуты.
- Использовать Content Security Policy (CSP) для блокировки выполнения встроенных скриптов.
- Проводить регулярный аудит кода на наличие уязвимостей.
Вывод
Новая функция popover в HTML и Chrome открывает интересные возможности для создания всплывающих окон — но также и новые пути для XSS-атак. Даже такие "безопасные" элементы, как скрытые поля и мета-теги, могут использоваться злоумышленниками. Разработчикам стоит внимательно отнестись к внедрению этой технологии, особенно в контексте безопасности пользовательских данных.