CSS Injection
Last updated
Last updated
Learn & practice AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE) Learn & practice GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)
Οι επιλεγείς CSS είναι σχεδιασμένοι να ταιριάζουν με τις τιμές των χαρακτηριστικών name
και value
ενός στοιχείου input
. Εάν η τιμή του χαρακτηριστικού value του στοιχείου input αρχίζει με έναν συγκεκριμένο χαρακτήρα, φορτώνεται μια προκαθορισμένη εξωτερική πηγή:
Ωστόσο, αυτή η προσέγγιση αντιμετωπίζει έναν περιορισμό όταν ασχολείται με κρυφά στοιχεία εισόδου (type="hidden"
) επειδή τα κρυφά στοιχεία δεν φορτώνουν φόντα.
Για να παρακάμψετε αυτόν τον περιορισμό, μπορείτε να στοχεύσετε ένα επόμενο αδελφό στοιχείο χρησιμοποιώντας τον γενικό συνδυαστή αδελφών ~
. Ο κανόνας CSS στη συνέχεια εφαρμόζεται σε όλα τα αδέλφια που ακολουθούν το κρυφό στοιχείο εισόδου, προκαλώντας τη φόρτωση της εικόνας φόντου:
Ένα πρακτικό παράδειγμα εκμετάλλευσης αυτής της τεχνικής περιγράφεται στο παρεχόμενο απόσπασμα κώδικα. Μπορείτε να το δείτε εδώ.
Για να είναι αποτελεσματική η τεχνική CSS Injection, πρέπει να πληρούνται ορισμένες προϋποθέσεις:
Μήκος Payload: Ο φορέας CSS injection πρέπει να υποστηρίζει επαρκώς μεγάλα payloads για να φιλοξενήσει τους κατασκευασμένους επιλεγείς.
Επαναξιολόγηση CSS: Πρέπει να έχετε τη δυνατότητα να πλαισιώσετε τη σελίδα, κάτι που είναι απαραίτητο για να ενεργοποιηθεί η επαναξιολόγηση του CSS με τα νεοπαραγόμενα payloads.
Εξωτερικοί Πόροι: Η τεχνική υποθέτει τη δυνατότητα χρήσης εξωτερικά φιλοξενούμενων εικόνων. Αυτό μπορεί να περιορίζεται από την Πολιτική Ασφάλειας Περιεχομένου (CSP) της ιστοσελίδας.
Όπως εξηγείται σε αυτή την ανάρτηση, είναι δυνατόν να συνδυαστούν οι επιλεγείς :has
και :not
για να εντοπιστεί περιεχόμενο ακόμη και από τυφλά στοιχεία. Αυτό είναι πολύ χρήσιμο όταν δεν έχετε ιδέα τι υπάρχει μέσα στη σελίδα που φορτώνει το CSS injection.
Είναι επίσης δυνατό να χρησιμοποιηθούν αυτοί οι επιλεγείς για να εξαχθεί πληροφορία από αρκετά μπλοκ του ίδιου τύπου όπως σε:
Συνδυάζοντας αυτό με την παρακάτω @import τεχνική, είναι δυνατόν να εξάγουμε πολλές πληροφορίες χρησιμοποιώντας CSS injection από τυφλές σελίδες με blind-css-exfiltration.
Η προηγούμενη τεχνική έχει κάποια μειονεκτήματα, ελέγξτε τις προϋποθέσεις. Πρέπει είτε να μπορείτε να στείλετε πολλαπλούς συνδέσμους στο θύμα, είτε να μπορείτε να iframe την ευάλωτη σελίδα CSS injection.
Ωστόσο, υπάρχει μια άλλη έξυπνη τεχνική που χρησιμοποιεί CSS @import
για να βελτιώσει την ποιότητα της τεχνικής.
Αυτό παρουσιάστηκε πρώτα από Pepe Vila και λειτουργεί ως εξής:
Αντί να φορτώνουμε την ίδια σελίδα ξανά και ξανά με δεκάδες διαφορετικά payloads κάθε φορά (όπως στην προηγούμενη), θα φορτώσουμε τη σελίδα μόνο μία φορά και μόνο με μια εισαγωγή στον διακομιστή του επιτιθέμενου (αυτό είναι το payload που θα στείλουμε στο θύμα):
Η εισαγωγή θα λάβει κάποιο CSS script από τους επιτιθέμενους και ο περιηγητής θα το φορτώσει.
Το πρώτο μέρος του CSS script που θα στείλει ο επιτιθέμενος είναι άλλη @import
στον διακομιστή των επιτιθέμενων ξανά.
Ο διακομιστής των επιτιθέμενων δεν θα απαντήσει σε αυτή την αίτηση ακόμα, καθώς θέλουμε να διαρρεύσουν μερικοί χαρακτήρες και στη συνέχεια να απαντήσει αυτή την εισαγωγή με το payload για να διαρρεύσουν οι επόμενοι.
Το δεύτερο και μεγαλύτερο μέρος του payload θα είναι ένα payload διαρροής επιλεγμένου χαρακτηριστικού
Αυτό θα στείλει στον διακομιστή των επιτιθέμενων τον πρώτο χαρακτήρα του μυστικού και τον τελευταίο
Μόλις ο διακομιστής των επιτιθέμενων έχει λάβει τον πρώτο και τελευταίο χαρακτήρα του μυστικού, θα απαντήσει στην εισαγωγή που ζητήθηκε στο βήμα 2.
Η απάντηση θα είναι ακριβώς η ίδια με τα βήματα 2, 3 και 4, αλλά αυτή τη φορά θα προσπαθήσει να βρει τον δεύτερο χαρακτήρα του μυστικού και στη συνέχεια τον προτελευταίο.
Ο επιτιθέμενος θα ακολουθήσει αυτόν τον βρόχο μέχρι να καταφέρει να διαρρεύσει εντελώς το μυστικό.
Μπορείτε να βρείτε τον αρχικό κώδικα του Pepe Vila για να εκμεταλλευτείτε αυτό εδώ ή μπορείτε να βρείτε σχεδόν τον ίδιο κώδικα αλλά με σχόλια εδώ.
Το script θα προσπαθήσει να ανακαλύψει 2 χαρακτήρες κάθε φορά (από την αρχή και από το τέλος) επειδή ο επιλεγμένος χαρακτήρας επιτρέπει να γίνονται πράγματα όπως:
Αυτό επιτρέπει στο σενάριο να διαρρεύσει το μυστικό πιο γρήγορα.
Μερικές φορές το σενάριο δεν ανιχνεύει σωστά ότι το πρόθεμα + επίθημα που ανακαλύφθηκε είναι ήδη η πλήρης σημαία και θα συνεχίσει προς τα εμπρός (στο πρόθεμα) και προς τα πίσω (στο επίθημα) και σε κάποιο σημείο θα κολλήσει. Μην ανησυχείτε, απλώς ελέγξτε την έξοδο γιατί μπορείτε να δείτε τη σημαία εκεί.
Άλλοι τρόποι πρόσβασης σε μέρη του DOM με CSS selectors:
.class-to-search:nth-child(2)
: Αυτό θα αναζητήσει το δεύτερο στοιχείο με την κλάση "class-to-search" στο DOM.
:empty
selector: Χρησιμοποιείται για παράδειγμα σε αυτή τη γραφή:
Αναφορά: CSS based Attack: Abusing unicode-range of @font-face , Error-Based XS-Search PoC by @terjanq
Η συνολική πρόθεση είναι να χρησιμοποιήσετε μια προσαρμοσμένη γραμματοσειρά από ένα ελεγχόμενο σημείο και να διασφαλίσετε ότι το κείμενο (σε αυτή την περίπτωση, 'A') εμφανίζεται με αυτή τη γραμματοσειρά μόνο αν ο καθορισμένος πόρος (favicon.ico
) δεν μπορεί να φορτωθεί.
Χρήση Προσαρμοσμένης Γραμματοσειράς:
Μια προσαρμοσμένη γραμματοσειρά ορίζεται χρησιμοποιώντας τον κανόνα @font-face
μέσα σε ένα <style>
tag στην ενότητα <head>
.
Η γραμματοσειρά ονομάζεται poc
και ανακτάται από ένα εξωτερικό endpoint (http://attacker.com/?leak
).
Η ιδιότητα unicode-range
έχει οριστεί σε U+0041
, στοχεύοντας τον συγκεκριμένο χαρακτήρα Unicode 'A'.
Στοιχείο Object με Κείμενο Εναλλακτικής:
Ένα στοιχείο <object>
με id="poc0"
δημιουργείται στην ενότητα <body>
. Αυτό το στοιχείο προσπαθεί να φορτώσει μια πηγή από http://192.168.0.1/favicon.ico
.
Η font-family
για αυτό το στοιχείο έχει οριστεί σε 'poc'
, όπως ορίζεται στην ενότητα <style>
.
Εάν η πηγή (favicon.ico
) αποτύχει να φορτωθεί, το περιεχόμενο εναλλακτικής (το γράμμα 'A') μέσα στο tag <object>
εμφανίζεται.
Το περιεχόμενο εναλλακτικής ('A') θα αποδοθεί χρησιμοποιώντας την προσαρμοσμένη γραμματοσειρά poc
εάν η εξωτερική πηγή δεν μπορεί να φορτωθεί.
Η :target
ψευδο-κλάση χρησιμοποιείται για να επιλέξει ένα στοιχείο που στοχεύεται από ένα URL fragment, όπως καθορίζεται στην προδιαγραφή CSS Selectors Level 4. Είναι κρίσιμο να κατανοήσουμε ότι το ::target-text
δεν ταιριάζει με κανένα στοιχείο εκτός αν το κείμενο στοχεύεται ρητά από το fragment.
Ένα ζήτημα ασφαλείας προκύπτει όταν οι επιτιθέμενοι εκμεταλλεύονται τη δυνατότητα Scroll-to-text fragment, επιτρέποντάς τους να επιβεβαιώσουν την παρουσία συγκεκριμένου κειμένου σε μια ιστοσελίδα φορτώνοντας μια πηγή από τον διακομιστή τους μέσω HTML injection. Η μέθοδος περιλαμβάνει την έγχυση ενός κανόνα CSS όπως αυτός:
Σε τέτοιες περιπτώσεις, αν το κείμενο "Administrator" είναι παρόν στη σελίδα, το πόρο target.png
ζητείται από τον διακομιστή, υποδεικνύοντας την παρουσία του κειμένου. Μια περίπτωση αυτής της επίθεσης μπορεί να εκτελεστεί μέσω μιας ειδικά κατασκευασμένης διεύθυνσης URL που ενσωματώνει το εισαγόμενο CSS μαζί με ένα τμήμα Scroll-to-text:
Εδώ, η επίθεση χειρίζεται την HTML injection για να μεταδώσει τον CSS κώδικα, στοχεύοντας στο συγκεκριμένο κείμενο "Administrator" μέσω του Scroll-to-text fragment (#:~:text=Administrator
). Εάν το κείμενο βρεθεί, το υποδεικνυόμενο πόρο φορτώνεται, ακούσια σηματοδοτώντας την παρουσία του στον επιτιθέμενο.
Για την αντιμετώπιση, θα πρέπει να σημειωθούν τα εξής:
Περιορισμένη Αντιστοίχιση STTF: Το Scroll-to-text Fragment (STTF) έχει σχεδιαστεί για να ταιριάζει μόνο σε λέξεις ή προτάσεις, περιορίζοντας έτσι την ικανότητά του να διαρρέει αυθαίρετα μυστικά ή tokens.
Περιορισμός σε Κορυφαία Στοιχεία Πλοήγησης: Το STTF λειτουργεί αποκλειστικά σε κορυφαία στοιχεία πλοήγησης και δεν λειτουργεί εντός iframes, καθιστώντας οποιαδήποτε προσπάθεια εκμετάλλευσης πιο εμφανή στον χρήστη.
Αναγκαιότητα Ενεργοποίησης από τον Χρήστη: Το STTF απαιτεί μια χειρονομία ενεργοποίησης από τον χρήστη για να λειτουργήσει, πράγμα που σημαίνει ότι οι εκμεταλλεύσεις είναι εφικτές μόνο μέσω πλοηγήσεων που ξεκινούν από τον χρήστη. Αυτή η απαίτηση μειώνει σημαντικά τον κίνδυνο αυτοματοποιημένων επιθέσεων χωρίς αλληλεπίδραση του χρήστη. Παρ' όλα αυτά, ο συγγραφέας της ανάρτησης επισημαίνει συγκεκριμένες συνθήκες και παρακάμψεις (π.χ., κοινωνική μηχανική, αλληλεπίδραση με διαδεδομένα πρόσθετα προγράμματος περιήγησης) που μπορεί να διευκολύνουν την αυτοματοποίηση της επίθεσης.
Η επίγνωση αυτών των μηχανισμών και των πιθανών ευπαθειών είναι το κλειδί για τη διατήρηση της ασφάλειας του ιστού και την προστασία από τέτοιες εκμεταλλευτικές τακτικές.
Για περισσότερες πληροφορίες, ελέγξτε την αρχική αναφορά: https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/
Μπορείτε να ελέγξετε μια εκμετάλλευση χρησιμοποιώντας αυτή την τεχνική για ένα CTF εδώ.
Μπορείτε να καθορίσετε εξωτερικές γραμματοσειρές για συγκεκριμένες τιμές unicode που θα συγκεντρωθούν μόνο εάν αυτές οι τιμές unicode είναι παρούσες στη σελίδα. Για παράδειγμα:
Όταν αποκτάτε πρόσβαση σε αυτή τη σελίδα, οι Chrome και Firefox ανακτούν "?A" και "?B" επειδή ο κόμβος κειμένου της ευαίσθητης πληροφορίας περιέχει τους χαρακτήρες "A" και "B". Αλλά οι Chrome και Firefox δεν ανακτούν "?C" επειδή δεν περιέχει "C". Αυτό σημαίνει ότι έχουμε μπορέσει να διαβάσουμε "A" και "B".
Αναφορά: Wykradanie danych w świetnym stylu – czyli jak wykorzystać CSS-y do ataków na webaplikację
Η τεχνική που περιγράφεται περιλαμβάνει την εξαγωγή κειμένου από έναν κόμβο εκμεταλλευόμενη τους λυγισμούς γραμματοσειρών και παρακολουθώντας τις αλλαγές στο πλάτος. Η διαδικασία περιλαμβάνει αρκετά βήματα:
Δημιουργία Προσαρμοσμένων Γραμματοσειρών:
Οι γραμματοσειρές SVG κατασκευάζονται με γλυφές που έχουν το χαρακτηριστικό horiz-adv-x
, το οποίο ορίζει ένα μεγάλο πλάτος για μια γλυφή που αντιπροσωπεύει μια ακολουθία δύο χαρακτήρων.
Παράδειγμα γλυφής SVG: <glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>
, όπου "XY" δηλώνει μια ακολουθία δύο χαρακτήρων.
Αυτές οι γραμματοσειρές στη συνέχεια μετατρέπονται σε μορφή woff χρησιμοποιώντας το fontforge.
Ανίχνευση Αλλαγών Πλάτους:
Χρησιμοποιείται CSS για να διασφαλιστεί ότι το κείμενο δεν τυλίγεται (white-space: nowrap
) και για να προσαρμοστεί το στυλ της γραμμής κύλισης.
Η εμφάνιση μιας οριζόντιας γραμμής κύλισης, που έχει στυλ διαφορετικό, λειτουργεί ως δείκτης (oracle) ότι μια συγκεκριμένη λυγισμός, και επομένως μια συγκεκριμένη ακολουθία χαρακτήρων, είναι παρούσα στο κείμενο.
Η CSS που εμπλέκεται:
Διαδικασία Εκμετάλλευσης:
Βήμα 1: Δημιουργούνται γραμματοσειρές για ζεύγη χαρακτήρων με σημαντικό πλάτος.
Βήμα 2: Χρησιμοποιείται ένα κόλπο βασισμένο στη γραμμή κύλισης για να ανιχνευθεί πότε η γλυφή μεγάλου πλάτους (λυγισμός για ένα ζεύγος χαρακτήρων) αποδίδεται, υποδεικνύοντας την παρουσία της ακολουθίας χαρακτήρων.
Βήμα 3: Μετά την ανίχνευση μιας λυγισμού, δημιουργούνται νέες γλυφές που αντιπροσωπεύουν ακολουθίες τριών χαρακτήρων, ενσωματώνοντας το ανιχνευθέν ζεύγος και προσθέτοντας έναν προηγούμενο ή επόμενο χαρακτήρα.
Βήμα 4: Η ανίχνευση της τριών χαρακτήρων λυγισμού πραγματοποιείται.
Βήμα 5: Η διαδικασία επαναλαμβάνεται, αποκαλύπτοντας σταδιακά ολόκληρο το κείμενο.
Βελτιστοποίηση:
Η τρέχουσα μέθοδος αρχικοποίησης που χρησιμοποιεί <meta refresh=...
δεν είναι βέλτιστη.
Μια πιο αποδοτική προσέγγιση θα μπορούσε να περιλαμβάνει το κόλπο CSS @import
, βελτιώνοντας την απόδοση της εκμετάλλευσης.
Αναφορά: PoC using Comic Sans by @Cgvwzq & @Terjanq
Αυτό το κόλπο δημοσιεύθηκε σε αυτό το Slackers thread. Το charset που χρησιμοποιείται σε έναν κόμβο κειμένου μπορεί να διαρρεύσει χρησιμοποιώντας τις προεπιλεγμένες γραμματοσειρές που είναι εγκατεστημένες στον περιηγητή: δεν απαιτούνται εξωτερικές -ή προσαρμοσμένες- γραμματοσειρές.
Η έννοια περιστρέφεται γύρω από τη χρήση μιας κινούμενης εικόνας για να επεκτείνει σταδιακά το πλάτος ενός div
, επιτρέποντας σε έναν χαρακτήρα τη φορά να μεταβεί από το 'suffix' μέρος του κειμένου στο 'prefix' μέρος. Αυτή η διαδικασία χωρίζει αποτελεσματικά το κείμενο σε δύο τμήματα:
Prefix: Η αρχική γραμμή.
Suffix: Οι επόμενες γραμμές.
Οι μεταβατικές φάσεις των χαρακτήρων θα εμφανίζονται ως εξής:
C ADB
CA DB
CAD B
CADB
Κατά τη διάρκεια αυτής της μετάβασης, χρησιμοποιείται το unicode-range trick για να εντοπιστεί κάθε νέος χαρακτήρας καθώς ενώνεται με το prefix. Αυτό επιτυγχάνεται αλλάζοντας τη γραμματοσειρά σε Comic Sans, η οποία είναι σημαντικά ψηλότερη από τη προεπιλεγμένη γραμματοσειρά, προκαλώντας έτσι την εμφάνιση μιας κατακόρυφης γραμμής κύλισης. Η εμφάνιση αυτής της γραμμής κύλισης αποκαλύπτει έμμεσα την παρουσία ενός νέου χαρακτήρα στο prefix.
Αν και αυτή η μέθοδος επιτρέπει την ανίχνευση μοναδικών χαρακτήρων καθώς εμφανίζονται, δεν προσδιορίζει ποιος χαρακτήρας επαναλαμβάνεται, μόνο ότι έχει συμβεί μια επανάληψη.
Βασικά, το unicode-range χρησιμοποιείται για να ανιχνεύσει έναν χαρακτήρα, αλλά καθώς δεν θέλουμε να φορτώσουμε μια εξωτερική γραμματοσειρά, πρέπει να βρούμε έναν άλλο τρόπο. Όταν ο χαρακτήρας είναι βρεθεί, του δίδεται η προεγκατεστημένη γραμματοσειρά Comic Sans, η οποία μεγαλώνει τον χαρακτήρα και προκαλεί μια γραμμή κύλισης που θα διαρρεύσει τον βρεθέντα χαρακτήρα.
Ελέγξτε τον κώδικα που εξήχθη από το PoC:
Reference: This is mentioned as an unsuccessful solution in this writeup
Αυτή η περίπτωση είναι πολύ παρόμοια με την προηγούμενη, ωστόσο, σε αυτή την περίπτωση ο στόχος του να κάνουμε συγκεκριμένα χαρακτηριστικά μεγαλύτερα από άλλα είναι να κρύψουμε κάτι όπως ένα κουμπί ώστε να μην πατηθεί από το bot ή μια εικόνα που δεν θα φορτωθεί. Έτσι θα μπορούσαμε να μετρήσουμε την ενέργεια (ή την έλλειψη ενέργειας) και να ξέρουμε αν ένα συγκεκριμένο χαρακτηριστικό είναι παρόν μέσα στο κείμενο.
Reference: This is mentioned as an unsuccessful solution in this writeup
Σε αυτή την περίπτωση, θα μπορούσαμε να προσπαθήσουμε να διαρρεύσουμε αν ένα χαρακτηριστικό είναι στο κείμενο φορτώνοντας μια ψεύτικη γραμματοσειρά από την ίδια προέλευση:
Αν υπάρχει ταύτιση, η γραμματοσειρά θα φορτωθεί από το /static/bootstrap.min.css?q=1
. Αν και δεν θα φορτωθεί επιτυχώς, ο περιηγητής θα την αποθηκεύσει στην κρυφή μνήμη, και ακόμη και αν δεν υπάρχει κρυφή μνήμη, υπάρχει μηχανισμός 304 not modified, οπότε η απάντηση θα είναι ταχύτερη από άλλα πράγματα.
Ωστόσο, αν η διαφορά χρόνου της αποθηκευμένης απάντησης από την μη αποθηκευμένη δεν είναι αρκετά μεγάλη, αυτό δεν θα είναι χρήσιμο. Για παράδειγμα, ο συγγραφέας ανέφερε: Ωστόσο, μετά από δοκιμές, διαπίστωσα ότι το πρώτο πρόβλημα είναι ότι η ταχύτητα δεν διαφέρει πολύ, και το δεύτερο πρόβλημα είναι ότι το bot χρησιμοποιεί τη σημαία disk-cache-size=1
, που είναι πραγματικά προσεγμένο.
Αναφορά: Αυτό αναφέρεται ως μια αποτυχημένη λύση σε αυτή την αναφορά
Σε αυτή την περίπτωση μπορείτε να υποδείξετε CSS για να φορτώσετε εκατοντάδες ψεύτικες γραμματοσειρές από την ίδια προέλευση όταν συμβαίνει μια ταύτιση. Με αυτόν τον τρόπο μπορείτε να μετρήσετε τον χρόνο που απαιτείται και να ανακαλύψετε αν εμφανίζεται ή όχι ένα χαρακτήρας με κάτι σαν:
Και ο κώδικας του bot φαίνεται έτσι:
Έτσι, αν η γραμματοσειρά δεν ταιριάζει, ο χρόνος απόκρισης κατά την επίσκεψη στο bot αναμένεται να είναι περίπου 30 δευτερόλεπτα. Ωστόσο, αν υπάρχει ταίριασμα γραμματοσειράς, θα σταλούν πολλαπλά αιτήματα για να ανακτηθεί η γραμματοσειρά, προκαλώντας συνεχή δραστηριότητα στο δίκτυο. Ως αποτέλεσμα, θα χρειαστεί περισσότερος χρόνος για να ικανοποιηθεί η συνθήκη διακοπής και να ληφθεί η απόκριση. Επομένως, ο χρόνος απόκρισης μπορεί να χρησιμοποιηθεί ως δείκτης για να προσδιοριστεί αν υπάρχει ταίριασμα γραμματοσειράς.
Learn & practice AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE) Learn & practice GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)