🔎 What is Client Side Template Injection?

프레임워크를 사용하면 DOM 내의 데이터를 수정하기에 간편하고, 웹 페이지를 컴포넌트화 하여 작성할 수 있기 때문에 개발하는데에 있어서 굉장히 편리해지기 떄문에 프론트엔드 프레임워크를 자주 사용합니다. 보편적으로 사용되는 종류로는 Vue, React, AngularJS 등이 존재합니다.
CSTI는 이용자의 입력값이 client side template framework에 의해 템플릿으로 해석되어 렌터링될 때 발생합니다.
개발의 편의성을 높여주는 프레임워크지만 잘못된 방식으로 사용될 경우, 이를 통해 XSS 취약점까지 연계하는것이 가능합니다.

Vue (https://vuejs.org/)

오픈소스 자바스크립트 프레임워크로 이용자 인터페이스나 Single Page Application을 빌드할때 사용되며 Vue 혹은 Vue.js라고 불립니다.
`` 로 감싸진 부분이 Vue 템플릿 부분이며 해당 템플릿 내에서 문자열을 표시하거나, 자바스크립트 표현식을 실행할 수 있습니다.

<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에 취약한 코드입니다.
이용자로부터 입력받은 GET 메소드의 msg 파라미터를 그대로 출력하지만, htmlspecialchars 함수를 통해 꺽쇠 문자가 모두 인코딩 되기 떄문에 일반적인 XSS 공격은 불가능하지만, 출력되는 값이 Vue 템플릿으로 사용될 수 있기 떄문에 Template Injection이 발생합니다.

<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>

Template Injection이 발생하는지 확인하는 간단한 방법은 `` 과 같은 산술 연산형태의 템플릿을 입력했을 때, 값이 2 가 출력된다면 Template Injection이 발생하는 것으로 확인할 수 있습니다.

Template Injection이 발생할 때 이를 임의 자바스크립트 코드 실행으로 연계하는 방법으로는 보통 생성자(constructor)를 이용하빈다. Vue 템플릿 컨텍스트 내에서 생성자에 접근하여 임의 코드에 해당하는 함수를 생성하고, 이를 호출하는 방식으로 XSS 공격이 가능합니다.
Vue 템플릿 컨텍스트 내에서 생성자에 접근하는 방법은 여러가지가 존재하지만 대표적으로 `` 를 이용해 접근이 가능합니다.

{{_Vue.h.constructor("alert(1)")()}}

AngularJS (https://angular.io/docs)

앵귤러JS는 Google에서 개발하여 2010년 출시된 프론트엔드 프레임워크입니다.
AngularJS는 타입스크립트 기반의 오픈소스 프레임워크이며 CLI 도구에서 다양한 기능을 제공하기 때문에 개발을 편리하게 해주는 프레임워크 중 하나입니다.
Vue 와 마찬가지로 `` 로 감싸진 부분이 AngularJS 템플릿 부분이며, 해당 템플릿 내에서 문자열을 표시하거나, 자바스크립트 표현식을 실행할 수 있습니다.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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>

AngularJS Template Injection에 취약한 예제 소스코드로 입력받은 GET메소드의 msg파라미터를 그대로 출력하지만, 꺽쇠가 모두 인코딩 되기 떄문에 XSS 공격은 불가능하지만 출력되는 값이 AngularJS의 템플릿으로 사용될 수 있기 떄문에 Template Injection이 발생할 수 있습니다.

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  </head>
  <body>
      <?php echo htmlspecialchars($_GET['msg']); ?>
  </body>
</html>

AngularJS 템플릿에서 생성자에 접근하기 위해서는 `` 로 접근할 수 있습니다.
이를 이용하여 임의 코드에 해당하는 함수를 생성하고, 호출하여 공격할 수 있습니다.

{{ constructor.constructor("alert(1)")() }}

🍁 Cheat sheet

👀 How to Prevent ?

📃 References

Client Side Template Injection (CSTI)

🔎 What is Client Side Template Injection?

Vue (https://vuejs.org/)

AngularJS (https://angular.io/docs)

🍁 Cheat sheet

👀 How to Prevent ?

📃 References

CVE-2022-26134

CSS Injection

IP 대역 분할 표

Bypass NAC

AWS Cheat Sheet

Latest Posts

Web3 자료 모음

토큰기반 인증에서 bearer 란?

Client Side Template Injection (CSTI)

🔎 What is Client Side Template Injection?

Vue (https://vuejs.org/)

AngularJS (https://angular.io/docs)

🍁 Cheat sheet

👀 How to Prevent ?

📃 References

CVE-2022-26134

CSS Injection

You may also like

IP 대역 분할 표

Bypass NAC

AWS Cheat Sheet

Latest Posts

Web3 자료 모음

토큰기반 인증에서 bearer 란?

Explore Tags