오늘(3.13)은 어제 6번 문제에 이어서 7번 문제를 풀기로 했다. 하얀색 바탕이 파란색 바탕으로 바뀌는 것을 보니 기분이 좋았다. 하나씩 채워가는 모습을 보면서 이런 맛에 문제를 푸는 것 같다.
7번 문제를 클릭하게 되면 아래의 사진처럼 처음에는 아이유 사진이 나온다. 아이유 사진 위에는 'Do U Like girls?'라는 문구와 함께 스크롤을 내리다보면 끝부분에서는 윤아 사진을 볼 수 있다. 맨 처음에 문구는 단순히 물어보는 문구인 것 같다. 해당 박스에 난수 값을 입력해도 아무일도 일어나지 않았기 때문이다.
(처음에 아이유 사진이 엄청 크게 나와서 놀랐다......)
그리고 아이유와 윤아 사진 중간에 'YES' 입력 버튼 하나가 덩그러니 있었다.
(뭘까...?)
저렇게 덩그러니 있는 것들은 한번 눌러보고 싶은 욕구가 생기기 마련이다. 그래서 바로 클릭해봤더니 아래와 같은 팝업창이 떴다.
'실패... 내가 너무 느리다'라고 한다.... 이제 해당 페이지에서는 아무것도 발견할 수 없어서 html 소스코드를 확인해보기로 했다. 들어가자마자 힌트가 있었다.
'Faster and Faster'
힌트는 빠르게 하라는 데 어떤걸 빠르게 하는지 감이 안잡혔다. 그래서 소스코드 안에 숨겨져 있는 것을 자세히 확인해보기로 했다.
<head>부분을 확인해보니 스크립트를 발견했다. 이벤트 부분인 것 같았다.
(이벤트 : 사용자가 어떤 행동을 취했을 때, 그로 인해서 변화가 이루어지는 것을 말한다. 여기서 행동은 "사용자가 클릭했을 때", "스크롤을 내렸을 때" 등을 의미한다.)
소스코드 해석
function noEvent() { // noEvent라는 함수
if (event.keyCode == 116 || event.keyCode == 9) { // keyCode가 116,9일때 실행한다.
alert('No!'); // 'No!'을 출력한다.
return false; // false 값을 반환한다.
}
else if (event.ctrlKey && (event.keyCode = 78 || event.keyCode == 82)) {
// Ctrl을 누르면서 keyCode 값이 78이거나 82일때 실행한다.
return false; // false 값을 반환한다.
}
}
document.onkeydown = noEvent; // 행동을 했을 때 noEvent 함수가 실행된다.
더 자세히 설명하자면
event.keyCode
해당 함수는 Javascript로 사용자의 키 입력을 감지하는 함수입니다. 아래 표는 event.keyCode 모음을 나타낸 것이다.
즉, 해당 소스코드
event.keyCode == 116 || event.keyCode == 9
116은 'F5', 9는 'tab'으로 7번 문제 페이지에서 'F5'와 'tab'을 입력시 'No!' 팝업창이 출력되고 false 값을 반환하는 것이다.
오늘은 'Suninatas(써니나타스)' 문제를 풀기로 했다. 매번 100점 문제들만 풀다 보니 실력이 늘지 않는 것 같아서, 오늘은 4번 옆에 있는 301 point 5번 문제를 풀기로 했다. 1번부터 5번까지 보면 4번까지는 100점대인데 5번만 300점대이다. 처음에는 살짝 겁이 났지만 그래도 할 수 있을 거라 생각했다.
5번 문제를 들어가면 아래의 사진처럼 'Check key Value' 라고만 나와있었다. 문제를 처음 접했을 때 생각은 네모 박스 안에 올바른 key 값을 넣으면 되는 것 같았다. 그럼 이제 키값을 넣어야 하는데 화면에는 아무것도 없으니 'F12'을 눌러 화면 자체의 코드를 확인해보았다.
소스코드를 확인해보니(아래의 사진) 힌트로 숫자 '12342046413275659'가 보였다. 이것을 이용해서 문제를 해결하는 것 같다.
(사실 이 값을 그대로 네모박스에 넣어봤다.... 힌트라고 그래서.... 하지만 아무 일도 일어나지 않았다ㅜㅜ)
주석으로 힌트처리된 거 말고 제대로 된 소스코드를 확인해보고자 숨겨져 있는 코드들을 확인하기 시작했다. 그랬더니 아래의 사진처럼 복잡해 보이는 스크립트가 존재했다. 이것을 보고 해석하려고 했지만 실력이 없어서 무슨 소리인지 한참을 들여다보았다.
한참을 봐도 무슨 소리인지 몰라서 머리가 지끈거릴 때, 아래에 'Authkey'값에서 힌트를 얻었다. 'Unpacking JavaScript'라는 힌트를 통해 해당 소스코드가 'Packing'되어 있다는 걸 깨닫고 문제를 풀었다.
해당 스크립트가 'Packing' 되어 있으니 'Unpacking'을 시도해줘야 한다. 나는 그래서 대신 'Unpacking' 해주는 사이트를 이용하기로 했다. 아래 사이트가 대신해주는 사이트이다.
오늘은 "Webhacking" 24번 문제를 풀었다. 밖의 날씨도 비가 오고 늦잠도 자버려서 점수 배점이 낮은 문제를 풀었다.
24번 문제에 들어가면 아래의 화면처럼 'client ip'와 'agent'가 보인다. 'agent' 옆을 보니 사용자의 환경을 뜻하는 것 같았고, 'client ip'는 난수가 들어가 있는 것처럼 보였다. 그리고 'Wrong IP!'까지 현 화면에서는 문제를 풀 수 없는 것들만 보였다.
처음 화면에서는 아무것도 발견할 수 없어서 'view-source'에 들어가서 소스코드를 확인해보기로 했다. 아래 화면은 24번 문제의 소스코드이다.
문제를 풀기 위해선 소스코드를 해석해야한다.
소스코드 해석
1. extract 함수
해당 함수는 배열 속의 키의 값들을 변수화 시키는 것이다.
예를 들어
$a[x] = "Hello";
$a[y] = "World";
extract($a);
echo $x;
echo $y;
결과 값은 "Hello World"가 출력되는 것이다.
사실 extract() 함수를 사용하지 않고 배열을 이용해서 출력할 수 있다.
$a[x] = "Hello";
$a[y] = "World";
echo $a[x];
echo $a[y];
결과 값은 위와 같이 "Hello World"가 출력될 것이다.
extract($_SERVER);
extract($_COOKIE);
2. htmlspecialchars() 함수
해당 함수는 HTML 코드가 들어가는 특수 문자를 일반 문자로 인식되어 출력되게 하는 것이다.
'&' -> '&'
'"(큰 따옴표)' -> '&quit;'
''(작은따옴표)' -> '''
'<' -> '<l'
'>' -> '>'
위에 써놓은 것처럼 HTML 코드가 들어오면 우리가 일반 문자로 바꿔주는 함수인데, 문제를 풀 때는 사용하지 않는 것 같다.
'컴퓨터에서 인코딩은 동영상이나 문자 인코딩 뿐 아니라 사람이 인지할 수 있는 형태의 데이터를 약속된 규칙에 의해 컴퓨터가 사용하는 0과 1로 변환하는 과정을 통틀어 말합니다. '
(출처: 나무위키)
즉, 사람이 인지하지 못하고 컴퓨터가 이해할 수 있도록 바꿔주는 것을 의미한다. 그 예로 'ASCII', 'URL인코딩', 'HTML인코딩', 'Base64인코딩' 등이 존재한다. 각각 컴퓨터가 이해할 수 있는 언어로 바꿔주기 때문에 어떤 것을 중심으로 인코딩을 해야하는 지 명확하게 이해한 후 인코딩을 진행해야 한다.
아래의 사진들은 각각 'ASCII 인코딩 표'와 'URL 인코딩 표'이다.
나무위키에서 명확하게 개념을 설명했지만 만약 그 내용이 길다고 생각하면 우리는 간단하게 "문자(문자열)을 바이트형식으로 변환" 라고 알고 있으면 된다.
디코딩(Decoding)
디코딩 = 역코드화 = 복호화
디코딩은 인코딩의 반대로서 사람이 이해 할 수 있도록 바꿔주는 것을 의미한다.
즉 "바이트형식을 문자(문자열)로 변환" 이다.
아래의 사진들은 각각 'ASCII 디코딩 표'와 'URL 디코딩 표'이다.
위에서 설명한 인코딩 표와 디코딩 표는 같을 수 밖에 없다. 문자를 바이트형식으로 바꾸거나, 반대로 변환할 때 필요한 표는 하나로 충분히 바꿀 수 있기 때문이다.
[인코딩 & 디코딩 변환 사이트]
사실 간단한 문자 같은 것들은 인코딩 표를 보고서 금방 변환 할 수 있다. 하지만 긴 문장일 경우에는 하나하나 대입해보기가 힘든 상황이다 그래서 나는 자동으로 변환해주는 인코딩 & 디코딩 사이트들을 가지고 왔다.