고정 헤더 영역
상세 컨텐츠
본문
※ 주의 : 보안 관련 학습은 자유이지만, 학습 내용을 사용한 경우 법적 책임은 행위자에게 있습니다.
(Note: Security-related learning is allowed, but the individual is solely responsible for any legal consequences arising from the use of the acquired knowledge.)
※ 공부 기록용 포스트 이며, 여기서 사용하는 리눅스 이미지는 실습을하기 위한 기본적인 패키지 및 파일이 설치되어 있으므로, 따라하셔도 안되는 부분이 있습니다. ( 이미지 파일 제공하지 않음)
1. 개념
● 웹 서버(Web Server)
→ 단어 그대로 웹(web)을 제공하는 자. 주로 파일을 제공한다.
● 리눅스(linux)
→ 운영체제(OS)의 한 종류이다. 전세계적으로 많이 쓰는 이유는 기본적으로 무료이기 때문.
● SSH (Secure Shell)
→ 원격 접속을 위한 프로토콜이다. 기존의 telnet은 암호화가 되지 않아 보안에 취약하여 기본적으로 SSH를 사용한다.
→ SSH 프로그램으로는 PuTTY, MobaXterm, termius 등이 있다.
● 웹 페이지 (Web page)
→ 인터넷 상의 웹 문서들을 총칭, 그림 등 파일 포함.
→ 웹서버 실행 위치가 Web root 경로가 된다. 중요한 개념이고 보안상으로도 중요하다.
● WAS(Web Application Server)
→ Server 단에서 Application을 동작 할 수 있다. 동적 웹페이지를 제공하기 위한 서버, 미들웨어.
● 동적 웹 페이지 (Dynamic Web page)
→ 일반 웹 페이지가 정해 놓은 문서들만 제공해 준다면, 동적 웹 페이지는 WAS에서 기능들을 실행하고 제공해 준다.
→ 왜 사용하는지 쉬운 예시를 들자면, 포털(네이버나, 다음 등)메인 페이지에서 로그인을하면 [ID]님 환영 합니다. 라고 뜰텐데, 정적 웹 페이지로 작성하려면 ID개수 만큼, ID 하나 하나 마다 웹 페이지를 만들어야 한다. 하지만 동적 웹페이지를 이용하면 해당 유저 ID를 불러와서 붙여넣으면 되므로 간단하다.
● URL의 구성
→ [Protocol] : // [Domain or IP Address] : [Port] / [File Path]
● Well known ports (0~1023번까지)
→ 잘 알려진 포트로, 아래 몇 가지는 상식으로 알아두면 된다.
→ 20,21:FTP / 22:SSH / 23:Telnet / 25:SMTP / 53:DNS / 80:HTTP / 443:HTTPS
2. 준비
● 가상머신 ▶ VMware 17 무료버전
→ 다운로드 공식 홈페이지 : https://www.vmware.com/ 에서 Products - Desktop Hypervisor - Workstation Player 클릭 후 DOWNLOAD FOR FREE 클릭 - 버전 선택 후 우측 아래 GO TO DOWNLOADS 클릭 - 운영체제 선택 후 DOWNLOAD NOW
→ 그냥 여기로 한 번에 들어가시라..
→ 만약, VirtualBox를 사용한다면 이미지 파일 확장자 변경이 필요한 듯 하다.
● 가상머신 이미지 ▶ 수업에서 제공된.ova 파일
→ ubuntu 22.04.3 LTS 버전이고 docker 등 실습에 필요한 일부 파일이 설치되어 있다.
● 텍스트 에디터 ▶ VScode
→ 사용하지 않아도 되나, 세팅해 놓으면 매우 편리하다.
● SSH ▶ termius
→ 구글 로그인이 필요한 듯 하다. https://termius.com/
→ 물론 다른 putty, mobaxterm 등 사용 가능
3. 실행 - 세팅
● 가상머신 만들기
→ VMware에서 ova파일을 open으로 열고 머신 이름을 설정해준 뒤 import하면 가상 머신이 만들어 진다.
→ 실행된 리눅스에서 기본 설정된 ID와 password로 로그인 한 뒤,
→ $ ifconfig를 입력하여 로 자동으로 설정 된 내부 IP를 확인한다. (※윈도우의 명령어는 ipconfig이다.)
→ 중간 쯤에 보이는 IP를 찾으면 된다. 일반적으로 형식은 192.168.x.x 이다.
→ SSH를 사용하려면 VMware에 리눅스를 계속 켜두어야 한다.
● termius 실행하기
→ 실행 전에 리눅스에서 22번 포트가 열려있어야 한다. 방화벽이 설정되어 있다면 해당 포트를 열어 놓자
→ NEW HOST를 클릭해서 새로운 연결을 만든다. ip주소 입력, Connect.
→리눅스의 Username과 password를 요구한다. 입력해주면 된다.
4. 실행 - 웹 서버 실행 및 만들기
※여기서 부터는 학습용 리눅스 이미지에 기존 설치된 파일들을 이용하므로, 따라하셔도 실행이 되지 않을 수 있습니다.
● 웹서버 실행
→ $ cd /home/student/webBasic
→ $ sudo python3 -m http.server 80
→ 이제 가상머신 밖 윈도우 브라우저에서 IP주소를 입력하면 접속이 된다.
● 도커 실행하기
→ 실행 전 실행 중인 도커가 있는지 확인 한다.
→ $ sudo docker ps -a
→ 위 화면 처럼 컬럼만 나오고 내용이 없으면 실행중인 것이 없다는 뜻.
→ 이렇게 실행 중인 docker가 있으면
→ $ sudo docker rm -f [CONTAINER ID]
→ [컨테이너 아이디]에 위에서 확인 된 e3cf6f59eebe를 입력해준다.
→ $ sudo docker ps - a 를 입력하여 다시 확인해준다.
→ $ cd /home/student/webDev 로 경로를 이동한다.
→ $ ./dockerCMD & 입력
→ 이제 웹 페이지에 띄울 화면을 작성하면 된다.
→ $ cd /home/student/webDev/webApp 여기에 index.html이나 index.php를 작성 후 업로드 하면 된다.
→ 리눅스 안에서도 텍스트에디터 vi, vim, nano 등으로 html, php등을 작성할 수 있지만 편하게 윈도우에서 작성 후 업로드 하는 방식으로 하는 것을 추천 한다.
● FTP사용으로 리눅스에 업로드, 다운로드 및 웹 페이지 작성
→ 윈도우에서 작성하고 리눅스에 파일을 전송하기 위해서 FTP(SFTP)기능을 사용해준다.
→ VScode로 index.html 파일을 만들어 작성해준다.
→ index.html파일을 리눅스 /home/student/webDev 에 넣어준 뒤 웹으로 접속하면 뜬다.
→ login3.php, style.css, next_page.php 를 같은 폴더에 넣어주면 된다.
→ 사실, 현재 프론트 앤드를 잘 모르는 상황이고, 시간도 없어서 php작성은 ChatGPT를 활용 했다.
(당당하게 핑계를 대고 있는 것이다.)
코드_index.html
더보기
<!-- login.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<a href="./login.php"> 로그인페이지1로 접속하기</a><br>
<a href="./login2.php"> 로그인페이지2로 접속하기 </a><br>
<a href="./login3.php"> 로그인페이지3으로 접속하기</a>
</body>
</html>
코드_login3.php
더보기
<!-- login.php -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 페이지</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label for="username">ID:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">PW:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">로그인</button>
</form>
<div class="links">
<a href="#"><p onclick="alert('해당 기능은 구현되지 않았습니다.')">아이디 찾기<p onclick="alert('해당 기능은 구현되지 않았습니다.')">비밀번호 찾기</a>
</div>
<div id="server-time"></div>
</div>
<?php
// 로그인 처리
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// 예상되는 사용자 이름과 비밀번호
$expected_username = 'admin';
$expected_password = 'admin1234';
// 폼에서 제출된 사용자 이름과 비밀번호 가져오기
$username = $_POST['username'];
$password = $_POST['password'];
// 제출된 사용자 이름과 비밀번호가 예상값과 일치하는지 확인
if ($username === $expected_username && $password === $expected_password) {
// 로그인 성공 시 다음 페이지로 리다이렉트
header("Location: next_page.php");
exit(); // 리다이렉트 후 추가 코드 실행 방지
} else {
// 로그인 실패 시 JavaScript 코드를 출력하여 alert 창을 띄웁니다.
echo '<script>alert("로그인 실패! 사용자 이름 또는 비밀번호가 잘못되었습니다.");</script>';
}
}
?>
<script>
// 실시간 서버 시간 표시
setInterval(function() {
var currentTime = new Date();
var year = currentTime.getFullYear(); // 년도
var month = currentTime.getMonth() + 1; // 월 (0부터 시작하기 때문에 +1)
var day = currentTime.getDate(); // 일
var hours = currentTime.getHours(); // 시
var minutes = currentTime.getMinutes(); // 분
var seconds = currentTime.getSeconds(); // 초
// 년, 월, 일, 시, 분, 초를 두 자리로 만들기 위해 10 미만인 경우 앞에 0을 추가
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
var timeString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
document.getElementById("server-time").innerHTML = "현재 서버 시간: " + timeString;
}, 200); // 200ms 마다 업데이트
</script>
</body>
</html>
코드_style.css
더보기
/* CSS 스타일링 */
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
background-color: #f9f9f9;
}
h2 {
margin-bottom: 20px;
}
label {
display: block;
text-align: left;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
background-color: #4caf50;
color: white;
padding: 10px 0;
margin-top: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.links {
margin-top: 20px;
font-size: 14px;
}
코드_next_page.php
더보기
<!-- next_page.php -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 성공 다음 페이지</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h2>로그인 성공 후 페이지 입니다.</h2>
<ul class="links">
</ul>
</div>
</body>
</html>
5. 개인 평가(부족한 부분, 잘 되는 부분)
● 부족 - 프론트 앤드
→ 현재 프론트 앤드 (html, css, js, php)를 잘 몰라서 웹을 작성하기가 어렵다.
● 잘 됨 - 리눅스, VMware
→ 그나마 조금 익숙한 부분이라 SSH 등 세팅은 수월 했다.
'컴퓨터 > 보안 수업(Segfault)' 카테고리의 다른 글
| [보안 공부] 6주 차 - SQL Injection 생각해 보기 (0) | 2024.05.29 |
|---|---|
| [보안 공부] 5주 차 - 게시판 파일 업로드 구현 (0) | 2024.05.22 |
| [보안 공부] 4주 차 - Burp Suite, 게시판 구현, 과제 (0) | 2024.05.14 |
| [보안 공부] 3주 차 - 로그인 구현, ID & PW 없이 쿠키로 로그인해 보기 (3) | 2024.05.05 |
| [보안 공부] 2주 차 - 데이터베이스 및 SQL, 과제 DB연동 (1) | 2024.04.30 |
