[드림핵 워게임] Flying Chars

<문제>

 

<풀이>

1. 사이트 접속

문제 사이트에 접속해보았다. 작은 문자들이 날아다니는 것을 볼 수 있다.

문제 설명대로 첨부파일이 주어져있지 않기 때문에 개발자 도구를 열어서 소스를 확인해보기로 했다.

 

 

2. 개발자 도구로 소스보기

개발자 도구의 Elements 탭에서 html 소스를 보았다.

먼저 <div id="box"></div> 태그를 탐색했다.

 

<div id="box"></div> 태그 안에는 19개의 <img> 태그들이 들어있다.

날아다니는 문자들의 정체가 바로 이 이미지들인 것 같다.

 

    const img_files = ["/static/images/10.png", "/static/images/17.png", "/static/images/13.png", "/static/images/7.png","/static/images/16.png", "/static/images/8.png", "/static/images/14.png", "/static/images/2.png", "/static/images/9.png", "/static/images/5.png", "/static/images/11.png", "/static/images/6.png", "/static/images/12.png", "/static/images/3.png", "/static/images/0.png", "/static/images/19.png", "/static/images/4.png", "/static/images/15.png", "/static/images/18.png", "/static/images/1.png"];
    var imgs = [];
    for (var i = 0; i < img_files.length; i++){
      imgs[i] = document.createElement('img');
      imgs[i].src = img_files[i]; 
      imgs[i].style.display = 'block';
      imgs[i].style.width = '10px';
      imgs[i].style.height = '10px';
      document.getElementById('box').appendChild(imgs[i]);
    }

    const max_pos = self.innerWidth;
    function anim(elem, pos, dis){
      function move() {
        pos += dis;
        if (pos > max_pos) {
          pos = 0;
        }
        elem.style.transform = `translateX(${pos}px)`;
        requestAnimationFrame(move);
      }
      move();
    }

    for(var i = 0; i < 20; i++){
      anim(imgs[i], 0, Math.random()*60+20);
    }

<script></script> 태그를 열어서 javascript 소스를 보았다.

문자들의 이미지 파일들의 이름이 img_files 배열에 들어있고, 파일 자체는 imgs 배열에 들어있다.

imgs 배열을 콘솔에 출력해보면 이미지 파일 소스를 확인할 수 있을 것 같다.

 

3. 익스플로잇

for(var i=0; i < imgs.length; i++) {
    console.log(imgs[i]);
}

imgs 배열에 있는 요소들을 콘솔에 출력하는 익스플로잇 코드이다.

 

개발자 도구의 Console 탭에 익스플로잇 코드를 입력하면 imgs 배열의 요소들이 출력된다.

 

4. FLAG 획득

img 태그의 src 속성값에 마우스를 올리면 이미지 파일을 볼 수 있었다.

요소들이 출력된 순서대로 이미지 파일을 읽어서 플래그의 문자열을 완성했다.