접속하면 이런 빨간 선과 중간에 회색선이 보이고, 왼쪽 O와 오른쪽에 Goal이 있는 것을 볼 수 있었다.
저 O에 마우스를 가져다 대면
이런식으로 O가 yOu로 바뀌는 것을 볼 수 있었다. 이것을 우클릭 하면
맨 왼쪽에 있었던 O가 점점 오른쪽으로 옮겨 가는 것을 볼 수 있었다.
소스 코드를 확인해 보았다.
<html>
<head>
<title>Challenge 10</title>
</head>
<body>
<hr style=height:100;background:brown;>
<table border=0 width=1800 style=background:gray>
<tr><td>
<a id=hackme style="position:relative;left:0;top:0" onclick="this.style.left=parseInt(this.style.left,10)+1+'px';if(this.style.left=='1600px')this.href='?go='+this.style.left" onmouseover=this.innerHTML='yOu' onmouseout=this.innerHTML='O'>O</a><br>
<font style="position:relative;left:1600;top:0" color=gold>|<br>|<br>|<br>|<br>Goal</font>
</td></tr>
</table>
<hr style=height:100;background:brown;>
no hack보니 id가 'hackme' 로 되어 있었다. 얘를 건들이는 문제인 듯? style을 보니 포지션이 relative이었다.
| position의 속성 > position: static -> 기본값(이동 불가) > position: relative > position: abslute > position: fixed > position: sticky relative란? - 자기 자신을 기준으로 이동 absolute란? - 이름과 같이 절대적 위치에 둘 수 있음. - 부모를 기준으로 이동 - absolute를 쓸 경우, 기준이 될 부모에게 relative를 부여하고 원하는 위치에 지정 fixed란? - viewpoint를 기준으로 고정 sticky란? - 스크롤 영역 기준으로 배치 - 부모 컨테이너 안에서 스크롤링 시 스크롤링 방향에 따라 지정된 포지션에서 유 |
공부한 것에 따르면, 자기 자신을 기준으로 이동하며, left와 top 모두 0이었고, onclick을 하면 O가 1+'px'씩 움직인다는 것을 알 수 있었다.
parseInt() 함수가 뭔지 몰라서 인터넷에 검색해 보니 string을 정수로 변환한 값을 리턴해 주는 것이라 한다.
| parseInt() 함수 parseInt(string, radix) 파라미터 > string: 숫자로 변환한 문자열 > radix: string 문자열을 읽을 진법(2~36의 수) 리턴값 > string을 정수로 변환한 값 |
공부한 것에 따르면, 문자열 'this.style.left'를 10진수로 변환하여 return 한다는 것이다.
이후 코드를 더 읽어 보면 만약 이 this.style.left가 '1600px'이면, href가 ?go= + this.style.left(O의 위치)로 지정된다.
| href란? > 하이퍼 참조. > = 다음에는 참조할 파일명을 씀 href = '#'을 쓰는 경우들 > 같은 문서 내의 해당 element로 이동하도록 함 |
이후 onmouseover과 onmouseout를 볼 수 있었다.
| onmouseover란? > 마우스 커서가 HTML 요소 위로 이동하면 활성화 onmouseout란? > 마우스 커서가 HTML 요소를 벗어나면 활성화 |
즉, 아까 마우스 커서를 올렸을 때 O가 yOu로 변경되고, 커서를 똈을 때 다시 O가 된 이유는 코드 내에
| onmouseover=this.innerHTML='yOu' onmouseout=this.innerHTML='O' |
라는 부분이 존재했기 때문이다.
이후 코드를 읽어 보면 1600px에 도달하면 Goal이 있었음을 알 수 있었다.
코드를 풀어 보았을 때 this.style.left이1600이 되면 하이퍼 참조가 ?go=+this.style.left로 지정된다고 했기 때문에 URL 뒤에 ?go=1600px를 붙여 보았다.
no hack 이 뜬다.
코드를 보면 맨 마지막에 no hack이 있는 것을 볼 수 있는데... 막아 둔 것 같다.
따라서 코드의 this.style.left를 변경하여 1600까지 도달하는 방법을 사용하기로 했다.
실제로 O를 클릭할 때마다 left의 위치가 1px씩 늘어남을 볼 수 있는데 이를 조작하여 1600으로 바꾸어 보았다.
Goal을 지나치고 계속해서 가는 것을 볼 수 있다. 1600으로 딱 설정해서 지나치는 건가? 해서 1599로 설정한 뒤 클릭해 보았다.
그 결과 하이퍼링크로 O가 바뀌며 문제가 풀리는 것을 볼 수 있었다. (캡쳐 못함 이슈로 다시 한 번 풀었다)
배운 것 정리
- position의 속성(static, relative, absolute, fixed, sticky)
- parseInt() 함수
- href
- onmouseover
- onmouseout
'워게임 스터디' 카테고리의 다른 글
| [250408] wrapper (0) | 2025.04.08 |
|---|---|
| java 스크립트 정리 (1) | 2025.04.01 |
| [250325][Webhacking] old-12 (0) | 2025.03.25 |
| [250219] [dreamhack] ex-reg-ex (0) | 2025.02.19 |
| [250218] SuNiNaTaS - 18번 (0) | 2025.02.18 |