[Webhacking.kr] Challenge 16 풀이

** 이 문제는 크롬보다는 익스플로러 환경에서 풀어야 더 정확히 풀 수 있으므로 익스플로러 사용을 권장한다.

 

Challenge 16 첫 화면

개발자 도구를 실행한다.

먼저 body 부분을 확인해보자.

Challenge 16의 body

onkeypress는 키보드 이벤트 속성 중 하나로, 사용자가 키보드의 키를 눌렀을 때 해당 키의 ASCII 코드 값을 반환하는 event.keyCode를 인자로 받는다. 이 소스에서는 사용자의 키보드 입력값이 mv라는 함수의 인자로 들어간다.

또한 onload 이벤트에 의해 페이지가 로드된 후 바로 kk 함수가 호출된다.

 

이번엔 script 부분을 확인해보자.

challenge 16의 script

맨 첫 부분에 나온 

document.body.innerHTML+="<font color=yellow id=aa style=position:relative;left:0;top:0>*</font>";

코드는 aa라는 이름의 *을 (x, y) = (0, 0) 위치에 출력한다는 뜻이다.

 

그 다음 두 개의 함수(mv, kk)가 정의되어 있는데, 먼저 kk 함수부터 살펴보자.

rndc 변수에는 0 ~ 9000000 사이의 임의의 정수 값이 들어가며, font color를 설정하는데 사용된다.

kk 함수는 x, y를 인자로 받으면 aa라는 이름의 *을 (x, y) 위치에 출력한다. (*의 색상은 랜덤)

 

mv 함수에서는 먼저 kk 함수를 호출하여 star라는 이름의 *을 (원래 x 좌표 - 50, 원래 y좌표 - 50)의 위치에 출력한다.

그 다음 여러 줄의 if문이 나타나는데, cd의 값에 따라 *의 x, y 좌표가 변경되는 것을 알 수 있다. cd는 사용자가 입력한 키보드 키의 ASCII 코드 값이므로, 변환하면 아래와 같다.

 

a = 97    d = 100    w = 119    s = 115    | = 124

 

특히 cd가 124일 때를 주목하자.

location.href 함수는 페이지를 이동시키는 함수이고, String.fromCharCode( )는 ASCII 코드를 문자열로 변환해주는 함수이다. 따라서 cd가 124(|)일 때에는 *의 위치가 바뀌지 않고, 주소가 |인 페이지로 이동된다.

 

a, d, w, s 중 아무거나 입력했을 때의 화면. 노란색 큰 별이 이동되는 동시에 작은 별들이 랜덤한 색상으로 출력된다. (작은 별이 aa이고 큰 별이 star이다.) (+크롬에서는 별이 이동하지 않는다.)

Challenge 16 페이지에서 |을 입력하면 아래와 같은 페이지로 이동하고, 패스워드가 출력된다.

을 입력했을 때(cd = 124일 때) 나타나는 페이지