a 태그 자동 실행 기법(tabindex/onfocusin)

<a tabindex=1 onfocusin=location.href="javascript:alert('1')" autofocus>hi</a>

자동으로 포커싱해줘서 alert 발동됨 분석 ㄱ

 

tabindex는 html 속성으로서, tabindex 속성을 적용한 부분이 tab으로 탐색하는 도중 몇 번째에 위치할 것인지를 지정한다.

글로 봤을 땐 뭔가 와닿지 않을 수 있으나 직접 보면 너무너무 쉽다.

탭 키를 눌러 Ragdo11's board에 포커스되어 있던것이 제목탭이 포커싱되게 바뀌었다. 평소에도 자주 사용하던 이것이 tab 탐색이다. 어렵지 않음.

 

이렇게 탭 키를 누르다보면 순차적으로 포커싱을 하는 것을 알 수 있는데 tabindex를 이용해 포커싱이 되지 않게 할 수도 있고 먼저 포커스를 받게 한다던가 순서를 지정해줄 수도 있다.

C언어도 그렇고 HTML 마크업 언어도 그렇고 공부하다보면 어느 정도 통용되는 것을 느낄 수 있는데 주어진 순서나 흐름을 임의로 바꾸거나 하는 행위는 상당히 좋지 않은 행위로 여기는 것을 알 수 있다. 그래서 tabindex 속성을 그렇게 많이 사용하지 않는 것으로 여겨졌으나 요새는 특정 상황에서 유용하게 사용한다고는 하는 것 같다.

 

tabindex 속성을 테스트하기 위해 XSS 취약점을 사용해 text 박스를 4개 정도 생성했다. 탭 키로 탐색을 하면 위의 박스부터 아래 박스까지 순차적으로 탐색이 될 것이다. 하지만 내가 그 중 하나를 tabindex 속성으로 값을 주어 먼저 포커싱되게 할 수 있다.

 

<input type=text><br>
<input type=text><br>
<input type=text tabindex=1><br>
<input type=text><br>

위와 같은 형태로 지정해주었음!

 

연속된 장면을 사진으로만 자꾸 보여주려다보니 좀 밋밋했는데 GIF 처음 써보니까 생각보다 간편하고 보기도 좋네 히히

아무튼 'tabindex=1'을 지정하지 않았다면 게시판 이름부터 탭 탐색이 순차적으로 이루어졌을텐데 바로 3번째 text 필드로 탭이 이동해버린다.

 

<input type=text><br>
<input type=text tabindex=-1><br>
<input type=text tabindex=0><br>
<input type=text><br>

이번엔 tabindex 속성값을 -1과 0으로 지정해주었다. 기본적인 대화형 컨텐츠의 tabindex 디폴트 값이 0이다. 첫 번째 text 필드와 마지막 필드에 tabindex 값을 따로 지정해주진 않았지만 tabindex=0과 같다고 볼 수 있다.

비대화형 컨텐츠의 tabindex 기본 값은 -1로 탭 탐색이 이루어질 필요가 없는 곳에 이와 같이 사용할 수 있다. 두 번째 필드의 tabindex 속성값을 -1로 주었으니 저 부분은 탭 탐색이 이루어지지 않을 것이다.

 

위에 설명한대로 2번째 필드는 탭으로 접근이 되지 않고, 3번째 필드는 tabindex 속성을 부여하지 않은 다른 필드들과 같이 순차적으로 탐색이 되고 있는 모습을 보여준다.

그 외에도 양수값으로 탭 탐색 순서를 이리저리 결정할 수도 있긴 하다. 그런데 굳이..??

 

일단 tabindex가 이제 어떤 속성이고 어떤 역할을 하는지는 알겠다. 근데 왜 autofocusing을 해주는데 tabindex 속성을 사용할 필요까지 있었나??

>> 우선 autofocus 속성이 발동하고, onfocusin 이벤트가 발생되게 하려면 포커싱이 되어야 한다. 내가 아무리 onfocusin 이벤트로 대상을 잡고 autofocus 속성을 사용하였다 해도 포커스가 되지 않는데 어떻게 원하는 결과가 나오겠는가..!

tabindex는 요소에 focus가 되도록 만들어주어 autofocus를 위한 이벤트와 속성이 발동되게 만들어줄 수 있다.

 

Q. 어 그럼 tabindex=-1로 지정하면 포커스가 되지 않는건가??

>> 아니다! tabindex를 지정하면 기본적으로 포커스가 가능하게 된다. 다만 -1로 지정할 경우에는 탭 탐색만 되지 않는다라고 생각하면 된다!

 

XSS event handler

onfocusin은 위에서 다루었던 onfocus와 거의 동일한 이벤트 핸들러라고 보면 된다. 두 핸들러의 차이점은 아래와 같다.

• onfocus는 버블링되지 않음 -> 이벤트가 부모 요소로 전파되지 않음
• onfocusin은 버블링 가능 -> 이벤트가 부모 요소로 전파됨

아하 그렇구나. 그런데 부모 요소로 전파된다는게 글로만 봐서 감이 잡히질 않는데...

<div onfocusin="alert('1')">
	<input type=text>
</div>

<div onfocus="alert('1')" tabindex=0 autofocus>

 

위의 onfocusin 이벤트가 들어간 div 태그를 보면 안에 자식 태그로 input 태그가 존재하고, 이 input 태그가 포커싱을 받더라도 부모에게 이벤트가 전파되어 alert가 발동하게 된다. 만약 onfocus를 사용했을 경우 부모 요소로 이벤트가 전파되지 않기 때문에 alert가 뜨지 않음.

그래서 만약 onfocus를 이용하려면 자기 자신이 직접 이벤트가 발생해야 한다. div 태그를 사용했기 때문에(비대화형) 포커싱이 되지 않으므로 tabindex로 포커스를 할 수 있게 해주고 autofocus로 자동 포커스가 되게 해주었다. 뭐 그냥 일반적인 input 태그로 직접 포커스해도 되긴 하지만 배운거 연습삼아서!!

 

마지막으로 <a tabindex=1 onfocusin=location.href="javascript:alert('1')" autofocus>hi</a> 이 구문이 어떻게 작동하는지 보고 마무리.

끝