# Client Side Template Injection (CSTI) {{#include ../banners/hacktricks-training.md}} ## Summary 它类似于 [**Server Side Template Injection**](ssti-server-side-template-injection/index.html),但在 **client** 中。**SSTI** 允许您在远程服务器上 **execute code**,而 **CSTI** 可能允许您在受害者的浏览器中 **execute arbitrary JavaScript** 代码。 **Testing** 这种漏洞与 **SSTI** 的情况非常 **similar**,解释器期望 **a template** 并将其执行。例如,使用像 `{{ 7-7 }}` 的有效载荷,如果应用程序 **vulnerable**,您将看到 `0`,如果没有,您将看到原始内容:`{{ 7-7 }}` ## AngularJS AngularJS 是一个广泛使用的 JavaScript 框架,通过称为指令的属性与 HTML 交互,其中一个显著的指令是 **`ng-app`**。该指令允许 AngularJS 处理 HTML 内容,从而在双大括号内执行 JavaScript 表达式。 在用户输入动态插入到标记为 `ng-app` 的 HTML 主体的场景中,可以执行任意 JavaScript 代码。这可以通过利用 AngularJS 的语法在输入中实现。以下是演示如何执行 JavaScript 代码的示例: ```javascript {{$on.constructor('alert(1)')()}} {{constructor.constructor('alert(1)')()}}
``` 您可以在 **AngularJS** 的 [http://jsfiddle.net/2zs2yv7o/](http://jsfiddle.net/2zs2yv7o/) 和 [**Burp Suite Academy**](https://portswigger.net/web-security/cross-site-scripting/dom-based/lab-angularjs-expression) 中找到一个非常 **基本的在线示例**。 > [!CAUTION] > [**Angular 1.6 移除了沙箱**](http://blog.angularjs.org/2016/09/angular-16-expression-sandbox-removal.html),因此从这个版本开始,像 `{{constructor.constructor('alert(1)')()}}` 或 `` 的有效载荷应该可以工作。 ## VueJS 您可以在 [https://vue-client-side-template-injection-example.azu.now.sh/](https://vue-client-side-template-injection-example.azu.now.sh) 找到一个 **易受攻击的 Vue** 实现。\ 有效载荷:[`https://vue-client-side-template-injection-example.azu.now.sh/?name=%7B%7Bthis.constructor.constructor(%27alert(%22foo%22)%27)()%7D%`](