[ 1주차 수업 ] 웹 서버 이해 & 동적 페이지

2025. 4. 7. 19:02·웹 모의해킹 취업반 스터디/수업

⯌ 기본 세팅

⟡ Vmware 세팅

먼저, 가상머신 중 하나인 VMware를 설치합니다.

노말틱님께서 제공해 주신 SegFault_WEBdev.ova 파일을 다운로드하여 VMware에 불러오겠습니다.

VMware에 ova파일 불러오기 (1)

File - Open에 들어가 줍니다.

VMware에 ova파일 불러오기 (2)

다운로드한 폴더에 위치한 SegFault_WEBdev.ova파일을 선택 후 열어줍니다.

 

VMware 가상머신 실행

실행버튼을 눌러주면 가상 머신의 전원이 켜집니다.

 

⟡ Termius 세팅

편의를 위해 Termius라는 프로그램을 사용하겠습니다.

Termius : 안전하게 원격 접속이 가능한 멀티 플랫폼 SSH 클라이언트

 

로그인을 한 후 원격 접속에 필요한 IP주소를 알기 위해 ifconfig 명령어를 입력해 확인합니다.

리눅스 IP주소 확인 [ ifconfig ]

원격 접속을 위해 Termius를 실행합니다.

Termius에 Host 추가

- NEW HOST 선택

- ADDRESS 주소 입력

- SSH 포트번호 22 입력

- 가상머신의 로그인 아이디와 비밀번호 입력

- Connect 클릭

 

Termius에 Host 연결

Connect를 누르면 위와 같은 화면을 통해 연결된 것을 확인할 수 있습니다.

 

저장된 Host 목록

한 번 연결해 두면 Hosts에 저장되어 추후에 재접속할 때도 빠르게 연결이 가능합니다.

 

Termius SFTP 실행

SFTP를 이용하여 자신의 컴퓨터에 있는 파일을 원하는 Host로 편하고 안전하게 복사 & 붙여 넣기가 가능합니다.

 

※ SFTP

  • 파일을 안전하게 전송하기 위한 네트워크 프로토콜
  • SSH를 기반으로 암호화되어 데이터가 안전하게 보호

 

기본 세팅은 여기서 마치고 이어서 웹 서버에 대해 살펴보겠습니다.

 

⯌ 웹 서버 이해

 

※ 웹 서버

  • 클라이언트의 요청 처리.
  • 정적인 콘텐츠를 제공.
  • 동적인 요청을 WAS(웹 애플리케이션 서버)로 전달한 후, 그 결과를 클라이언트에게 반환.

※ WAS(Web Application Server)

  • 동적 페이지를 처리해 주는 서버.
  • 코드를 실행해서 결과물을 웹 서버에게 반환.

※ DNS 서버

  • 도메인을 IP 주소로 변환.
  • 변환된 IP주소를 바탕으로 Web서버에게 정보 요청.

※ URL

  • 인터넷상에서 특정 파일의 위치를 나타내는 주소.
  • 클라이언트가 URL을 통해 서버로 요청을 보내면 서버는 해당 요청을 처리.

※ URL  구조

  • [Protocol]://[Domain or IP Adress]:[Port]/[File Path]
  • 예시 : http://192.168.116.131:80/normaltic_pic.jpeg

※ 프로토콜

  • 네트워크 또는 시스템 간 데이터 통신을 가능하게 하는 규칙

※ 포트 번호

  • 데이터가 컴퓨터 내에서 어떤 서비스로 전달될지를 결정하는 역할
  • 예시) HTTP : 80, HTTPS : 443, DNS : 53, SSH : 22 등

/home/student/webBasic 경로에서 웹 서버 실행

/home/student/webBasic 경로에서 웹 서버를 실행하였습니다.

경로에 있는 test.txt파일을 요청해 보겠습니다.

192.168.116.131 경로에 존재하는 test.txt 파일 요청

이처럼 URL에서 파일 경로는 웹 서버를 실행한 위치가 기준이 됩니다.

하위에 위치한 파일들은 요청이 가능하지만 상위 디렉터리로의 접근이 불가능합니다.

 

포트번호는 생략 가능합니다.

포트번호를 생략하면 프로토콜의 잘 알려진 포트(Well-Known Port)에 해당하는 값이 자동으로 인식됩니다.

하지만 꼭 잘 알려진 포트번호만을 사용해야 하는 것은 아니기에 다른 포트번호로도 지정 가능.

 

파일 경로도 생략이 가능합니다.

https://www.naver.com/ 라고 입력하면 자동으로 브라우저는 https://www.naver.com/index.html로 요청됩니다.

디폴트 페이지 : URL에 파일을 명시하지 않아도 웹 서버가 자동으로 기본 페이지를 제공.

 

※ 잘 알려진 포트 (Well-Known Port)

  • 0번 ~ 1023번 포트
  • HTTP, HTTPS, DNS, SSH 등과 같이 잘 알려진 포트

 

프런트엔드(Front-End)

  • 클라이언트 측 코드 (브라우저가 실행하는 코드)
  • 예) HTML, CSS JavaScript

백엔드(Back-End)

  • 서버 측 코드
  • 예) PHP, ASP, JSP

 

⯌ 동적 페이지(Dynamic Page)

※ 동적 페이지(Dynamic Page) :

사용자의 요청에 따라 실시간으로 변경되는 웹 페이지.

 

클라이언트가 동적 페이지를 요청하면 WAS가 처리해 준 뒤 웹 서버로 반환해 줍니다.

클라이언트 → 웹 서버  → WAS → 웹 서버 → 클라이언트

 

제공받은 가상머신에 있는 dockerCMD(웹 개발환경을 만드는 스크립트)를 실행시켜 웹 환경을 만들어주겠습니다.

실행중인 컨테이너 목록 확인

sudo docker ps -a 명령어를 통해 실행 중인 컨테이너가 있는지 확인합니다.

만약 실행 중인 컨테이너가 있다면 sudo docker rm -f [CONTAINER ID]를 입력하여 삭제해 줍니다.

dockerCMD 내용

스크립트 내용을 확인해 보면 LAMP(Linux & Apache & MySQL & PHP)를 실행시킨다는 것을 알 수 있습니다.

dockerCMD를 실행시켜 줍니다.

dockerCMD 실행
정상적으로 실행된 모습

정상적으로 실행된 모습을 확인할 수 있습니다.

이제부터 포트번호가 80번이 아닌 1018번으로 접속 가능합니다.

 

 

⟡ PHP 실습

< 1 > echo $_GET['id']

<form method="GET">
  <input type="text" name="id"/>
</form>
<?php
  echo $_GET['id'];
?>
name.php (1)

echo : 출력하는 명령어
$_GET['id'] : GET Method로 전달받은 파라미터
파라미터 : 사용자가 웹 서버에게 전달하는 데이터

GET Method ❘ 파라미터 값이 URL에 드러나는 모습

GET 메소드를 활용하여 데이터를 전송하면 url에 id=Normaltic이 표시됩니다.

 

? : 파라미터 구분자

URL에 ?가 나오면 웹 서버가 파라미터도 같이 WAS에게 보내줘야 한다고 인식합니다.

WAS는 GET 파라미터를 확인하여 처리하고 그 값을 함께 반환합니다.

 

< 2 > echo $_POST['id']

<form method="POST">
  <input type="text" name="id"/>
</form>
<?php
  echo $_POST['id'];
?>
name.php (2)

POST Method ❘ 파라미터 값이 URL에 드러나지 않는 모습

하지만 POST 메소드를 활용하여 데이터를 전송하면 URL에 파라미터가 표시되지 않습니다.

 

파라미터를 보내는 2가지 방식

  • GET 메소드 : 파라미터를 URL에 붙여서 전달
  • POST 메소드 : URL에 정보를 넣지 않고 Request의 Body부분에 넣고 전달
로그인 페이지에서 아이디와 비밀번호를 웹 서버에게 전달할 때 GET 메소드는 URL에 정보가 드러나기 때문에 POST 메소드가 좋습니다.

 

WAS가 PHP코드를 받으면 그 코드를 실행해서 그 값만을 전달하기 때문에 브라우저에서는 PHP코드 확인이 불가능합니다.

 

< 3 > 다른 페이지에 파라미터를 전달하는 방식 ( action )

<?php
  echo $_GET['id'];
  echo $_GET['pw'];
?>
login_proc.php

입력할 User ID와 User Password를 출력할 페이지를 만듭니다.

 

<form method="GET" action="login_proc.php">
    <input type="text" name="id" placeholder="User Id"/>
    <input type="password" name="pw" placeholder="User Password"/>
    <input type="submit" value="login"/>
</form>
login.php

form태그의 action 속성을 이용하여 login_proc.php로 전달되게끔 합니다.

 

User ID = admin, User Password = admin1234 입력한 결과

login_proc.php가 전달받은 데이터를 출력합니다.

'웹 모의해킹 취업반 스터디 > 수업' 카테고리의 다른 글

[ 3주차 수업 ] 식별, 인증 & 로그인 로직 & 쿠키, 세션  (0) 2025.04.23
[ 2주차 수업 ] 데이터베이스와 SQL 쿼리문 & DB 요청  (0) 2025.04.16
'웹 모의해킹 취업반 스터디/수업' 카테고리의 다른 글
  • [ 3주차 수업 ] 식별, 인증 & 로그인 로직 & 쿠키, 세션
  • [ 2주차 수업 ] 데이터베이스와 SQL 쿼리문 & DB 요청
ㅤ민도화ㅤ
ㅤ민도화ㅤ
  • ㅤ민도화ㅤ
    Security Note
    ㅤ민도화ㅤ
    • 분류 전체보기 (6)
      • 웹 모의해킹 취업반 스터디 (6)
        • 수업 (3)
        • 과제 (3)
  • 태그

    SQLi
    웹 모의해킹 취업반
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
ㅤ민도화ㅤ
[ 1주차 수업 ] 웹 서버 이해 & 동적 페이지
상단으로

티스토리툴바