# DOM XSS : LAB \[6]

## :exclamation:DOM XSS in <mark style="color:blue;">AngularJS</mark> expression with angle brackets and double quotes HTML-encoded

<figure><img src="https://991238191-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fem8pSZTq61ZQGbRcOJ8d%2Fuploads%2FMibWmYMIrMNdLHFqMDeQ%2FDOM%20xss_8.png?alt=media&#x26;token=98d3f3c9-19df-4fac-a280-d8c52e4a9789" alt=""><figcaption></figcaption></figure>

이번 LAB을 풀기 위해서는 간단하게 angular JS에 대한 지식이 필요하다!

전반적인 내용을 다루지는 않고 이번 LAB을 해결하기 위해서 필요한 내용만 보고 넘어가자.

**(1)** angular JS는 <mark style="color:blue;">**{{\_\_expression\_\_}}**</mark> double braces 기호 안에 작성한다.

**(2)** angluar JS에서는 ng-로 시작하는 directives를 사용한다. (ex. ng-app, ng-model, ng-init)

딱 이 정도 내용이면 이번 LAB을 풀기엔 충분하다!

그럼 바로 문제를 풀어보도록 하자.&#x20;

<figure><img src="https://991238191-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fem8pSZTq61ZQGbRcOJ8d%2Fuploads%2FNU9vwL3Epq4nLyjkL0Td%2FDOM%20xss_9.png?alt=media&#x26;token=c5d4f147-4d7e-4432-b292-b2e0d9d4c81a" alt=""><figcaption></figcaption></figure>

현재 LAB에서는 페이지 중앙에 블로그를 찾아볼 수 있는 검색 기능이 제공되고 있다.&#x20;

사용자가 어떤 내용을 검색하면 해당 데이터가 search parameter로 사용되는 동시에&#x20;

화면에 출력 됨을 알 수 있는데&#x20;

<figure><img src="https://991238191-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fem8pSZTq61ZQGbRcOJ8d%2Fuploads%2FBC0kXXgL2kz2ydk8VFGq%2FDOM%20xss_10.png?alt=media&#x26;token=134c76a1-f40a-4550-ba47-6e89873c9b79" alt=""><figcaption></figcaption></figure>

search parameter가 바로 화면에 출력 되는 게 맞는 지 확인하기 위해 값을 바꿔 보았더니&#x20;

바로 Response에 적용되는 걸 확인할 수 있었다.

다만, 태그를 삽입할 때 필요한 angle bracket 기호가 대체 문자로 치환된다는 사실을 파악했다.

태그를 삽입할 수 없는 상태라면, 스크립트를 실행하기 위한 다른 방법을 찾아봐야 한다..!

이때 떠오른 것이 바로, <mark style="color:blue;">**directives**</mark>!&#x20;

directives는 HTML element에 속성처럼 부여하는 값이라서&#x20;

angular JS를 사용했다면 Packet 속에서 directives를 찾아낼 수 있을 것이다.&#x20;

<figure><img src="https://991238191-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fem8pSZTq61ZQGbRcOJ8d%2Fuploads%2FtdxygfJmNDNADD6cLab5%2FDOM%20xss_11.png?alt=media&#x26;token=f256f431-1af5-4b19-8575-e88697ab8ed4" alt=""><figcaption></figcaption></figure>

바-로 Packet에서 ng로 시작하는 속성을 찾아봤더니 \<body> tag에&#x20;

사용된 ng-app을 발견할 수 있었다. :smirk:

사용자가 검색한 내용은 \<body> tag 안에 들어있는 \<h1> tag이기 때문에&#x20;

angular JS를 삽입하면 실행할 수 있다.

```
{{$on.constructor('alert("hanhxx")')()}}
```

처음에 말했듯이 angular JS는 <mark style="color:blue;">**{{ }}**</mark> 이 안에 스크립트를 내용을 작성해야 하기 때문에&#x20;

위와 같이 실행하고자 하는 스크립트 내용을 적어줘야 한다.

<figure><img src="https://991238191-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fem8pSZTq61ZQGbRcOJ8d%2Fuploads%2FjTMzhgre8sf2hqInkJl2%2FDOM%20xss_12.png?alt=media&#x26;token=755a885d-ffe0-4e5e-b7c8-2181424dbd56" alt=""><figcaption></figcaption></figure>

마지막으로 준비한 스크립트를 search parameter에 넣어주면!

ng-app directives 안에 {{\_\_script\_\_}}가 들어가면서 alert() 함수가 실행된 결과를 확인할 수 있게 된다! :thumbsup:
