bughela - QR CODE PUZZLE

Wargame.kr의 세 번째 문제인 QR CODE PUZZLE이다. 아직까지는 간단한 퀴즈같은 느낌이라 별 문제는 없다.

이번에도 자바스크립트 문제로 퍼즐 챌린지라고 한다. Start 버튼을 눌러 문제 페이지로 이동해보자.

페이지로 이동하니 옛날에 많이 하던 슬라이드 퍼즐 게임이 등장했다. 근데 타일의 모양을 자세히 보니 일종의 QR 코드 인 것 같은데 이 퍼즐을 완성하면 어떤 QR 코드가 만들어지고 이를 스캔해서 플래그를 얻을 수 있는 것 같다.

빈 공간을 클릭하다보면 퍼즐을 언젠가는 맞출 수 있겠지만 워게임은 퍼즐 게임이 아니기 때문에 다른 방법으로 이를 맞추거나 원본 사진을 알아내야 할 것이다. 일단 소스 코드를 살펴보자.

소스를 확인해 보니 jqp-piece 클래스 div가 퍼즐의 한 칸을 이루고 있는 것 같다. 각 div 요소들은 모두 동일해보이지만 left, top, background-position, current 속성이 각각 다른 것을 볼 수 있다. 이들이 무슨 의미를 지니는지 조금 알아보자.

• left, top: position 속성과 함께 사용되며 원래 위치에서 왼쪽, 위 여백을 설정한다.

• background-position: 배경 이미지의 초기 위치를 설정한다.

• current: 알 수 없음. 커스텀 속성인 듯.

현재 각 슬라이드의 position 속성은 absolute로, 부모 요소, 여기서는 jqPuzzle 클래스의 div에 상대적으로 지정된다. 즉 각 슬라이드 퍼즐이 슬라이드 퍼즐 판에서 어느 위치에 있는지를 지정하는 것으로 실제로 슬라이드를 움직여보면 그에따라 left, top 속성값이 바뀌는 것을 알 수 있다.

그런데 background-position은 일정하게 유지되고 있는데, 이는 무엇을 의미할까? 그것은 바로 이 슬라이드들은 완성된 슬라이드 퍼즐, 즉 QR 코드 이미지의 일부분을 자기의 배경 이미지로 사용하고 있다는 것이다. 실제로 다른 슬라이드들도 확인해보면 각각 고유의 background-position 속성값을 가지고 있는 것을 확인할 수 있다.

배경 이미지의 일부분을 잘라서 표시하고 있다면 이 슬라이드들의 배경 이미지를 찾아보자. 친절하게 background-image 속성에 url로 지정되어 있으며 이를 열어보면 원본 QR 코드의 사진을 볼 수 있다. 이를 QR 코드 디코딩 사이트에 업로드해서 플래그를 얻어내면 끝이다.

 

 

이 문제를 풀었을 즈음에 홈페이지 채팅방에 이 퍼즐을 맞춰서 풀었다는 사람이 있었다는 얘기를 들었다. 아마 각 요소의 current 속성이 그 열쇠가 되리라 생각해볼 수 있는데 이걸 일일히 할 엄두는 도저히 나지 않는다. 그리고 이전에는 다른 워게임 문제의 해답을 직접 올리곤 했는데 root-me.org라는 워게임 사이트에서 봤던 "답이 공유되는 챌린지는 더이상 챌린지가 아니다" 라는 문구가 계속 생각난다. 최소한 플래그를 직접 얻을 수 있는 링크는 공유하지 말아야 할 것 같아서 QR 코드의 해독 결과도 이곳에 올리지 않았다. 하지만 애초에 풀이과정을 다 공유한 상태에서 의미없는 짓이 아닌가 싶기도 하다.