1주차 수업 정리

웹 해킹 2024. 4. 19. 00:25

웹 서버에 대해서 배우면서 준비된 가상머신에 설치된 서버로 실습을 진행했다. 실제로는 스스로 리눅스에 APM을 설치해서 서버를 돌리면 더 좋지만 아직 구축하지 못해서 부득이하게 선생님께서 준비해주신 가상머신으로 진행했다.

나는 M1 맥북을 쓰고 있는데 제공해주신 ova 파일을 fmware fusion으로 import해보니 아키텍쳐가 x86 전용이라 열리지 않길래, 일단 내가 갖고 있는 인텔 맥북으로 먼저 설치를 한 후에, 가상머신 네트워크를 bridge로 설정해서 m1 맥북에서도 접속 가능한 ip를 획득하게 만들었다. 그래서 m1 맥북에서 terminus를 통해 무리 없이 ssh 접속을 했다. (서버를 따로 구축하기 전에는 이렇게 번거롭게 해야할 것 같다. m1맥북에서도 x86 전용 os를 돌릴 수 있는 방법이 있는 것 같긴 한데, 우선 ova 파일에 대한 이해가 부족해서 후에 다시 찾아보려고 한다.)

이미 웹서버 설정이 완료된 리눅스에 접속해서 "sudo python3 -m http.server 80"을 입력하면 80포트로 서버가 열린다. 웹 서버는 단순히 표현하면 '파일을 전달하는 것'이라고 할 수 있다. 이 파일을 요청하기 위해서는 컴퓨터마다 약속이 필요한데 그것을 '프로토콜'이라고 한다. 위에서 사용한 명령어에서는 http 프로토콜을 사용한다. 그리고 웹 서버에 있는 파일을 요청하기 위해서는 클라이언트 측에서는 브라우저의 주소창에 URL 을 입력해야 한다.

URL의 구조: [Protocal]://[Domain or IP address]:[Port]/[File Path]

프로토콜은 아까 말한 http 또는 https와 같은 것들을 입력한다.

도메인은 내가 접속하고자 하는 서버의 이름이라고 할 수 있는데, ip address 대신 사용되며 DNS 서버를 통해 변환된다. 결국 ip address만 있으면 접속이 가능하다. 만약 도메인이 있더라도 dns 서버가 제 역할을 하지 못해 ip address를 획득하지 못한다면 정상적으로 웹 서버에 접속할 수 없다.

ip address가 건물의 주소라고 생각한다면, port는 그 건물의 방이라고 생각하면 된다. 일반적으로 많이 쓰이는 포트가 있는데 대표적으로 http는 80번, https는 443번, ssh는 22번 등이다. 그래서 일반적으로 우리가 웹 사이트를 들어갈 때 주소창에는 포트번호를 잘 입력하지 않는데, 그 이유는 사람들 간에 특정 서비스들은 특정 포트에서 정보를 주고 받자고 약속을 했기 때문에 브라우저에서 자동으로 입력한 프로토콜을 보고 알아서 포트를 입력해 주기 때문이다. 그렇기 때문에 만약 웹 서버가 http 프로토콜을 사용하지만 80번 포트를 통해 통신하지 않는다면 추가적으로 도메인 뒤에 ':포트번호"를 적어줘야 정상적으로 접속이 가능하다.

그 다음은 파일경로인데 여기서 중요한 개념이 등장한다. 바로 웹 루트(web root) 경로이다. 보통은 /var/www/html이 웹 루트 경로로 지정되지만, 지금은 "sudo python3 -m http.server 80" 명령어로 서버를 열었기 때문에, 명령어를 실행한 위치가 웹 루트 경로가 된다. 이 웹 루트 경로에 있는 파일을 / 뒤에 입력하면 그 파일을 얻을 수 있다. 예를 들어서 웹 루트 경로에 'test.txt'가 있다고 가정하면, 'protocol://ipaddress:port/test.txt' 라고 입력하면 test.txt를 얻을 수 있다. 만약 웹 루트 경로에 texts라는 디렉토리가 있고 그 안에 text.txt가 있다면, 'protocol://ipaddress:port/texts/test.txt' 로 얻을 수 있다.

만약 / 뒤에 아무 것도 적혀져 있지 않다면 기본적으로 index.html이라는 파일을 불러온다. 그렇기 때문에 우리가 평소에 웹사이트에 접속할 때 주소창이 깨끗하게 / 뒤에 아무 것도 적혀져 있지 않더라도 무엇인가를 보고 있는 것이다.

결국 웹 서버는 단순히 파일을 전달하는 것이라고 할 수 있다. 하지만 단순히 파일을 전달하기만 한다면 정적인 페이지밖에 만들지 못할 것이다. 우리가 평소에 사용하는 사이트들은 대다수가 동적 페이지이다. 그렇기 때문에 또 다른 것들이 필요한데, 그것이 WAS(Web Application Server)다. 웹 서버는 클라이언트에게 다 정리된 파일만 보내줄 뿐이고, 웹 서버의 요청을 받은 WAS가 동적으로 내용을 업데이트 해서 다시 웹 서버를 통해 클라이언트에게 파일이 전달된다.

웹 구조를 간략화하자면 웹 서버 - WAS - DataBase 라고 할 수 있다.

이후에는 실습을 진행했는데, dockerCMD라는 쉘 스크립트가 있어서 그것으로 웹서버를 여는 것으로 진행했다.

이 파일을 cat으로 출력해보니

--------

#!/bin/bash

sudo docker run -p "1018:80" --name studentWeb -v ${PWD}/webApp:/app -v ${PWD}/mysql:/var/lib/mysql mattrayner/lamp:latest-1604-php7

---------

이라는 내용이 나온다. 아직 docker가 무엇인지는 잘 몰라서 다 이해하진 못하지만 포트 1018을 사용하고 옵션을 통해 php mysql 등을 사용한다는 것 같다. 또한 환경변수 ${PWD}를 이용해서 webApp 경로가 지정되어 있는 것을 보니, 웹 루트 경로도 지정한 것 같다.

이후에 php 파일을 만들어서 실습을 진행했는데, termius를 통해 ssh 접속을 하고 있었기에 그냥 vi나 nano를 이용해서 php파일 작성을 해도 되지만, sftp 서버도 구축이 되어 있기에 termius에서 파일을 이동시켜도 된다. 맨 처음에는 이렇게 계속 하다가, 파일을 수정하고 결과를 보고 싶을 때마다 덮어쓰기를 해야해서, vscode에서 sftp extension을 설치했다.

참고한 영상은 다음과 같다. https://youtu.be/_OmkzZ2alko?feature=shared

{

"name": "My Server",

"host": "",

"protocol": "sftp",

"port": 22,

"username": "",

"password": "",

"remotePath": "/home/student/webDev/webApp",

"uploadOnSave": true,

"useTempFile": false,

"openSsh": false

}

내가 접속할 때 사용한 sftp.json 파일이다. host에 접속하려는 ip address를 입력하고 username과 password를 입력해주면 된다. 그리고 맨 처음에는 "uploadOnSave"가 false로 되어 있어서 로컬파일을 저장해도 자동으로 업로드가 되지 않았는데, 저것을 true로 바꿔주니 자동으로 업로드가 되어서 브라우저에서 새로고침만 하면 바로 변경사항을 확인할 수 있어 굉장히 편리했다. 또한 remotePath도 내가 지금 지정된 웹 루트 경로로 지정해줬다. 그냥 / 로 해놓으면 너무 많은 중첩된 디렉토리들이 있어서 내가 변경하고 사용하고자 하는 파일에 접근하기가 불편하기 때문이다.

그리고 php를 처음으로 써보았는데 일단 첫인상은 나쁘지 않았다. nodejs를 통해 사용했던 템플릿 엔진과 비슷한 인상을 받았다.

문법은 html을 작성한 php파일에 <?php ?>를 적으면 그 사이에 있는 구문들은 php로 해석이 된다.

이번 수업에 주로 사용한 것은 <?php echo $_GET['parameter']; ?> 이다. echo란 출력하는 명령어이고, $는 변수를 지정할 때 사용하는 문자인것 같다. 그래서 그리고 $_GET['parameter'] 또는 $_POST['parameter']와 같이 메소드마다 전달된 값을 사용할 수 있다. 구문 뒤에는 세미콜론(;)을 써준다.

이후에 폼을 만들어 제출하면 다른 페이지에 전달되는 실습도 진행했다.

다음은 과제이다.

간이 로그인 페이지를 만드는 것이었는데 일단은 db를 연결하지 않은 상태로 id:admin / password: admin1234를 입력했을 때만 로그인이 되는 페이지를 만들고 css나 bootstrap으로 스타일링까지 하는 것이다.

나는 로그인 페이지는 부트스트랩을 주로 사용했고, 로그인 확인 페이지에서는 css만 사용했다.

일단 구조는 다음과 같다.

php파일 두개에 각각 css파일을 연결시켰다.

form은 다음과 같다. 각 요소들에 달린 클래스들은 bootstrap에서 사용되기 때문에 변경하면 안된다. id input과 password input을 만들고 submit button을 누르면 POST method를 통해 /login_proc.php로 값이 전달된다.