[webhacking.kr] 문제풀이 No.16

박준서·2021년 9월 21일
0

webhacking-kr

목록 보기
5/7
post-thumbnail

[ webhacking.kr 사이트의 문제에 대한 풀이입니다. ]

16번 문제는 웹해킹 문제라기 보다는 js 해석 능력을 보는 문제 같다.
js 해석 능력도 웹해킹에서 절대 빼놓을 수 없는 능력이니 집중해서 풀어보자.

[ 풀이 ]

문제 페이지는 처음 입장시 이렇게 생겼다.

이 상태에서 키보드의 자판을 누르면 별이 생기고 움직인다.

이게 flag와 무슨 연관성이 있는지 모르겠으니 바로 개발자 도구를 켜서 스크립트를 확인해보자.

<html>
<head>
<title>Challenge 16</title>
<body bgcolor=black onload=kk(1,1) onkeypress=mv(event.keyCode)>
<font color=silver id=c></font>
<font color=yellow size=100 style=position:relative id=star>*</font>
<script> 
document.body.innerHTML+="<font color=yellow id=aa style=position:relative;left:0;top:0>*</font>";
function mv(cd){
  kk(star.style.left-50,star.style.top-50);
  if(cd==100) star.style.left=parseInt(star.style.left+0,10)+50+"px";
  if(cd==97) star.style.left=parseInt(star.style.left+0,10)-50+"px";
  if(cd==119) star.style.top=parseInt(star.style.top+0,10)-50+"px";
  if(cd==115) star.style.top=parseInt(star.style.top+0,10)+50+"px";
  if(cd==124) location.href=String.fromCharCode(cd)+".php"; // do it!
}
function kk(x,y){
  rndc=Math.floor(Math.random()*9000000);
  document.body.innerHTML+="<font color=#"+rndc+" id=aa style=position:relative;left:"+x+";top:"+y+" onmouseover=this.innerHTML=''>*</font>";
}
</script>
</body>
</html>

페이지 스크립트는 이렇게 생겼다.
(여러 키를 눌렀으면 html 태그가 여러개 생겼을 것이니 Sources로 스크립트를 확인하자.)

<body bgcolor=black onload=kk(1,1) onkeypress=mv(event.keyCode)>
이 코드에서 알 수 있는 것은 페이지가 로드 되었을떄는 kk(1,1) 함수를,
onkeypress, 즉 키보드의 키가 눌렸을 때는 mv(event.keyCode) 함수를 실행함을 알 수 있다.

여기서 event.keyCode 는 풀이에서 중요한 역할을 하므로 알고 넘어가자.

{ event.keyCode란? }
키보드의 자판이 눌리는 이벤트가 발생하였을 때, 눌린 키에 해당하는 숫자값을 불러온다.
각 키에 해당하는 숫자 값은 아래의 링크에서 확인할 수 있다.
event.keyCode 관련 블로그 글

계속 분석을 이어나가보자.

function mv(cd){
  kk(star.style.left-50,star.style.top-50);
  if(cd==100) star.style.left=parseInt(star.style.left+0,10)+50+"px";
  if(cd==97) star.style.left=parseInt(star.style.left+0,10)-50+"px";
  if(cd==119) star.style.top=parseInt(star.style.top+0,10)-50+"px";
  if(cd==115) star.style.top=parseInt(star.style.top+0,10)+50+"px";
  if(cd==124) location.href=String.fromCharCode(cd)+".php"; // do it!
}
function kk(x,y){
  rndc=Math.floor(Math.random()*9000000);
  document.body.innerHTML+="<font color=#"+rndc+" id=aa style=position:relative;left:"+x+";top:"+y+" onmouseover=this.innerHTML=''>*</font>";
}

위의 코드에서 놀랍게도 한줄 빼고는 모두 필요없는 코드이다.
(모두 별의 움직임과 관련된 코드이다)

  if(cd==124) location.href=String.fromCharCode(cd)+".php"; // do it!

이 코드에서 mv(cd) 를 통해 받아온 파라미터 cd가 124이면 .php 로 이동함을 알 수 있다.
근데 위에 남겨놓은 keyCode 표에서 알 수 있듯이 124에 할당되어 있는 키는 없다. 그러므로 우리가 직접 함수를 실행해줘야 한다.

그럼 크롬 개발자 도구의 Console에 가서 다음과 같이 mv 함수를 실행해보자.

mv(124)

문제가 풀렸다!

마무리하며...

이번 문제는 js 코드 해석 능력을 기를 수 있었다.
js 해석 능력이 웹해킹에서 가장 기본이 되는 능력이기에 꼭 잘 실습해두자.

profile
학생 개발자의 블로그입니다.

0개의 댓글