LEARNING OBJECTIVES ⌵
- Understand Client-Side Template Injection (CSTI) in frameworks (AngularJS, Vue, Mustache, Alpine.js).
- Recognize vulnerability patterns where server-side templates render raw user input into client framework evaluation scopes (
{{ user_input }}). - Exploit expressions:
{{ 7 * 7 }}, prototype pollution, constructor sandbox breakouts. - Defend applications via strict CSP and disabling inline template compilation.
🎬 INTERACTIVE VISUAL PIPELINE
Core Architecture Simulation
1. Input
Directives & Tags
2. Parse
Tokenizer & AST
3. Layout
Box Model & Flow
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.
📖 The Vulnerability Pattern
If a server renders user input directly into HTML where a client framework (e.g. Vue or Alpine.js) binds to the DOM:
<!-- Server renders PHP / Django template: -->
<div>Welcome, <?= $_GET['name'] ?>!</div>
<!-- If attacker supplies ?name={{constructor.constructor('alert(1)')()}} -->
<!-- The client JS framework evaluates the expression as executable code! 🚨 -->
📌 Key Takeaways
- Never mix server-side string concatenation with client-side template engines.
- Use pre-compiled templates (Ahead-of-Time / AOT compilation) and disable runtime
eval()in your CSP policy. - --
❓ Knowledge Check
1. Which of the following is correct?
2. Which of the following is correct?