[Webhacking.kr] Challenge 10

Challenge 10을 풀어보자.

 

문제 화면을 보면 위 아래로 빨간 줄이 있고, 가운데에는 회색 줄이 있다.

회색 줄에는 왼쪽에 O라는 표시가 있고, 오른쪽에는 Goal 라인이 그려져 있다.

<Challenge 10의 문제 화면>

 

문제 해결을 위해 크롬 개발자 도구에서 페이지 코드를 확인해보자.

O 문자를 클릭하면 오른쪽으로 1픽셀씩 움직이는데, 그 문자가 1600픽셀에 도착하면 다른 페이지로 이동한다.

그리고 O 문자에 마우스 커서를 올리면 yOu로 바뀌고, 내리면 다시 O가 된다.

<Challenge 10의 페이지 코드>

<O 문자의 on 이벤트에 따른 변화>

 

페이지 코드에 ?go= 의 페이지로 이동한다고 되어 있으니 바로 목표값인 1600px를 넣어보자.

그랬더니, no hack 문구가 출력되면서 문제가 해결되지 않았다.

<직접적인 입력 차단>

 

그렇다면, 자바스크립트문을 이용해 문제를 해결해보도록 하자.

a 태그의 id가 hackme이므로 querySelector를 이용해 hackme를 선택하고 위치를 1599픽셀로 지정해준다.

그 후 O 문자를 한 번 더 클릭하니 문제가 해결되었다.

<O 문자 위치 이동>

<Challenge 10 문제 완료>