[Dreamhack] Carve Party

문제

---

 

문제 파일 : jack-o-lantern.html

 

script 태그 부분

         <script>
            var pumpkin = [124, 112, 59, 73, 167, 100, 105, 75, 59, 23, 16, 181, 165, 104, 43, 49, 118, 71, 112, 169, 43, 53];
            var counter = 0;
            var pie = 1;

            function make() {
                if (0 < counter && counter <= 1000) {
                    $('#jack-nose').css('opacity', (counter) + '%');
                } else if (1000 < counter && counter <= 3000) {
                    $('#jack-left').css('opacity', (counter - 1000) / 2 + '%');
                } else if (3000 < counter && counter <= 5000) {
                    $('#jack-right').css('opacity', (counter - 3000) / 2 + '%');
                } else if (5000 < counter && counter <= 10000) {
                    $('#jack-mouth').css('opacity', (counter - 5000) / 5 + '%');
                }

                if (10000 < counter) {
                    $('#jack-target').addClass('tada');
                    var ctx = document.querySelector("canvas").getContext("2d")
                      , dashLen = 220
                      , dashOffset = dashLen
                      , speed = 20
                      , txt = pumpkin.map(x=>String.fromCharCode(x)).join('')
                      , x = 30
                      , i = 0;

                    ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
                    ctx.lineWidth = 5;
                    ctx.lineJoin = "round";
                    ctx.globalAlpha = 2 / 3;
                    ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

                    (function loop() {
                        ctx.clearRect(x, 0, 60, 150);
                        ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]);
                        // create a long dash mask
                        dashOffset -= speed;
                        // reduce dash length
                        ctx.strokeText(txt[i], x, 90);
                        // stroke letter

                        if (dashOffset > 0)
                            requestAnimationFrame(loop);
                            // animate
                        else {
                            ctx.fillText(txt[i], x, 90);
                            // fill final letter
                            dashOffset = dashLen;
                            // prep next char
                            x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
                            ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());
                            // random y-delta
                            ctx.rotate(Math.random() * 0.005);
                            // random rotation
                            if (i < txt.length)
                                requestAnimationFrame(loop);
                        }
                    }
                    )();
                } else {
                    $('#clicks').text(10000 - counter);
                }
            }

            $(function() {
                $('#jack-target').click(function() {
                    counter += 1;
                    if (counter <= 10000 && counter % 100 == 0) {
                        for (var i = 0; i < pumpkin.length; i++) {
                            pumpkin[i] ^= pie;
                            pie = ((pie ^ 0xff) + (i * 10)) & 0xff;
                        }
                    }
                    make();
                });
            });
        </script>

 

---

풀이

---

 

10000번 호박을 눌러야 flag가 출력되는 웹페이지다. (일일이 10000번을 누르기는 힘들다...)

호박을 클릭한 결과 10000 more clicks to go! 의 숫자 부분이 호박을 클릭한 횟수만큼 수가 감소하는 것을 확인 할 수 있다.

문제 웹페이지에서 Ctrl + Shift + c (요소 선택) 을 하여 카운트가 되는 부분인 10000 more clicks to go! 의 위치를 확인해보자.

 

9986 more clicks to go!

 

id가 clicks인 span 태그의 값이 바뀌는 것을 확인할 수 있다.

그러면 clicks 를 검색해서  어느 부분이 숫자를 바꾸는지 확인해보자. ( 개발자 도구 source 부분에서 Ctrl + f 후 검색, 개발자 도구 열기 단축키 : Ctrl + Shift + j )

 

clicks

 

검색을 해보면 10000에다 counter라는 변수의 값을 빼서  10000 more clicks to go! 부분의 숫자를 바꾸는 것을 알 수 있다.

따라서 couter 변수가 클릭 횟수를 저장하는 변수라는 것을 예측해 볼 수 있다.

그러면 이번에는 counter 를 검색하여 클릭할 때 마다 숫자가 증가되는 부분의 코드를 찾아보자.

 

 

위 함수를 보면 호박 이미지 ( #jack-target ) 의 click 이벤트를 처리해 주는 함수임을 알 수 있다.

따라서  개발자 도구의 console 을 이용하여 $('#jack-target').click() 을 10000번 발생시켜보면

 

.

웹페이지에 flag가 나온것을 확인할 수 있다.

---