서론
Client Side Template Injection은 이용자의 입력 값이 client side template framework에 의해 템플릿으로 해석되어 렌더링할 때 발생함. 개발의 편의성을 높여주는 프레임워크지만 잘못된 방식으로 사용할 경우 이를 통해 XSS 취약점까지 연계하는 것이 가능함.
Client Side Template Injection
Vue
Vue 혹은 Vue.js 라고도 불리는 프론트엔드 프레임워크는 오픈소스 자바스크립트 프레임워크로, 이용자 인터페이스나 Single Page Application을 빌드할 때 사용됨.
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
위의 코드를 살펴보면 {{ }}로 감싸진 부분이 Vue 템플릿 부분이고, 해당 템플릿 내에서 문자열을 표시하거나 자바스크립트 표현식을 실행할 수 있다.
만약 여기서 템플릿 내부에 공격자의 입력이 들어가 Template Injection 취약점이 발생한다면, XSS 공격으로 이어질 수 있다.
<script src="https://unpkg.com/vue@3"></script>
<div id="app">
<?php echo htmlspecialchars($_GET['msg']); ?>
</div>
<script>
Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>위의 코드는 Vue Template Injection에 취약한 예제 소스 코드이다. 이용자로부터 입력받은 GET 메소드의 msg 파라미터를 그대로 출력하지만, htmlspecialchars 함수를 통해 꺽쇠 문자가 모두 인코딩되기 때문에 일반적인 XSS 공격은 불가능하다.
하지만 출력되는 값이 Vue의 템플릿으로 사용될 수 있기 때문에 Template Injection이 발생한다.
Vue Template Injection
Vue Template Injection이 발생하는지 확인하는 방법은 템플릿을 이용해 산술 연산을 수행해보는 것임.
{{1+1}}와 같은 산술 연산 형태의 템플릿을 입력했을 때, 연산이 실행된 형태인 2가 출력된다면 Template Injection이 발생하는 것을 확인할 수 있다.
Template Injection이 발생할 때 이를 임의 자바스크립트 코드 실행으로 연계하는 방법으로 보통 생성자(constructor)를 이용한다. Vue 템플릿 컨텍스트 내에서 생성자에 접근하여 임의 코드에 해당하는 함수를 생성하고, 이를 호출하는 방식으로 XSS 공격이 가능하다.
Vue 템플릿 컨텍스트 내에서 생성자에 접근하는 방법은 여러가지가 존재하지만 대표적으로 {{_Vue.h.constructor}}를 이용해 접근할 수 있다.
-> 이를 이용한 익스플로잇 코드는 다음과 같음. {{_Vue.h.constructor("alert(1)")()}}
AngularJS
AngularJS는 2010년 출시한 프론트엔드 프레임워크로 Google에서 개발되었으며, 타입스크립트 기반의 오픈소스 프레임워크이고 CLI 도구에서 다양한 기능을 제공하기 때문에 개발을 편리하게 해주는 프레임워크 중 하나이다.
아래는 AngularJS의 예제 코드이다.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>Vue와 마찬가지로 {{}}로 감싸진 부분이 AngularJS 템플릿 부분이며, 해당 템플릿 내에서 문자열을 표시하거나 자바스크립트 표현식을 실행할 수 있다. 만약 여기서 템플릿 내부에 공격자의 입력이 들어가 Template Injection 취약점이 발생한다면, XSS 공격으로 이어질 수 있음.
Angular Template Injection
Vue와 마찬가지로 템플릿 내부에서의 산술 연산이 실행된 결과가 출력되는지 여부로 Template Injection을 탐지할 수 있다.
AngularJS 템플릿에서 생성자에 접근하기 위해서는 {{ constructor.constructor }}로 접근할 수 있으며, 이를 이용하여 임의 코드에 해당하는 함수를 생성하고, 호출하여 공격할 수 있다.
{{constructor.constructor("alert(1)")()}}
'웹해킹 > 개념' 카테고리의 다른 글
| [Dreamhack-web] Exploit Tech: Relative Path Overwrite (1) | 2024.12.12 |
|---|---|
| [Dreamhack-web] Exploit Tech: CSS Injection (1) | 2024.12.11 |
| [Dreamhack-web] Exploit Tech: CORS vulnerability (1) | 2024.12.10 |
| [Dreamhack-Web] Exploit Tech: CSRF Token 오용 (0) | 2024.12.10 |
| [Dreamhack-web] Cookie & Session (5) | 2024.12.09 |
