웹개발 일지 11일차 (20.10.21)

1. 동적 사이트를 위한 웹 서버 이전 과정

저번까지는 localhost server를 이용하여 LAN 상에서만 사이트를 접속할 수 있었지만 사이트를 동적으로 만들겠다는 계획에 따라 개인 서버에 웹 서버를 구축하였다.

서버는 ubuntu 18.04에서 구축하였으며, 윈도우에서만 웹 서버를 설치해봐서 리눅스에서는 권한 문제나 패키지 설치 오류 등 다양한 에러에 시달렸지만, 결국 전처럼 php가 제대로 동작하게 만들었다.

 

내가 만든 웹 서버의 환경은 다음과 같다.

 

• nginx/1.14.0
• 데이터베이스 클라이언트 버전: libmysql - mysqlnd 5.0.12-dev - 20150407 - $Id: 3591daad22de08524295e1bd073aceeff11e6579 $
• PHP 확장: mysql
• PHP 버전: 7.2.33-1+ubuntu18.04.1+deb.sury.org+1

phpmyadmin 구축 성공

vultr 호스팅 서버 사용

namecheap 도메인 사용

subhack.xyz 도메인으로 완벽히 작동되는 모습

데이터베이스는 웹 서버를 이전한 것이므로 전과 동일하게 재구축하였다.

이번에는 새로운 데이터베이스(name: ctf)를 추가하였는데, 로그인을 성공적으로 한 유저가 CTF 카드를 생성할 때 필요한 데이터를 모아놓는 곳이다.

---

2. CTF Content Card에서의 파일 업로드, Form 전송, DB 저장

정보보호관리 수업 시간에 php에서 파일 업로드 후 그 파일을 다루는 것을 배웠는데, 생각해보니 내 폼 안에도 로고를 업로드하는 요소가 있어서 한번 수정해보기로 마음먹었다.

 

가장 마음에 들지 않았던 부분은, 폼을 전송하고 나서 오류를 출력하는 alert 이후 이전 페이지로 다시 돌아가면 작성한 폼이 사라진다는 단점도 존재했다.

 

 

이 점은 주변 친구들에게 지적을 받아 왔었던 부분이어서 이점을 먼저 고치기로 하였다.

 

 

찾아보니 window.history.back()이라는 javascript 함수가 있었다. 이 함수는 폼에 적힌 내용을 유지하면서 이전 화면으로 돌아오는 함수이다. 코드에 추가하고 다시 해보니 폼에 원래의 데이터가 입력되어 있었다!!

 

 

다음은 파일 업로드이다. form에 enctype를 다음과 같이 추가해주고, $_FILES 객체를 이용하여 php에서 파일을 읽어오는 데 성공하였다. 폼을 전송하고 난 후 간단한 파일 관련 조건을 만족해주면 move_uploaded_file() 함수로 data/ctf_logo/ 위치에 [CTF_name(이름)].[ext(확장자)]와 같은 파일이 만들어진다.

 

enctype가 추가된 모습 / 새로 원하는 폴더에 파일이 생성된 모습이다.

예를 들어, CTF 이름이 hackctf이고, 파일 이름이 03.jpg이라면 파일 이름에 상관없이 hackctf.jpg라는 파일이 만들어지는 것이다.

 

add_process.php

db에도 제대로 저장되는 것을 알 수 있다.

오늘은 여기까지.