Event Handler

DATE : 2024/1/13

What is Event Handler?

event handler에 대해 알아보기 전에 event가 무엇인지 먼저 정의해보자.

event는 HTML element에 발생한 어떤 일을 얘기한다.

이때 어떤 일이라는 건 상황마다 다른 데,

예를 들면

<input> tag에 마우스가 올라갔다 라든가.

<button> tag가 클릭 되었다 라든가.

<img> tag에 에러가 발생했다 라든가.

사용자가 키보드를 눌렀다 라든가.

...

등등 브라우저 상에서 일어날 수 있는 다양한 일을 event라 한다.

그렇다면 event handler는 무엇일까?

위에서 나열했던 이벤트가 발생했을 때, 이를 인지하여 이벤트를 처리하는 게 바로 event handler이다.

event handler를 구현하는 방법은 크게 두 가지 있는데

(1) 첫 번째는 handler를 설정해두고자 하는 HTML element에 속성으로 부여하는 것이고

(2) 두 번째는 HTML element를 아예 JS로 가져가 Event Listener를 추가하는 것이다.

오늘은 수많은 event handler 중에서도 XSS에서 대표적으로 자주 사용되는 거 위주로 살펴볼 것이다.

1) onmouseover

첫 번째로 알아볼 event handler는 onmouseover이다.

onmouseover은 element에 마우스에 올라가게 되면 발생하는 이벤트이다.

마우스와 관련된 handler 중에서도 onmouseover은

<input> tag가 있을 때, 이 tag에 살짝 닿기만 해도 이벤트가 발생하기 때문에

사용자가 해당 element를 클릭해야 한다, 커서를 누르고 있어야 한다 등등의

이벤트 보다는 상대적으로 이벤트를 발생 시키기 쉽다.

<input type="text" placeholder="Here!!" onmouseover="alert('over over')">

HTML tag에 속성으로 Event Handler를 부여하기 위해서는 이벤트와 함께

이벤트가 발생했을 때, 실행시킬 JS 코드를 입력해주면 된다.

위의 코드 한 줄이면 <input> tag에 마우스 커서가 조금만 스쳐도 팝업 창이 뜬 결과를 볼 수 있을 것이다.

2) onfocus

두 번째로 알아볼 이벤트는 onfocus이다.

onfocus는 HTML element에 focus! 즉 element가 선택(클릭)된 이벤트를 의미한다.

<input type="text" placeholder="here" onfocus="alert('focus on')">

onfocus event를 처리하기 위해서는 위와 같이 HTML element에 속성을 부여하면 된다.

위와 같이 코드를 작성한 경우, 사용자가 <input> tag를 클릭해 태그에 focus 되었을 때

event handler가 이를 인지하여 팝업 창을 띄우게 된다.

참고로 onfocus의 경우에는

예시와 같이 "사용자가 <input> tag를 클릭한다"라는 행위를 기다릴 필요가 있다.

하지만 autofocus 속성을 추가하면 페이지에 로드 되면서 자동으로 focus 되기 때문에

<input type="text" placeholder="here" onfocus="alert('focus on')" autofocus>

사용자가 해당 태그를 클릭하기를 기다릴 필요가 없어진다!

이때는 autofocus를 사용하지 않은 경우와 달리

페이지에 접근하기만 해도 자동으로 autofocus가 실행되어 팝업 창이 뜨는 걸 볼 수 있다.

3) onerror

세 번째로 알아볼 이벤트는 onerror이다.

onerror는 HTML element에 에러가 발생함을 의미하는 이벤트이다.

"HTML element에 에러가 발생"한다는 건

<img src=1 onerror="alert('Error')">

<img> tag에 src가 1인 경우를 예시로 볼 수 있다.

<img> tag는 화면에 이미지를 출력하기 위해서 src에 주어진 경로로 이미지를 요청하게 된다.

위의 예시의 경우에는 <img> tag를 보고 브라우저가 1이라는 경로로 이미지를 요청하게 될 텐데

이 경로에는 당연히 이미지가 존재하지 않기 때문에 404 NOT FOUND 에러가 발생하게 된다.

따라서 의도적으로 에러를 발생 시켜 스크립트를 실행 시키는 방식으로 활용될 수 있는 것!

결과를 확인해보면 브라우저로 들어가는 동시에 (<img>를 화면에 띄우기 위해

src 경로로 이미지를 요청하게 되고 에러가 발생하면서) 팝업 창이 나타난 모습을 볼 수 있을 것이다.

4) onclick

마지막으로 살펴볼 이벤트는 onclick이다.

onclick은 HTML element를 클릭했을 때 발생하는 이벤트이다.

<input type="submit" value="Click!" onclick="alert('clicked!')">

사용자가 버튼을 클릭했을 때 event handler가 동작하도록 처리하기 위해선

위와 같이 코드를 작성해볼 수 있다.

onclick event를 처리하도록 속성을 부여한 버튼을 클릭하게 되면

event handler가 클릭이라는 이벤트를 인지하여 스크립트 내용대로 팝업 창을 띄워주게 된다.

지금까지는 event handler를 사용하기 위해 HTML tag에 속성을 부여했지만

이와 동일한 동작을 구현하기 위해선 JS code를 다음과 같이 작성할 수도 있다.

<input type="submit" value="Click!" id="btn">

<script>
    const btn = document.getElementById("btn");

    btn.addEventListener("click",()=>{
        alert("clicked!");
    });
</script>

JS code에서 event handler를 추가하기 위해선 addEventListener를 사용하면 된다.

addEventListener(event, code)

addEventListener의 첫 번째 인자 값으로는 처리할 이벤트를,

두 번째 인자 값으로는 이벤트가 발생했을 때 실행하고자 하는 코드를 작성하면 된다.

---

이렇게 해서 event handler에 관해 대표적인 예시를 살펴보았다.

XSS에서는 스크립트를 얼마만큼 자유롭게 활용하느냐가 중요한 부분이기 때문에

흔히 사용되는 event handler에 대해서는 알고 넘어가는 게 좋을 거 같다! 🤗