webhacking.kr old-14 이해하기

 

100pt 난이도의 문제를 해결해 보았습니다.

 

 

 

페이지의 구성은 흑색 배경에 입력창과 체크박스로 구성되어 있습니다.

 

 

체크박스를 클릭하면 Wrong 경고 메시지가 나타나는 것을 확인할 수 있습니다.
올바른 값을 입력 후 check를 클릭하면 문제가 해결되는 구조 같습니다.


크롬에서 키보드 f12를 눌러서 페이지 소스코드를 확인해 보았습니다.

 

---

페이지 소스코드 분석

 

 

먼저 폼(form) 태그가 있는 문장을 확인해 보겠습니다.

 

<form name="pw">
  <input type="text" name="input_pwd">
  <input type="button" value="check" onclick="ck()">
</form>

 

HTML의 폼(form) 태그는 사용자의 입력에 대한 정보를 다룰 때 적절합니다.
입력된 데이터를 한 번에 서버로 전송하여 처리하도록 할 수 있습니다. 

 

폼을 식별하기 위한 이름으로 "pw"를 지정한 것을 알 수 있습니다.


input은 사용자가 입력을 가능하게 하는 태그입니다.

 

 

type = "text"로 사용자가 키보드 입력을 할 수 있도록 하며, 입력 값은 "input_pwd"로 식별합니다.

type = "button"은 버튼 형태의 입력이며, 체크박스가 해당합니다.

 

스크립트(script) 태그 부분을 확인해 보겠습니다.

<script>
function ck(){
  var ul=document.URL;
  ul=ul.indexOf(".kr");
  ul=ul*30;
  if(ul==pw.input_pwd.value) { location.href="?"+ul*pw.input_pwd.value; }
  else { alert("Wrong"); }
}
</script>

 

ck() 함수는 체크박스를 클릭했을 시 작동합니다.


var(variable)는 변수를 의미합니다.
ul 변수는 document.URL 값에 해당한다는 것인데, 이는 페이지의 URL 정보를 가지고 있다는 것입니다.


실제로 콘솔에 아래와 같은 코드를 입력하고 실행시키면 document.URL 값으로 주소가 나오는 것을 볼 수 있습니다.

 

var ul=document.URL;
document.write(ul);

 

document.URL 값

 

 

 

ul = ul.indexOf(".kr"); 문장은 인덱스를 다룹니다.
indexOf()는 괄호 안의 내용이 처음 시작하는 인덱스의 값을 반환합니다.


ul의 값은 위의 주소인 http://webhacking.kr/challenge/js-1/ 입니다.
인덱스의 시작은 0으로 하기 때문에 .kr의 첫 위치인 .의 위치는 18이 됩니다.


ul = ul*30    =>  18*30 = 540

 

 

 

if(ul==pw.input_pwd.value) { location.href="?"+ul*pw.input_pwd.value; }

 

 

pw.input_pwd.value는 첫 form 태그에서 가져온 값에 해당하며
pw라는 폼 태그에서 사용자가 input에 입력한 값을 input_pwd로 식별하고,
value로 그 값을 추출하겠다는 것입니다.


이것은 즉, 사용자가 입력한 텍스트 값을 의미합니다.
사용자가 입력한 텍스트 값이 ul의 값과 일치하다면 location.href가 작동합니다.
location.href는 해당 URL로 이동한다는 의미이기 때문에 정답임을 의미합니다. 


이번 문제의 열쇠는 ul의 값을 해결하는 것에 있었던 것입니다!


코드 해석을 통해서 ul의 값은 540 임을 알았기 때문에 값을 입력해 보았습니다.

 

 

 

다음 문제로 넘어갈 수 있겠습니다!