해킹 분야에 관심이 있어 하고, 그 중 웹 해킹에 대해 배우고 싶기 때문에 본격적인 해킹을 공부하기 전 웹 사이트를 직접 만들어 봄으로써 웹이 어떠한 방식으로 작동을 하는지, 어떠한 부분에서 취약점이 발생을 하는지 등을 알아보겠습니다. 가능하다면 총 100일동안 진행이 될 것 같습니다. 웹 개발 기초의 목표는 HTML, CSS, JS에 대해 어느정도 기초를 다지고, 이들을 활용하여 어느정도 건실한 웹 사이트라고 불릴만한 목표를 달성할 수 있도록 도와주는 웹 사이트를 제작하는 것이 목표입니다.
웹은 어떻게 작동할까?
만약 네이버에 접속하고 싶어서 검색창에 '네이버'를 입력했습니다. 이때, 우리의 컴퓨터에서 네이버의 서버 컴퓨터에 방문하고 싶다는 요청을 보냅니다. 우리가 네이버의 서버에게 요청을 보냈으므로 서버가 우리에게 응답을 줍니다. 이 응답을 통하여 모니터에 네이버 웹 사이트가 출력되는 것입니다. 이러한 방식은 서버들이 같은 종류의 언어를 사용하도록 보장하기 위함이며, 이러한 요청이 잘 전달될 수 있도록 제어하기 위한 표준화 방식입니다. 이러한 표준화 방식을 HTTP(HyperText Transfer Protocol)이라고 합니다.
그러나 평범한 HTTP는 서버에게 요청을 보낼 때 평문으로 요청을 보냅니다. 만약 우리가 네이버에 로그인하기 위해 ID와 비밀번호가 담긴 계정 정보를 서버에 보냅니다. 서버는 이를 토대로 우리가 누구인지 확인하고 로그인을 시켜줄 것입니다. 하지만, 우리가 네이버에게 보낸 계정 정보가 중간에서 해커가 도청했다고 가정해봅시다. HTTP 프로토콜은 평문으로 전달하기 때문에 ID과 비밀번호가 그대로 노출이 됩니다.
이것을 방지하기 위해 등장한 새로운 프로토콜(Protocol, 통신 규약)이 HTTPS(HyperText Transfer Protocol Security)입니다. 기존 HTTP와의 차이점을 S가 붙었다는 점인데, 이 S의 의미는 Security, 보안으로 서버에게 내용을 전달할 때 평문이 아닌 암호화해서 보낸다는 점입니다. 그렇기 때문에 우리의 계정 정보가 서버까지 가는데 안전하게 갈 수 있다는 의미입니다. 이 통신 규약은 기본 프로토콜이기 때문에 자동으로 브라우저에서 표시해줍니다.
이때 우리의 컴퓨터, 사용자의 컴퓨터를 클라이언트(Client)라고 하며, 네이버, 클라이언트가 접속하고자 하는 곳을 서버(Server)라고 합니다.
웹을 만들기 위한 주요 프로그래밍 언어는 무엇일까?
한번쯤은 HTML와 자바 스크립트(Java Scirpt)에 대하여 들어보셨을 것 입니다. 웹 사이트는 이 언어들과 또 하나의 언어인 CSS를 통하여 구현됩니다. 각각의 역할에 대해 알아봅시다.
HTML(HyperText Markup Language) - 표시되는 페이지의 내용과 구조를 만드는데 사용되는 언어입니다. 사이트 내 글자, 이미지, 입력 양식을 통제하는 역할을 합니다.
CSS(Cascading Style Sheets) - HTML로만 웹 사이트를 만들면 페이지가 많이 밋밋해보이고 멋도 없고 가독성도 매우 떨어집니다. CSS의 역할은 웹 사이트의 스타일을 담당하며, 화려하게 꾸며줍니다.
자바스크립트(Java Script) - 웹 페이지와 상호작용 할 수 있게 해줍니다. 버튼을 클릭했을 때 오버레이가 열리거나, 사용자 입력란을 만드는 기능 등의 다양한 역할을 지원합니다. 예를 들어 웹 사이트에서 쓰이는 워드 프로그램이 있겠네요.
자바스크립트는 다른 프로그래밍 언어인 자바(Java)와는 명!!!!백!!!!히!!! 다른 언어입니다. 옛날에 자바가 너무 유명한 나머지 그 인기에 편승하려고 언어 이름은 자바스크립트로 만들었다는 풍문이 있습니다. 요즘에는 웹 사이트 개발 언어로 리액트같은 최신 언어들도 쓴다고는 하는데, 이들은 나중에 공부해서 천천히 알아오겠습니다.
IP 주소와 도메인
우리는 네이버에 접속하기 위해 검색창에 '네이버'라고도 쓰지만 'www.naver.com' 혹은 'naver.com'이라고 입력하여 네이버에 접속합니다. 이를 URL(Uniform Resource Locator)이라고 하며, 웹 사이트의 주소를 나타냅니다. 만약 아래와 같은 URL이 있다고 해봅시다.
https://dash758.tistory.com/category
여기에서 https는 프로토콜이라는 것을 앞에서 알아보았습니다. 가운데의 dash758.tistory.com은 도메인(Domain)을 나타냅니다. 도메인이란 사람이 읽을 수 있는(식별할 수 있는) 웹 사이트의 주소입니다. 마지막의 /category는 경로(Path)를 나타냅니다. 경로는 특정 리소스와 페이지에 대한 포인터를 의미합니다.
모든 웹 사이트에는 IP 주소가 할당되어 있습니다. 여기서 IP 주소(Internet Protocol Address)란 인터넷 상의 장치들이 어떻게 식별되는지 제어하는 또 다른 표준입니다. 서로 연결되고 접속하는데 쓰입니다. 127.0.0.1과 같은 익숙한 형태일 것이라고 생각합니다.
검색창에 IP 주소를 입력하여 웹 사이트에 접속할 수 있습니다. 그러나 원하는 웹 사이트의 IP주소를 전부 외우기는 어려운 일입니다. 그렇기 때문에 도메인이 등장하였습니다. 'naver'라는 도메인의 등장으로 우리는 더 쉽게 네이버 웹 사이트에 접속할 수 있게 되었습니다.
그러나 도메인 만으로는 웹 사이트에 접속할 수 없습니다. 뚜렷한 식별자가 없기 때문입니다. 그래서 DNS 서버(Domain Name Server)가 등장했습니다. DNS 서버는 아주 거대하고 방대한 서버입니다. 전 세계의 모든 도메인을 저장하고, 그들의 IP 주소와 매핑시킨 테이블(데이터베이스)을 통해 접속이 가능하게 만들어줍니다.
사용자가 검색창에 네이버를 입력합니다. DNS 서버에서 네이버의 IP 주소를 찾기 위한 요청을 보냅니다. 그 후 DNS 서버로부터 네이버의 IP 주소와 함께 응답이 옵니다. 사용자는 그 응답을 통하여 웹 서버에 요청을 보내고, 받은 응답을 통해 웹 사이트에 접속할 수 있게 되는 것입니다. 이러한 과정들이 웹 사이트에 접속하기 위한 과정입니다. 이 과정들은 아주아주 짧은 시간 안에 일어나고 있습니다.
IP 주소만 알면 상대방의 개인 PC에 접속할 수 있을까요? 그것은 불가능합니다. 상대방의 PC에 출입할 수 있는 문인 포트(Port)가 열려있지 않기 때문입니다. 그렇기 때문에 외부에서의 트래픽은 허용하지 않습니다.
오늘 알아보았던 프로토콜, IP, DNS, 포트 등은 다음에 알아보겠습니다. 오늘은 이들의 역할과 의미만 간단하게 알아보는 것으로 충분합니다.
웹 사이트 만드는 법
개인 PC는 웹 사이트 제작을 위한 임시 개발 서버로 사용할 수 있습니다. 이후 세상에 내놓을 만큼 충분히 잘 만들어진 웹 사이트가 되었다면 서버를 구매하거나 대여하여 정식으로 서비스 할 수 있습니다.
웹 사이트 만들기
이제 본격적으로 웹 사이트를 만들기 위한 준비를 해 보겠습니다. 웹 사이트는 픽셀의 위치, 색상 등을 지정하는 하위 코드를 처리해주는 브라우저(크롬, 파이어폭스 등)와 HTML, CSS, JS와 같은 프로그래밍 언어들로 구성됩니다. 새로운 폴더를 만들고, 메모장을 켜서 index.html이라고 저장해줍니다.
위와 같이 파일 하나가 생성된 것을 알 수 있습니다. 이 파일을 클릭해서 들어간다면 빈 웹 페이지가 출력이 될 것입니다. 다시 index.html 텍스트 편집기로 돌아가서 아래와 같이 입력합니다.
<h1>Hello World!</h1>
꺽쇠 표시에 주의하여 입력합시다. 여기서 <h1>은 HTML 태그라고 합니다. 브라우저에 다양한 명령을 내리는 역할을 합니다. 여는 태그와 닫는 태그에 내용을 '제목 태그'로 간주합니다. 위 코드는 워드의 제목처럼 표기되는 역할을 합니다. 위 텍스트 편집기(메모장, 노트패드)를 Ctrl + S 하여 저장해줍니다. 그 후 index.html을 더블클릭하여 웹 페이지에 접속해봅시다.
다음과 같이 출력이 되었을 것입니다. 마우스 우클릭을 하여 페이지의 소스 코드를 보거나, F12를 눌러서 코드들을 확인해 본다면 여러분이 썼던 코드와 완벽히 똑같은 모습의 코드가 표시되어 있을 것입니다.