Template Injection (Client-side)

A injeção de template (Template Injection) ocorre quando a entrada de um usuário é embutida em um template de forma que ela seja interpretada pelo motor de template do framework como código ou diretivas, em vez de texto puro.

Como ocorre no Front-end?

Embora mais comum no Backend (SSTI), pode ocorrer no Front-end se você estiver usando bibliotecas de template dinâmico ou se o seu framework for configurado para compilar templates em tempo de execução a partir do DOM (o que era comum no AngularJS, mas é raro no React).

O Perigo

O atacante pode injetar expressões do framework (ex: 49) para executar cálculos ou, em casos mais graves, acessar o escopo da aplicação e roubar dados.

---

Como fazer vs Como não fazer

✅ Como fazer

• Utilize a compilação de templates em tempo de build (AOT - Ahead of Time), que é o padrão no React e na maioria das configurações de Vue modernos.
• Utilize exclusivamente as ferramentas oficiais do framework para renderizar dados.

❌ Como não fazer

• Evite gerar strings de código ou de templates dinamicamente baseadas em entradas de usuários.
• Não utilize bibliotecas de template que usem eval() ou o construtor new Function() internamente com dados não confiáveis.
• Se estiver usando o Vue com o compilador em tempo de execução, nunca use entradas de usuários dentro de diretivas como v-bind ou em locais onde o Vue tentará parsear a string como um template.