Webhacking.kr 54번

Challenge 54 - 100 Points

 

문제를 누르면 Password is ~~하면서 ~~부분에 뭔가가 한글자씩 값이 나온다.

 

일단 소스코드를 보자

코드를 보면 크게 run()함수와 answer()함수가 정의되어 있다.

먼저 run() 함수부터 살펴보자

run()함수는 Ajax를 위한 객체를 생성하는 함수이다.

Ajax는  Asynchronous JavaScript and XML의 약자로 자바스크립트를 이용하여 비동기적으로 서버와 브라우저가 데이터를 주고받는 방식이다. IE 6버전 이하는 ActiveXObject를 사용하고, IE 7버전 이상, 크롬과 같은 다른 웹브라우저는 XMLHttpRequest를 사용하여 객체를 생성한다.

(window.XMLHttpRequest 는 IE7이상, 파이어폭스, 크롬 등이고 window.ActivityXObject는 그 이하 버전이다.)

window.ActivityXObject는 ActivityXObject를 지원하는 브라우저라면 오브젝트를 리턴하고 그렇지 않다면 null를 리턴하게 된다. 따라서 오브젝트가 존재하면 ActiveXObject 객체가 할당되어지고 존재하지 않으면 else if 구문으로 이동하여 XMLHttpRequest를 사용하여 객체를 생성한다. run()함수를 통해 생성된 객체는 변수 x에 저장된다.

 

이제 i를 인자로 하는 answer()함수를 보자

일단 위의 코드를 이해하기 위해 한 줄 씩 해석해보자

x.open('GET', '?m='+i, false);    // GET방식으로  ?m=i 페이지에 대한 요청 설정 

  - 자바스크립트 window 객체의 open() 함수

       : 웹브라우저에서 새 창을 열기 위해서 간단히 사용할 수 있는 함수

           -> true : 현재 히스토리를 대체한다.

           -> false : 히스토리에 새 항목을 만든다.

 

x.send(null); // 요청을 서버에 전송

aview.innerHTML=x.responseText; // 서버의 응답을 화면에 출력

i++; // i를 1 증가

if(x.responseText) setTimeout("answer("+i+")",20); // 만약 서버의 응답(리턴값)이 있다면  0.1초 뒤 재귀

if(x.responseText=="") aview.innerHTML="?"; // x.responseText가 null이면 aview.innerHTML에 "?"를 저장하여 Password is ?가 출력된다.

 

setTimeout("answer(0)",1000); // 1000ms(밀리세컨드 단위 즉, 1초) 1초 뒤에 answer(0)함수 실행

   - 자바스크립트 시간 지연 함수 -> setTimeout함수를 사용했기 때문에 54번 문제를 클릭하였을 때, 일정 시간이 지난 다음 is 뒤에 문자가 출력되었던 것이다. 

 

setTimeout 함수에 의해 0.1초에 한번씩 answer 함수가 재귀적으로 호출되어 다른 값으로 변경되어 나타나는 것이므로 aview.innerHTML=x.responseText를 aview.innerHTML+=x.responseText로 수정하면 Password is 뒤에 값이 한글자씩 계속 바뀌지 않고 계속 추가될 것이다. 

또한 if(x.responseText=="") aview.innerHTML="?"를 if(x.responseText=="") aview.innerHTML+="?"로 수정해주어 비밀번호가 다 출력된 뒤 ?로 초기화 되지 않게 해주면 다음과 같이 화면에 비밀번호가 출력된다.