Client Side Template Injection은 이용자의 입력이 client side template framework에 의해
템플릿으로 해석되어 렌더링될 때 발생한다.
<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라는 프론트엔드 프레임워크의 예제 코드이다.
{{}}로 감싸진 vue 템플릿 부분이 문자열을 표시하거나 자바스크립트 표현식을 실행할 수 있기 때문에
공격자의 입력이 들어간다면 취약점이 될 수 있다.
Vue 템플릿 컨텍스트 내에서 생성자에 접근하기 위해 {{_Vue.h.constructor}}를 이용할 수 있다.
{{_Vue.h.constructor("alert(1)")()}} 이런 식으로 공격을 할 수 있다.
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>{{}}로 된 부분이 AngularJS 템플릿 부분이다.
vue와 마찬가지로 공격자의 입력이 템플릿 내부에 들어가면 취약점이 발생한다.
AngularJS에서 생성자에 접근하기 위해서는 constructor.constructor를 사용해야 한다.
CSS는 HTML 요소들이 사용자에게 어떻게 보여질지 정의한다.
CSS Injection은 XSS와 유사하게 페이지가 로딩될 때 악의적인 문자열을 삽입하는 공격이다.
<style>
body { background-color: ${theme}; }
</style>
<h1>Hello, it's dreame. Interesting with CSS Injection?</h1>
if '<' in theme:
exit(0)이렇게 theme을 변수로 넣어둔 경우
이렇게 인젝션을 통해 원하는 것을 실행할 수 있다.
이런 방법들로 css injection에서 외부 url로 요청을 보낼 수 있다.
특성 선택자를 이용해서 input value값을 탈취할 수도 있다.
이런 식으로 input[value^=]에서 한글자씩 넣어보면서 요청이 전송되는지 확인할 수 있다.
'웹해킹' 카테고리의 다른 글
| 드림핵 CSS Injection 롸업 (0) | 2023.11.26 |
|---|---|
| 드림핵 Client Side Template Injection 롸업 (0) | 2023.11.26 |
| 드림핵 CSRF Advanced 롸업 (0) | 2023.11.26 |
| CSRF/CORS Bypass (0) | 2023.11.26 |
| 드림핵 CSP Bypass Advanced 롸업 (0) | 2023.11.25 |
