웹 개발 공부 일기장 4 - 과제 (쿠키탈취 및 키로거)

1. 자바스크립트 공부하고 쿠키 탈취나 키로거 만들어보기

 

쿠키 탈취

자바스크립트에는 XMLHttpRequest 객체가 내장되어 있는데 이 객체를 통해 서버에 데이터를 요청하고 응답받은 데이터를 처리할 수 있습니다.

const Http = new XMLHttpRequest(); // 객체 생성
const url = 'http://172.16.22.131/task4/check-cookie.php'; // 요청 URL
Http.open('GET', url); // 해당 url로 GET 요청을 지정
Http.send(); // 실제 요청 전송

 

위와 같이 코드를 입력하면 XMLHttpRequest 객체를 이용하여 요청을 보낼 수 있습니다.

요청 보내기

응답

실제 요청을 보내고 응답이 결과를 네트워크 탭을 통해 확인 할 수 있습니다.

document.cookie

또한, document.cookie를 통해 브라우저가 가지고 있는 쿠키를 가져올 수 있습니다.

 

그럼 이 기능들을 통해 쿠키를 탈취해보겠습니다.

쿠키를 포함하여 요청보냄

image를 통해 해당 주소로 요청을 보낼 수 있음

사진과 같이 document.cookie를 통해 쿠키를 가져와 공격자 페이지로 GET요청 시 포함 시키거나 Image를 다른 주소에서 가져오는 식으로 작성하면 공격자 페이지로 GET요청을 보낼 수 있다.

공격자가 만든 페이지에서 요청 시 들어온 쿠키를 확인할 수 있다.

쿠키 탈취

check-cookie.php는 쿠키를 포함시켜 온 GET 요청 시 데이터베이스에 저장하는 공격자 페이지가 된다.

 

만약, 스크립트를 포함시킬 수 있다면 피해자가 스크립트를 포함시킨 페이지를 로드하면 피해자의 쿠키는 공격자한테 전송되게 된다.

 

키로거 만들기

keylogger

getElementById를 통해 htmlElement를 가져올 수 있습니다. 

그리고 가져온 Element를 대상으로 addEventListener라는 함수를 통해 특정 행동을 했을 때 원하는 코드를 실행할 수 있습니다.

위와 같이 작성을 한다면 form태그가 submit!! 제출할 경우 함수 안의 코드를 실행하게 됩니다. 

 

그리고 input Element에 대해 value를 사용할 경우 입력한 값을 가져올 수 있습니다. 

이러한 모든 기능을 더해 사진과 같이 작성해주면 입력한 아이디와 비밀번호를 제출할 경우 공격자의 페이지로 아이디와 비밀번호를 포함하여 GET 요청을 보내게 됩니다.

 

쿠키탈취와 마찬가지로 입력받은 데이터를 데이터베이스에 저장하여 확인할 수 있습니다.

check-cookie.php

키로거도 쿠키탈취와 마찬가지로 자바스크립트를 통해 작성할 수 있기때문에 피해자가 이러한 자바스크립트를 포함하고 있는 페이지에서 로그인을 시도할 경우 아이디와 비밀번호가 공격자한테 넘어갈 수 있습니다.

 

이렇게 간단하게 자바스크립트를 이용하여 쿠키탈취와 키로거를 만들어 보았습니다.

 

다음 게시판을 만들기전에 마이페이지 먼저 만들고 게시판도 바로 만들어 보겠습니다.