SolB

Quest. HTML Injection stored이 무엇인지 간단하게 정리하시오.

https://sbcho0325.tistory.com/54

해당 Quest의 내용은 1주차 과제에서 미리 적어두었으므로 넘어가도록 하겠다.

Quest. 문제 페이지에 코드를 삽입하여 아래와 같이 이전 QUEST인 html injection - reflected (POST)를 해결하세요.

[난이도-low]

> hint1
우리가 배운 범위 내에서 해결할 수 있습니다.
> hint2
form 태그를 사용해보세요.
> hint3
form 태그를 이용해 reflected (POST) 문제 페이지로 전송해보세요.

먼저 hello world, <h1>hello</h1>를 각각 입력해보았더니 위와 같은 결과가 나왔다.

위 코드는 html injection - reflected(post) 페이지의 코드이다. 여기서 사용하는 form 코드를 살펴보기 위해 가져왔다.

이 코드 중 form태그를 그대로 입력해주었다.

그랬더니 다음과 같이 나왔고 first name과 last name에 각각 <h1>SUCCESS</h1>, <img src="http://[본인IP]/bWAPP/images/bee_1.png">를 입력해주었다.

그랬더니 post 페이지로 넘어오고 다음과 같은 결과가 나왔다.

[난이도-medium] - 풀 수 없는 이유를 설명하세요.

hint1. 서버에서 변수를 처리할 때 값을 조작하는 것 같습니다. php 파일을 살펴보면서 변수가 전달되는 과정을 지켜보면 답이 나올 듯 합니다.

아까와 동일한 form코드를 입력했지만 입력창이 뜨지 않았다. 태그 인식이 안되는 것 같다.

해당 단계에서는 security_level 1을 사용하고 있다.

htmli_stored.php 파일을 열어주었다.

난이도 상관없이 모두 sqli_check_3함수를 이용하는 것을 확인할 수 있다.

코드를 더 살펴보았더니 다음과 같은 코드를 찾을 수 있었다.

security_level이 1이거나 2일 때 xss_check_3함수를 사용한다는 점을 확인할 수 있었다.

xss_check_3함수는 다음과 같다.

htmlspecialchars함수를 사용하고 있으므로 문제를 풀 수 없다.

Quest. 분명 당신은 검색 창에 아무 의미도 없는 값을 입력했습니다. 하지만 burp suite라는 취약점 분석 도구를 통해 아래의 유의미한 결과를 출력할 수 있게 되었습니다. 이 도구를 통해 아무 값을 입력하여 아래 사진과 같이 출력하세요.

[난이도-low]

> hint1
GET 방식과 다르게 POST 방식은 전송되는 변수 값이 보이지 않습니다. 하지만 burp suite를 이용한다면 클라이언트에서 서버로 전송되는 값이 모두 보입니다. 이걸 이용하여 값을 조작해봅시다.

First name에 h1태그를 이용해 hello를 써주고 h2태그를 이용해 world를 입력해보았더니 위와 같이 나타났다.

버프 스위트에 위와 같이 나타났다. 16줄을 확인해보면 내가 작성한 값이 저장되어있는것을 확인할 수 있다.

first name에 <h1>SUCCESS</h1>를 입력했고 last name에 <img src="http://[본인IP]/bWAPP/images/bee_1.png">을 입력해주었다. 

그랬더니 다음과 같은 결과를 얻을 수 있었다.

[난이도-medium]

 

> hint1
페이지 소스 코드를 확인해봅시다.
<p>Enter your first and last name:</p>
    <form action="/bWAPP/htmli_post.php" method="POST">
        <p><label for="firstname">First name:</label><br />
        <input type="text" id="firstname" name="firstname"></p>
 
        <p><label for="lastname">Last name:</label><br />
        <input type="text" id="lastname" name="lastname"></p>
 
        <button type="submit" name="form" value="submit">Go</button> 
    </form>
 
우리는 form의 정보가 htmli_post.php로 전달됨을 알 수 있습니다.

> hint2
htmli_post.php 파일에 include("functions_external.php");라는 코드가 있습니다.
일부 함수를 functions_external.php 파일에 저장하는 듯 합니다.

> hint3
<과 >을 인코딩 했는데도 여전히 풀리지 않습니다. 더블 인코딩에 대해 알아봐야 할 것 같습니다.
 

위에서 본 결과와 다르게 h태그가 적용된 결과가 아닌 태그 그대로 출력됨을 확인할 수 있다.

페이지 소스코드를 확인해보았다. 

<이 &lt;로 변환되고, >이 &gt;로 변환된다는 것을 확인할 수 있었다.

버프 스위트에서 security_level이 1인것을 알 수 있다.

htmli_post.php를 열어주어 확인해주었다. security_level이 1이므로 해당 단계는 xss_check_1에 해당된다.

xss_check_1함수를 찾아주었다.

여기서 <이 &lt;로 변환되고, >이 &gt;로 변환되도록 했다는 것을 알 수 있다.

first name에 %3Ch1%3ESUCCESS%3C%2Fh1%3E

last name에 %3Cimg%20src%3D%22http%3A%2F%2F[본인IP]%2FbWAPP%2Fimages%2Fbee_1.png%22%3E을 입력해주었다. 이는 low단계에 적었던 답들을 인코딩한 값에 해당된다.

[난이도-high] - 풀 수 없는 이유를 설명하세요

hint1. 서버에서 변수를 처리할 때 값을 조작하는 것 같습니다. php 파일을 살펴보면서 변수가 전달되는 과정을 지켜보면 답이 나올 듯 합니다.
 
+ burp suite가 작동하지 않을 때는 인증서 설정을 확인해보세요.

난이도 high에서는 security_level이 2이다. 이 함수를 위 과정과 동일하게 찾아보도록 하자.

case 2에 해당하므로 xss_check_3함수를 이용한다.

저번 실습에서 본 것과 동일하게 htmlspecialchars함수를 사용하고 있다. 이는 data로 받은 문자열을 UTF-8로 반환하는데 ", ' 둘 다 변환되기 때문에 문제를 풀 수 없다.

1. HTML injection

HTML injection 이란?
코드 인젝션 공격의 하위 개념으로 취약한 매개변수에 악의적인 HTML 코드를 삽입하는 공격

① 반사기법

: URL에 악의적인 HTML 태그를 삽입하여 링크를 클릭한 사용자의 PC에서 HTML 태그가 실행되게 하는 공격

- GET 방식으로 데이터를 전송할 경우, URL에 변수 이름과 입력 값을 노출한다.

② 저장기법

: 악의적인 HTML 태그를 데이터베이스에 저장하여 저장된 태그 내용을 확인한 사용자의 PC에 HTML 태그가 실행되게 하는 공격

2. 아래 화면 출력하기

먼저 실습 환경 구축을 해주었다.

[ 난이도 low ]
img src: http://[본인IP]/bWAPP/images/bee_1.png
hint1. 페이지 소스 코드를 확인해봅시다.

First name에 hello, Last name에 world를 입력해보았더니 Welcome hello world가 출력되는걸 볼 수 있었다.

그리고 URL이 bWAPP/htmli_get.php?firstname=hello&lastname=world&form=submit 로 변경되었다.

이렇게 URL에 데이터가 노출된다는 것을 확인할 수 있었다.

그리고 페이지 소스에도 Welcome hello world가 추가되었다.

이번엔 h1태그를 이용해 hello를 써주고 h2태그를 이용해 world를 입력해보았더니 위와 같이 나타났다.

그리고 이와 같은 소스코드가 생겼다.

URL은 ?firstname=<h1>hello<%2Fh1>&lastname=<h2>world<%2Fh2> 이러한 형식으로 바뀌었다.

※ 출력해야 하는 화면 중 First name에 해당하는 부분이 /SUCCESS/ 이므로 <h1>SUCCESS</h1>이 들어가야 한다고 생각했다. 그리고 Last name 부분에는 이미지가 들어가야 하므로 문제에서 준 img src: http://[본인IP]/bWAPP/images/bee_1.png 코드를 활용하고자 하였다.

이미지 태그를 삽입하기 위해 <img src="http://[본인IP]/bWAPP/images/bee_1.png">이라고 작성해주었더니

다음과 같은 결과가 나왔다.

[난이도 medium]

hint1. low일 때 성공한 페이지와 비교해봅시다. 소스코드 차이점이 반드시 있습니다.

hint2. URL Encoding

먼저 위에서 한 것과 동일하게 First name에 hello, Last name에 world를 입력해주었더니 동일한 결과가 나왔다

하지만 h태그를 이용해 작성해주었더니

위에서 본 결과와 다르게 h태그가 적용된 결과가 아닌 태그 그대로를 출력함을 확인할 수 있었다.

URL은 ?firstname=hello<%2Fh1>&lastname=world<%2Fh2>의 형태로 동일하게 나타났다.

페이지 소스 코드에서 low와의 다른점을 찾을 수 있었다.

좌측은 low의 코드, 우측은 medium의 코드이다.

우측 코드를 보면 <이 &lt;로 변환되고, >이 &gt;로 변환된다는 것을 알 수 있었다.

&lt와 &gt에 대해 검색해보니 마크업기반 언어에서 수식 속 부등호를 사용하기 위한 코드라고 한다.

따라서 우측 코드에서는 <와 >을 코드가 아닌 부등호로 인식한다는 것을 알 수 있었다.

firstname=hello<%2Fh1>&lastname=world<%2Fh2>에서도 볼 수 있듯이 인코딩이 필요하다고 생각했다.

그래서 인코딩 변환기를 사용하여 위에서 사용한 코드를 인코딩해주었다.

<h1>SUCCESS</h1> → %3Ch1%3ESUCCESS%3C%2Fh1%3E
<img src="http://192.168.204.128/bWAPP/images/bee_1.png">
→ %3Cimg%20src%3D%22http%3A%2F%2F%2FbWAPP%2F192.168.204.128images%2Fbee_1.png%22%3E

이를 각각 입력해주었더니

다음과 같은 결과가 나타났다.

+) bee-box에서 cd /var/www/bWAPP 해주고 htmli_get.php파일을 열어주면 다음과 같은 화면이 나온다.

case 0, 1, 2는 각각 low, medium, high에 해당된다고 한다.

functions_external.php 파일을 열어보면

해당 함수들을 볼 수 있다.

특히, xss_check_2(medium)함수에서 <을 &lt로, >을 &gt로 변환하도록 코드가 작성되어 있는 것을 확인할 수 있다.

[난이도 high]

풀 수 없습니다. 풀 수 없는 이유를 정리해주세요.

hint1. include는 외부 파일을 포함하는 함수입니다. 확인해야 할 함수가 있는데 외부 파일에 있는 듯 합니다.

hint2. function_external.php 파일에 xss_check2 함수를 확인해봅시다.

위에서 찾은 xss_check_3을 활용해보자

(hight에 해당하는 함수는 xss_check_3이다)

코드를 보니 htmlspecialchars함수를 사용하고 있다.

htmlspecialchars 함수
: HTML에서 사용하는 특수문자를 UTF-8로 반환하는 함수

- & 는 &amp; 로 변환
- " 는 &quot; 로 변환
- ' 는 &#039; 로 변환
- < 는 &lt; 로 변환
- > 는 &gt;로 변환

구조 : string htmlspecialchars ( string $string , int $quote_style , string $charset , bool $double_encode )
string $string : HTML 엔티티로 변환할 문자열
int $quote_style 
- ENT_COMPAT : 기본모드, 큰따옴표만 변환
- ENT_QUOTES : 큰따옴표와 작은따옴표 둘다 변환
- ENT_NOQUOTES : 큰 따옴표와 작은따옴표 둘다 변환하지 않음
string $charset : 변환에 사용할 문자셋 지정
bool $double_encode : 이미 존재하는 HTML 엔티티를 encode 할지 여부 지정, 생략하는 true를 기본값으로 가진다.

return htmlspecialchars($data, ENT_QUOTES, $encoding);

이 코드에서 data로 받은 문자열을 UTF-8로 반환하는데 ", ' 둘 다 변환됨을 알 수 있다.

이 때문에 문제를 풀 수 없다.

★ 이를 통해 HTML Injection 공격을 방지하기 위해서는 htmlspecialchars함수를 사용하면 된다는 것을 알 수 있다.

https://jini00.tistory.com/123

4주차 내용은 위의 내용을 참고하면 된다.

https://github.com/jini-coding/ott_review_project

[ DB ]

contents_review라는 DB를 생성하였다.

id는 자동으로 1씩 증가시켜 중복되지 않는 식별자를 갖도록 하였다.

title, ott, category는 공백을 허용하지 않도록 하였고 score은 총 5점 만점으로 매길 수 있도록 하려고 한다.

comments는 공백을 허용하며 작성 시간도 나타나도록 하였다.

INSERT INTO contents(title, ott, category, score, comments, created) VALUES('오징어 게임', 'netflix', '영화', '5', 
'잔인함 속에 가려진 인간의 추악한 면, 그리고 다양성', NOW());

위와 같은 코드를 작성하여 밑에와 같은 데이터를 넣었다.

이는 나중에 웹페이지를 통해 작성받아 DB에 저장받도록 할 예정이다.

[ 메인 페이지 ]

메인페이지 코드는 다음과 같다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1{
        text-align: center;
        padding: 35px;
        color :#A50000;
        border-bottom:1px solid black;
        font-size: 5em;
        font-family : sans-serif;
      }
      img{
        box-shadow : 5px 5px 5px #BDBDBD;
        border-radius : 30px;
      }
      body{
        background-color:#FFD8D8;
        height : 2000px;
      }
      nav, section{
        display : flex;
        justify-content: center;
      }
      nav a{
        text-decoration: none;
        color : black;
        margin : 2em;
      }
      #underline{
        position : absolute;
        width:0;
        background-color: black;
        top:340px;
        left:0;
        height:4px;
        transition:0.5s;
      }
    </style>
    <title></title>
  </head>
  <body>
    <h1>OTT별 콘텐츠 추천</h1>
    <nav>
      <div id="underline"></div>
      <a href="About.php">About</a>
      <a href="Board.php">Board</a>
      <a href="Search.php">Search</a>
    </nav>
    <script>
      let under = document.getElementById("underline");
      let menu = document.querySelectorAll("nav a");
      menu.forEach((menu)=>
        menu.addEventListener("mouseover",(e)=>indicator(e))
      );
      function indicator(e){
        under.style.left=e.currentTarget.offsetLeft+"px";
        under.style.width=e.currentTarget.offsetWidth+"px";
        under.style.top=
           e.currentTarget.offsetTop+e.currentTarget.offsetheight+"px";
      }
    </script>
    <section>
      <a href="netflix.php"><img class="netflix_icon" src="netflix_img.PNG"></a>
      <a href="tving.php"><img class="tving_icon" src="tving_img.PNG"></a>
      <a href="watcha.php"><img class="watcha_icon" src="watcha_img.PNG"></a>
      <a href="disney.php"><img class="disney_icon" src="disney+_img.PNG"></a>
  </section>
  </body>
</html>

저번주와 크게 달라진 부분

1. About, Board, Search 버튼
2. 버튼 아래의 underline 

<nav>
  <div id="underline"></div>
  <a href="About.php">About</a>
  <a href="Board.php">Board</a>
  <a href="Search.php">Search</a>
</nav>

<script>
  let under = document.getElementById("underline");
  let menu = document.querySelectorAll("nav a");
  menu.forEach((menu)=>menu.addEventListener("mouseover",(e)=>indicator(e)));
  
  function indicator(e){
    under.style.left=e.currentTarget.offsetLeft+"px";
    under.style.width=e.currentTarget.offsetWidth+"px";
    under.style.top=e.currentTarget.offsetTop+e.currentTarget.offsetheight+"px";
  }
</script>

a태그로 각 버튼에 알맞는 페이지를 연결시켰다. 이를 nav태그로 한번에 감싸주었다. 이렇게 각자 버튼을 만들었다.

여기서 각 버튼에 마우스를 가져갔을 때 밑에 밑줄을 생기도록 하고 싶었다. 그래서 자바스크립트를 이용해주었다.

먼저 underline과 nav a태그인 메뉴들을 가져와주었고 각 메뉴에다가 mouseover이벤트가 일어날때마다 indicator 함수를 실행하도록 하였다. 그리고 addEventListener을 통해 자동으로 event(e)를 넘겨주었다. 이 event 안에 뭘 선택했는지가 나오게 된다.

indicator함수에서는 인자를 e로 받아왔다. 

div태그를 직사각형으로 보았을 때 아래쪽 변은 offsetWidth, 높이는 offsetheight, 위쪽 변과 상단 브라우저의 높이 차이는 offsetTop, 왼쪽 변과 좌측 브라우저의 간격 길이는 offsetLeft이다. 

underline을 그리는 시작점은 (offsetLeft, offsetTop+offsetheight)이다. 

따라서 left시작값인 x좌표는 offsetleft, width는 해당 메뉴(직사각형)의 너비만큼만 그려주면 되므로 offsetWidth, y좌표는 offsetTop+offsetheight로 지정해주었다.

<style>
  nav, section{
    display : flex;
    justify-content: center;
  }
  nav a{
    text-decoration: none;
    color : black;
    margin : 2em;
  }
  #underline{
    position : absolute;
    width:0;
    background-color: black;
    top:340px;
    left:0;
    height:4px;
    transition:0.5s;
  }
</style>

nav와 section부분의 위치를 가운데로 flex속성을 이용해 지정해주었다.

nav 중 a태그에 밑줄을 없애고 color과 margin을 지정해주었다.

그리고 div태그의 id인 underline에 위치, 색상 등을 지정해주며 transition을 이용해 underline이 더욱 부드럽게 이동하는 것처럼 보이도록 해주었다.

[ 세부 페이지 ]

각 페이지는 동일한 형태를 가지므로 NETFLIX페이지만 설명하도록 하겠다.

<div id="board"><h3>리뷰 작성</h3>
    <form action="create.php" method="POST">
      <p>제목 : <select name="title" required>
           <option value="none" selected disabled>==선택==</option>
           <option value="1">제목1</option>
           <option value="2">제목2</option>
           <option value="3">제목3</option>
         </select></p>
      <p>OTT : <select name="ott" required>
           <option value="none" selected disabled>==선택==</option>
           <option value="netflix">Netflix</option>
           <option value="watcha">Watcha</option>
           <option value="tving">Tving</option>
           <option value="disney+">Disney+</option>
         </select>
         &nbsp; &nbsp;
         카테고리 : <select name="category" required>
           <option value="none" selected disabled>==선택==</option>
           <option value="movie">영화</option>
           <option value="drama">드라마</option>
           <option value="entertain">예능</option>
         </select></p>

      <p>별점 :  (구현예정)</p>
      <p>내용 : <textarea name="review" rows="10" cols="50" placeholder="내용을 입력해주세요"></textarea></p>
      <p style="padding-left:440px;"><input type="submit" value="작성" style=""></p></div>

이번주에는 리뷰 작성 페이지에 OTT와 카테고리를 선택하는 부분을 추가했다. 둘 다 제목 선택하는 것과 마찬가지로 select로 내용을 입력받도록 했다. 무조건 입력해야 하는 내용이므로 required 속성을 적용했고 초기의 상태인 ==선택== 은 disabled를 이용해 선택이 불가능하도록 설정했다. 나머지 다른 선택지들은 각각의 내용에 따라 적당한 value 값을 설정하여 구분하도록 하였다.