SQL Injection - 모의 해킹 사이트 구축(2)

이제 SQL Injection이 가능한 취약한 웹 사이트를 만들 차례다. 취약한 사이트를 만들려면 사용자의 입력을 전혀 필터링하지 않고 작동만 하도록 만들면 된다.

 

나는 간단한 자유 게시판 사이트를 만들었다. 로그인 페이지, 게시판 페이지 두 개가 존재한다. 이왕이면 보기 좋게 만들고 싶어서 css도 조금 작성했다.

 

로그인 페이지

우선 로그인 페이지다. 작동 방식은 간단하다. 

로그인 페이지

사용자가 로그인을 시도했을 때

• 사용자 DB에 저장되어 있는 ID/PW이면 로그인에 성공해 게시판 페이지에 접속할 수 있다.
• 사용자 DB에 저장되어 있지 않은 ID/PW이면 로그인에 실패한다.

로그인 성공

로그인 실패

 

DB 구축

앞서 설치한 Bitnami 폴더에 mariaDB 폴더가 있을 것이다. cmd에서 C:\Bitnami\wampstack-8.1.12-0\mariadb\bin로 이동해(wamp 버전은 다를 수 있음) WAMP 설치시 설정했던 root 계정 비밀번호를 입력하고 DB에 접속해 원하는 DB와 테이블을 만들면 된다. 다음은 내가 만든 DB다.

 

swsecsql DB를 만들고

사용자 인증 정보를 저장하는 user_info와 게시글 정보를 저장하는 board 테이블을 만들었다. 로그인 페이지에서 사용하는 테이블은 user_info다. 

 

user_info table

사용자 ID, PW, email, 이름을 저장했고 사용자가 입력한 ID와 PW가 이 테이블에 존재하면 로그인에 성공한다. 

 

 

로그인 페이지 코드

<?php
if(isset($_POST['uid'])&&isset($_POST['pw'])) {
    $username=$_POST['uid'];
    $userpw=$_POST['pw'];

    $conn= mysqli_connect('localhost', 'root', '000129', 'swsecsql');
    $sql="SELECT * FROM user_info where uid='$username'&&pw='$userpw'";

    if($result=mysqli_fetch_array(mysqli_query($conn, $sql))) {
        echo "<div class='welcome'>";
        echo "<p class='success_text'>로그인 성공</p>"; 
        echo "<div class='welcome_text'> $username"."님 환영합니다.</div>";

        echo "<div class='board_link'><a href='board.html'>게시판 가기</a></div>"; 
        echo "</div>";
    } else { 
        echo "<div class='welcome'>";
        echo "<p class='success_text'>로그인 실패</p>"; 
        echo "<div class='welcome_text'>(인증 정보 불일치)</div>"; 
        echo "</div>";
    }
} 
?>

다음은 내가 로그인 페이지에 사용한 php 코드다. swsecsql DB에 접속한 후, 사용자가 입력한 username과 userpw가 user_info 테이블에 있는지 확인한다. 이후 쿼리 결과에 따라 로그인의 성공/실패 여부를 결정해 맞는 안내문을 출력한다.

 

로그인 페이지 디자인

css가 전혀 없으면 페이지가 너무 허접해 보여서 깔끔한 느낌만 주려고 했다. 

.login_box {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 300px;
    display: flex;
    flex-direction: column;
    background-color: rgb(233, 233, 233);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.login_text {
    width: 80px;
    color: rgb(88,160,239);
    font-size: 25px;
    font-weight: bolder;
}

.login_box div {
    display: flex;
    align-items: center;
}

.input_box {
    width: 300px;
    height: 30px;
    background-color: white;
    border-radius: 5px;
    outline: none;
    border: 0;
    color: rgb(88,160,239);
    font-size: 20px;
    border: 3px solid rgb(88,160,239);
}

.login_button {
    margin-top: 30px;
    background-color: rgb(88,160,239);
    color: white;
    height: 30px;
    width: 100px;
    border-radius: 5px;
    border: 3px solid white;
    font-size: 16px;
}

.welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.success_text {
    color: rgb(88,160,239);
    font-size: 20px;
}

.welcome_text {
    font-size: 25px;
    color: rgb(88,160,239);
}

.board_link {
    margin: 20px;
    padding: 20px;
    background-color: aliceblue;
}

a:link {
    color: #57A0EE;
    text-decoration: none;
}

a:visited {
    color: #57A0EE;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

회색, 파란색을 사용했고 로그인 폼은 가운데에 위치시켰다.