[Webhacking.kr] Challenge(old) 10번 문제

문제 페이지는 해당 페이지와 같다.

 

 

해당 페이지를 자세히 보면 좌측에는 O 문자가 적혀있다.

 

 

우측에는 Goal 이라는 선이 있다.

 

 

O 라는 문자에 마우스를 갖다대면 yOu 로 바뀌는 것이 확인된다.

 

클릭하면 할수록  yOu 가 점점 우측으로 이동한다.

 

 

해당 문자가 우측에 Goal 까지 도착하면 해당 문제가 풀릴 것 같다.

 

해당 페이지의 소스 코드를 확인해 본다.

 

 

소스코드를 해석한다.

 

<a id=hackme style="position:relative;left:0;top:0" onclick="this.style.left=parseInt(this.style.left,10)+1+'px';

 

hackme 라는 id가 존재하고 가장 왼쪽 상단에 존재하는 것을 알 수 있다. 

 

onclick 매서드를 이용하는데 클릭 시에 parseInt(String, number) 함수가 사용하여 this.style.left 값을 10진수로 바꾼다음 1px 를 더해 this.style.left 값에 저장한다. 

 

this.style.left는 클릭한 요소(id가 hackme인 요소)의 style에서 left 값을 불러오는 것이다.

 

if(this.style.left=='1600px')this.href='?go='+this.style.left" onmouseover=this.innerHTML='yOu' onmouseout=this.innerHTML='O'>O</a><br>

 

만약 this.style.left=='1600px' 가 된다면 조건문이 실행되어 URL에 '?go='+this.style.left 가 추가된다.

 

onmouseover 메소드와 onmouseout 메소드를 통하여 마우스를 O문자위에 올려놓으면 yOu문자로 변화되는 것을 알 수있다.

 

 

<font style="position:relative;left:1600;top:0" color=gold>|<br>|<br>|<br>|<br>Goal</font>

 

1600 px의 위치가 Goal 의 위치라는 것을 확인 할 수 있다.

 

 

해당문제는 O 문자를  1600px 에 위치한 Goal로 이동시키면 해결된다는 것을 알 수 있다.

 

조건문이 참이 되었다고 가정하고 URL에 '?go='+1600px 를 추가하여 페이지를 이동해보았다.

 

 

 

페이지의 하단에 no hack라는 문구가 뜨는 것을 확인 할 수 있다.

 

URL에 해당 구문을 넣어서는 문제가 풀리지 않는다.

 

직접 <a> 태그의 this.style.left 값을 조작한다.

 

개발자 도구의 console 기능을 이용하여 hackme의 this.style.left의 값이 1599px가 되도록 한 후 onclick 메소드를 이용하여 1600px 이 되도록 수행한다.

 

 

this는 객체 자신을 가르키는 역할을 하기때문에 해당 객체의 id인 hackme로 지정하여 hackme.style.left로 입력한다.

 

상단처럼 console에 입력하면 문자 O가 Goal로 이동한 것을 볼 수 있다. 

 

 

O문자를 한번 클릭하여 this.style.left를 1600으로 바꿔준다.

 

해당 URL에 '?go='+1600px 가 추가되며 해당 문제가 풀리는 것을 확인했다.