old-16

문제

별 사진과 js-3이 보인다. 설명은 따로 없는 것 같다.

문제 풀이: 코드 분석

#(1) onload를 사용해 kk() 함수가 페이지 로드 직후 실행되도록 한다. onkeypress는 사용자가 키보드의 키를 누르면 이벤트가 발생하도록 한다. 여기서는 키를 누르면 mv 함수가 호출된다.

#(3) <font> 태그는, 텍스트의 폰트, 색상 그리고 크기를 정의할 때 사용한다.화면에 보이는 가장 큰 별을 정의하는 부분이다.

<body bgcolor="black" onload="kk(1,1)" onkeypress="mv(event.keyCode)"> #(1)
<font color="silver" id="c"></font> #(2)
<font color="yellow" size="100" style="position:relative" id="star">★</font> #(3)

<body onload="myFunction()">
페이지가 로드된 직후 Javascript를 실행한다.
-> 객체가 로드될 때 발생하며, 웹 페이지의 모든 콘텐츠(이미지, 스크립트 파일)가 완전히 로드되면 스크립트를 실행하기 위해 <body> 요소 내에서 가장 자주 사용된다.

아래 코드를 살펴보며 이해해보자. <body> 태그에 onload를 사용하여 페이지 로드 직후 helloFunction() 함수가 실행되도록 했다. helloFunction()은 <script>부분에 정의했다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>onload test</title>
  </head>
  <body onload="helloFunction()">
    <script>
      function helloFunction() {
        alert("Nice to meet you");
      }
    </script>
  </body>
</html>

mv() 함수와 kk() 함수가 정의되는 부분이다.

onkeypress = "mv(event.KeyCode)"라고 되어있는 부분으로 유추해볼때, mv 함수는 별을 이동시키는 함수, kk함수는 별을 생성하는 함수인 것 같다.

<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) + 50 + "px";
        if (cd == 97) star.style.left = parseInt(star.style.left) - 50 + "px";
        if (cd == 119) star.style.top = parseInt(star.style.top) - 50 + "px";
        if (cd == 115) star.style.top = parseInt(star.style.top) + 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}px;top:${y}px" onmouseover="this.innerHTML=''">★</font>`;
    }
</script>
#두 번째 별
<font color="yellow" id="aa" style="position:relative; left:0; top:0"></font> 
#세 번째 별
<font color="#4250573" id="aa" style="position:relative;left:1;top:1" onmouseover="this.innerHTML=''">*</font> 
</body>
</html>

문제 풀이:

아무 키나 누르면 별이 추가된다. 이때 기존의 가장 큰 별은 위치를 이동하거나 가만히 있는다. 그리고 별이 추가될 때마다 아래와 같은 코드들이 html에 새롭게 추가된다. kk 함수에 의해 생성되는 것 같다.

<font color="#1959439" id="aa" style="position:relative;left:-50;top:-50" onmouseover="this.innerHTML=''">*</font>

mv 함수의 cd는 대체 뭘까? onkeypress = mv로 정의되어있기 때문에 mv 함수는 키를 누르면 실행된다.

mv의 매개 변수인 event.KeyCode는 ASCII 코드에 기반하며 어떤 키가 눌렸는지 확인하게 해주는 키워드라고 한다. 마지막 if문에 있는 do it! 주석을 보면 cd==124 조건을 만족해야하는 것 같은데, cd가 뭔지 정말 모르겠다.

function mv(cd) {
        kk(star.style.left - 50, star.style.top - 50);
        if (cd == 100) star.style.left = parseInt(star.style.left) + 50 + "px";
        if (cd == 97) star.style.left = parseInt(star.style.left) - 50 + "px";
        if (cd == 119) star.style.top = parseInt(star.style.top) - 50 + "px";
        if (cd == 115) star.style.top = parseInt(star.style.top) + 50 + "px";
        if (cd == 124) location.href = String.fromCharCode(cd) + ".php"; // do it!
    }

키보드의 A,S,D,W 버든을 누르면 left와 top가 NaN 값으로 변하는 것을 알아냈다. NaN값은 Not a Number으로 숫자가 아닌 또는 될 수 없는 것들을 의미한다.

if문에 있는 parseInt()는 문자열을 int형으로 변환해준다고 한다. cd가 각 조건에 만족하면 left값과 top값을 int형으로 바꾸고 +- 50 연산을 한다? 계속 고민하다가 event.KeyCode 반환표가 떠올랐다. 표를 정리해보면 아래와 같다. 그런데 Fn키는 입력되는 키로 인식되지 않는 것 같다. 문제 화면에서 Fn키를 누르면 아무런 반응이 없다.

100	(NumberPad)4
97	(NumberPad)1
119	F8
115	F4
124	F13

익스플로잇

결론적으로 cd는 event.KeyCode표의 숫자를 말하는게 맞았다. 다만 왜인지는 모르겠지만 keycode 표가 여러개여서 헤맸다. 124번인 |(shifr+\) 키를 누르면 문제가 풀린다.

정리: Write - up 참고하며

이 부분만 잘 보면 됐었다. String.fromCharCode()는 유니코드 값을 문자로 변환하는 함수이다. 이 함수는 cd값을 매개변수로 가지며, 이 cd값이 문자로 변환된 결과에 문자열 .php이 붙게 된다.

location.href는 현재 브라우저의 url을 변경하는 속성으로 "cd=124인 문자.php"가 파일명이 되어 서버에 있는 해당 파일이 열리게 되는 구조이다.

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

따라서, 표를 찾지 않아도 콘솔창을 이용해 cd값을 알아낼 수 있었다.

코드에 힌트가 있다면, 그 부분을 먼저 자세히 살펴보자. 이 문제는 모든 코드를 해석하지 않아도 되는 문제였다.

정리: location.href

let은 자바스크립트의 문법이다. 아래의 명령어는 현재 페이지의 URL을 가져오는 기능을 한다,

let url = location.href;

아래는 현재 페이지의 URL을 정의하는 코드이다.

location.href = "https://www.naver.com"

'🦖 Private > webhacking.kr' 카테고리의 다른 글

Old-26 (1)	2024.12.31
old-15 (0)	2024.12.31

문제