Event Handler?
Event Handler는 특정 이벤트가 발생했을 때 실행되는 코드를 의미한다. 예를 들어, 사용자가 버튼을 클릭하거나, 마우스를 요소 위에 올리거나, 페이지가 로드되는 등의 상황에서 브라우저가 "이 이벤트가 발생했으니, 연결된 코드를 실행해야겠다"고 판단해 동작하게 만든다.
해당 패킷을 살펴보면 user에 값에 따라 placeholder 값이 바뀌는 걸 볼 수 있다. input 칸을 />로 끝낸 뒤 <script>xss attack</script> 같은 악성 스크립트를 삽입해 xss 공격을 수행할 수 있을 것이다. 하지만 <>가 필터링 되는 상황이라면 script를 사용할 수 없을 것이다. 그럴 때 대신 사용할 수 있는 것이 Event Handler이다.
onmouseover
onmouseover는 사용자가 마우스를 특정 요소 위로 올릴 때 실행되는 이벤트이다. 주로 사용자 인터페이스에 시각적 효과를 주거나 특정 동작을 트리거하는 데 사용된다.
<input type="text" onmouserover="alert(xss attack!)">해당 input 칸에 마우스를 올리게 되면 xss 공격이 발생한다. 칸을 클릭한다든지 이런 조건이 없고 갖다 대기만 해도 이벤트가 발생하기 때문에 다른 Event Handler보다 이벤트를 발생시키기 쉽다는 장점이 있다.
onfocus
HTML 요소(특히 폼 요소)가 포커스를 받을 때 실행되는 이벤트이다.
포커스란?
- 사용자가 키보드나 마우스로 해당 요소를 활성화하는 상태.
- 일반적으로 입력 필드에 커서를 두거나, 탭(Tab) 키를 눌러 접근했을 때 발생.
<input type="text" onfocus="alert(xss attack!)">해당 input 칸에 입력하려고 접근 시 이벤트가 발생한다. 사용자가 input 칸에 접근해야만 발생하기 때문에 이벤트가 무조건 발생하는 건 아니다. 그럴 때 사용하는 이벤트가 있다.
autofocus
HTML 문서가 로드될 때, 특정 입력 요소가 자동으로 포커스를 받도록 설정합니다.
<input type="text" autofocus onfocus="alert(xss attack!)">autofocus랑 onfocus랑 같이 사용하게 되면 페이지에 접속 시 자동으로 포커스가 되기 때문에 사용자가 페이지에 접속하기만 해도 이벤트가 발생한다.
onerror
onerror는 HTML 요소(특히 이미지, 스크립트 등)에서 에러가 발생했을 때 실행되는 이벤트이다. 주로 다음 상황에서 동작한다.
- 이미지 파일을 로드할 수 없는 경우
- 외부 스크립트를 로드하는 중 에러가 발생한 경우
<img src="x" onerror="alert(xss attack!)">- 브라우저가 src="x"에서 유효한 이미지를 찾지 못해 로드 에러가 발생.
- 에러가 발생하면서 onerror 속성에 정의된 JavaScript 코드가 실행.
- 이 경우, alert(xss attack!)이 실행.
onclick
onclick은 사용자가 특정 요소를 클릭했을 때 실행되는 이벤트이다. 버튼, 링크, 이미지 등 다양한 요소에 적용할 수 있으며, 버튼 클릭, 텍스트 선택, 드래그 앤 드롭 등 여러 상호작용에 사용된다.
<button onclick="alert(xss attack!)">클릭하세요</button>- 사용자가 버튼을 클릭하면 onclick 이벤트가 트리거됨.
- 이때 alert(xss attack!)이 실행.
HTML Entity?
HTML Entity는 특수 문자를 HTML 코드에 표현할 때 사용하는 문자열이다. HTML에서 특정 문자는 예약어로 사용되거나, 브라우저가 해석할 때 문제가 될 수 있기 때문에, 이를 HTML Entity로 변환해 사용한다.
HTML Entity의 보안적 역할
HTML Entity는 XSS 공격을 방어하는 데 중요한 역할을 한다. 이유는 특수 문자를 안전하게 처리하여 공격자가 삽입한 악성 스크립트가 실행되지 않도록 하기 때문이다.
HTML 특수 문자를 HTML Entity로 변환하면, 해당 문자가 브라우저에서 HTML 코드로 해석되지 않고 문자 그대로 표시되므로 스크립트가 실행되지 않는다.
- 악성 스크립트 삽입 방지
XSS 공격은 보통 사용자 입력을 통해 발생함. 예를 들어,<script>alert('XSS')</script>같은 스크립트가 웹 페이지에 그대로 출력되면, 해당 스크립트가 실행되어 사용자에게 팝업을 띄우거나, 세션 정보를 탈취할 수 있음. 하지만 입력값을 HTML Entity로 변환하면 스크립트가 실행되지 않고 단순한 텍스트로 취급된다.
- 공격자가
<script>alert('XSS')</script>를 입력한다고 가정할 때, 이를 HTML Entity로 변환하면: <script>alert('XSS')</script>로 변경됨.- 이 경우,
<script>alert('XSS')</script>가 단순한 텍스트로 표시되며, 실행되지 않음.
- 사용자 입력값을 HTML Entity로 변환하기
XSS 공격을 방지하려면 웹 애플리케이션에서 사용자 입력을 HTML Entity로 변환해야 한다. 이 방법은 악성 스크립트를 출력하기 전에 특수 문자를 안전한 엔티티로 바꾸는 것으로, 이를 통해 스크립트가 실행되지 않도록 할 수 있다.
function escapeHTML(input) {
return input.replace(/[&<>"']/g, function(match) {
switch (match) {
case '&': return '&';
case '<': return '<';
case '>': return '>';
case '"': return '"';
case "'": return ''';
}
});
}
let userInput = "<script>alert('XSS')</script>";
let safeOutput = escapeHTML(userInput);
console.log(safeOutput); // <script>alert('XSS')</script>escapeHTML함수는 사용자 입력을 HTML Entity로 변환하여 XSS 공격을 방지함.
HTML Editor
HTML Editor는 사용자로부터 입력받은 HTML 콘텐츠를 처리하여 게시판이나 웹 페이지에 표시하는데 사용된다. 하지만, 사용자가 악성 스크립트를 삽입할 수 있기 때문에 보안에 매우 취약할 수 있다. 이를 방지하기 위해서는 HTML Entity 적용, 화이트리스트 방식, 블랙리스트 방식 등을 사용하여 보안을 강화해야 한다.
1. HTML Entity 적용 문제
-
HTML Editor와 같은 WYSIWYG (What You See Is What You Get) 에디터는 사용자가 HTML 태그를 직접 작성할 수 있게 해주므로, 모든 HTML 특수문자를 HTML Entity로 변환하는 것이 불가능하거나 어려울 수 있다. 예를 들어, 사용자가 텍스트를 작성할 때 스타일이나 링크 등의 태그를 사용할 수 있어야 하는데, 이들을 HTML Entity로 변환하면 사용자 경험이 크게 저하될 수 있다.
-
HTML에서
<,>,&,",'등의 특수 문자는 HTML 코드로 해석되기 때문에 이를 HTML Entity로 변환해야만 XSS와 같은 보안 취약점을 방지할 수 있다. 하지만, 사용자가 입력하는 텍스트에서 허용된 태그를 제외한 나머지 HTML 문자는 모두 HTML Entity로 변환하는 것이 보안상 유리하다.
2. 화이트리스트 방식과 블랙리스트 방식
- 화이트리스트 방식 (허용된 태그만 남기기)
화이트리스트 방식은 허용된 태그만을 안전하게 통과시켜주고, 나머지 태그나 특수 문자는 모두 필터링하여 HTML Entity로 변환하는 방법이다. 이 방식은 안전한 태그만 허용하여 XSS 공격을 방지하는 데 유효하다.
- 허용된 태그:
<b>,<i>,<u>,<a>,<strong>,<em> - 허용되지 않은 태그:
<script>,<iframe>,<object>,<embed>등이 방법은 사용자가 텍스트에 필요한 태그를 포함할 수 있게 하면서도 악의적인 스크립트나 태그는 필터링함.
- 블랙리스트 방식 (악의적인 태그 및 이벤트 핸들러 차단)
블랙리스트 방식은 악성 태그나 이벤트 핸들러를 차단하는 방법이다. 예를 들어,<script>태그나 onmouseover, onclick 등의 이벤트 핸들러를 차단하여 XSS 공격을 방지한다. 하지만, 블랙리스트 방식은 모든 악성 코드를 차단할 수는 없으며, 우회가 될 가능성이 존재한다.
- 차단할 태그 및 이벤트:
<script>,<iframe>,onmouseover,onclick,onload등 - 이 방법은 모든 이벤트 핸들러와 악성 태그를 검출하여 이벤트 핸들러나 스크립트 실행을 방지한다.
