HTTP 1.0 의 구조
인터넷을 처음 사용했을 시절에는 여러 논문을 쉽게 보기위해 필요한 HTML 문서를 요청하고, 응답으로 받는 데에 목적이 있었습니다. 따라서 구조는 아래와 같이 이루어져 있었죠.
하지만 시간이 흐르면서 점차 문서를 조금 더 보기 좋게 하기 위해 새로운 개념을 도입하게 됩니다. 바로 CSS 죠. 그리고 이후에는 사진과 같은 자원도 추가 됩니다. 그리고 마지막으로 요소의 움직임 등을 조절하기 위한 JavaScript 가 탄생하게 됩니다. 최종적으로 이렇게 서버에 저장되어 있는 정적 리소스 들을 응답할 수 있게 되었습니다.
정적 리소스의 렌더링 순서
이 정적 리소스들의 렌더링 순서는 어떻게 될까요? 클라이언트에서 요청을 보내면, 서버는 해당하는 리소스를 찾아 응답으로 보내게 됩니다. (이 당시 응답은 지금과 같은 데이터가 아닌 HTML 자체라는 것을 유의합니다.)
이때 다음 순서로 client 가 구성됩니다.
1. HTML 과 css 가 먼저 화면에 렌더링 됩니다.
2.
JavaScript 엔진이 구동 됩니다.
왜 이런 순서로 구성 되는 걸까요? 일반적으로 script 코드를 HTML 코드 작성 시 맨 아래에 배치하기 때문입니다. 일반적으로 아래에 배치하는 이유는 뭘까요?
•
브라우저는 HTML 문서를 위에서 아래로 순차적으로 읽고 렌더링 합니다. 자바스크립트가 상단에 오게되면 html 과 css 의 렌더링 순서가 뒤로 밀리게 됩니다. 따라서 페이지의 시각적 요소가 사용자에게 늦게 표시되게 됩니다.
•
자바스크립트의 경우 파싱 되어 있는 html 요소가 렌더링이 되어있어야 DOM 조작이 가능합니다. 이때 스크립트를 문서의 하단에 두면 스크립트 실행 시점에 대부분의 HTML 요소가 이미 파싱 되어 있어 안전하게 DOM 조작이 가능합니다.
이러한 이유로 스크립트 구문은 하단에 위치하게 됩니다.
단방향에서 양방향 상호작용으로
위에서 이루어진 응답과 요청은 단방향 통신입니다. 요청한 내용을 응답으로 전달하고 끝이죠. 하지만 이 과정에서 상태를 전이하고 기억하여 양방향 상호작용을 만들고자 하는 열망이 커지게 됩니다. 그리고 WAS 와 DataBase 가 탄생하게 되죠.
stateless 상태에서는…클라이언트가 요청시에 상태정보를 요청에 담아 주며 서버에 따로 유저 상태를 저장하지 않습니다. 따라서 서버가 고장이 나더라도 다른 서버에 요청을 보내면 그에 맞는 응답을 내려줄 수 있습니다.
하지만 모든 것을 무상태로 설계 할 수 있는 경우도 있고, 없는 경우도 있습니다. 로그인이 필요없는 단순한 화면의 경우 무상태로 설계 가능하지만 상태유지를 해야하는 로그인의 경우 로그인 상태를 서버에 유지해야 합니다. 이경우 일반적으로 브라우저 쿠키와 서버 세션등을 사용해 상태를 유지합니다. 하지만, 상태 유지는 최소한만 사용해야 합니다.
WAS 와 DataBase 의 등장 그리고
이번에는 로그인 과정을 예로 들어 웹 서비스가 이전에 비해 어떻게 더 진화 하였는지 알아보겠습니다.
클라이언트에서 값을 입력하고, 로그인 버튼을 누르게 되면…
유저가 위와같이 화면에서 로그인을 한 후에 버튼을 입력 했다고 가정해 봅시다. 이 사용자 입력값은 과연 신뢰할수 있는 값일까요? 아닙니다. 이 값은 신뢰할 수 없는 값이며, 검증 대상에 있는 값입니다.
아닙니다. 이 값은 신뢰할 수 없는 값이며, 검증 대상에 있는 값입니다. 이를 검증하는 주체는 WAS 인데요, WAS 란 무엇이며, 어떻게 값을 검증한다는 걸까요? 그전에 먼저 웹서버와 WAS 를 정확하게 알고 넘어가 봅시다.
웹서버와 WAS 정확하게 알고 가기
웹서버
•
웹 서버(Web Server)는 웹 페이지, 사이트, 애플리케이션을 인터넷을 통해 사용자에게 제공하는 서버 소프트웨어 또는 하드웨어를 의미합니다.
•
역할
◦
웹 서버는 클라이언트(웹 브라우저) 로부터 HTTP 요청을 받고 그 요청에 맞는 적절한 HTTP 응답(HTML 문서, 이미지, 파일 등)을 전송합니다.
◦
웹 서버는 HTML, CSS, JavaScript, 이미지 파일 등과 같은 정적 컨텐츠를 저장하고 관리합니다. 사용자의 요청에 따라 이러한 정적 파일을 클라이언트에게 직접 제공합니다.
◦
웹 서버는 웹사이트의 디렉토리 구조를 관리하고, 파일에 대한 액세스 권한을 제어합니다.
◦
SSL/TLS와 같은 프로토콜을 통해 데이터 암호화를 지원하며, 보안 인증서를 통해 웹사이트의 안전성을 보증합니다.
◦
대규모의 트래픽을 효과적으로 처리하기 위해 로드 밸런싱 기능을 제공합니다.
◦
웹 서버는 접속 기록, 오류 메시지 등을 로그 파일에 저장하여 웹사이트의 트래픽과 문제를 분석하는 데 사용됩니다.
•
예
◦
Apache HTTP Server
◦
Nginx
WAS
•
WAS는 "Web Application Server"의 약자로, 웹 애플리케이션 서버를 의미합니다. 웹 애플리케이션 서버는 클라이언트(웹 브라우저)로부터의 요청을 받아들이고, 그 요청에 따라 동적인 컨텐츠를 생성하여 응답하는 역할을 합니다.
•
역할
◦
WAS는 HTML, CSS, JavaScript 와 같은 정적 파일 뿐만 아니라 서버 사이드 스크립트(PHP, Java, Python)를 실행하여 동적 컨텐츠를 생성합니다.
◦
대부분의 웹 애플리케이션은 데이터베이스와 연동되어 데이터를 저장하고 검색합니다. WAS 는 이러한 데이터베이스 연결과 데이터 처리를 관리합니다.
◦
사용자별 세션 정보를 관리하여, 사용자의 상태(로그인 상태, 선호 설정 등)를 유지합니다.
◦
인증, 권한 부여, 데이터 보호 등의 보안 관련 기능을 제공합니다.
◦
데이터의 일관성과 정확성을 유지하기 위해, 데이터베이스 트랜잭션을 관리합니다.
◦
동시에 여러 요청을 처리할 수 있도록 멀티스레딩을 지원합니다.
일반적으로 WAS 는 웹 서버와 함께 사용되며, 웹 서버는 주로 정적 컨텐츠를 처리하고, 동적 컨텐츠나 애플리케이션 로직 처리는 WAS 가 담당합니다. 그럼 방금 든 예시에서 사용자 값은 어떻게 검증 될까요?
WAS 는 데이터 베이스에 해당 사용자가 있는지 SQL 로 질의를 합니다. 데이터 베이스는 해당 유저의 존재를 찾고, 결과를 응답으로 보냅니다. 이러한 응답을 바탕으로 유저가 존재한다면 유저의 정보를 넣어 템플릿을 만들게 되죠. 이렇게 WAS 는 동적 문서를 만들어 서버에 저장합니다. 이러한 동적문서는 spring 의 경우 thymeleaf 나 jsp 문서가 되겠죠.
이렇게 만들어진 동적문서를 client 응답에 넣어 보냅니다. 그리고 client 는 이전과 같이 html 파일을 한줄 한줄 읽어 화면에 렌더링 하게 되죠. 전체적인 요청과 응답 구조는 아래와 같습니다.
백엔드에서는 데이터베이스에 유저 정보를 저장하지만 프론트는요?
프론트에서는 로컬 스토리지의 개념도 있지만, 쿠키에 유저정보를 저장하기도 합니다.
REST API 의 등장
다양한 모바일 기기의 등장으로 인해 다양한 플랫폼(웹, 모바일, IoT 기기 등)에서 동작하는 애플리케이션을 개발 할 필요가 생겼습니다. 그렇게 REST API 가 등장 하게 됩니다.
핵심은 Data
이전에 로그인 예제를 다시 살펴보면, 사용자 입력 데이터는 WAS 에서 검증, 처리 됩니다. 그리고 이를 포함하여 동적 템플릿을 만들어 응답으로 보내게 됩니다. 하지만 REST API 에서는 JSON 형식의 데이터로 client 와 소통을 하게 됩니다. 이 때문에 특정 언어나 플랫폼에 제한되지 않고, 다양한 애플리케이션과 시스템을 연동할 수 있게 되는 거죠.
요청과 응답 구조
client 가 GET 요청을 보내면 WAS 는 요청을 읽고, DB 에서 해당자원을 찾아 JSON 형태로 응답을 보냅니다. (요청에 따라 XML 등 다른 형식의 데이터도 보낼 수 있습니다.) client 는 이렇게 받은 데이터를 React, Vue.js 등의 프레임 워크를 사용하여 기기에 알맞은 html 을 구성하여 화면에 뿌려 줍니다.
운영과 보안
이렇게 요청과 응답을 하는 Web application 을 개발만 하면 끝나는 걸까요? 운영 또한 중요합니다. APM 을 통해 운영팀에서는 데이터 베이스의 응답시간과 JVM 의 상태, CPU 등을 모니터링 합니다.
운영 또한 중요합니다. APM 을 통해 운영팀에서는 데이터 베이스의 응답시간과 JVM 의 상태, CPU 등을 모니터링 합니다.
그렇다면 보안은요?
IPS (Intrusion Prevention System)
IPS는 네트워크 트래픽을 모니터링하고 악의적인 활동이나 공격을 감지하고 차단하는 보안 시스템입니다. 침입 탐지 시스템(IDS)과 유사하지만, IDS가 공격을 감지하고 경고만 하는 반면 IPS는 공격을 자동으로 차단하는 능력을 가지고 있습니다.
SSL (Secure Sockets Layer)
•
SSL은 인터넷 상에서 데이터를 안전하게 전송하기 위한 표준 기술입니다.
•
데이터 암호화, 인증서를 이용한 서버 및 클라이언트 인증, 데이터 무결성 검증 등을 제공합니다.
•
SSL은 데이터 전송 과정에서 데이터를 암호화하여, 중간자 공격(Man-in-the-Middle Attack)이나 데이터 도청을 방지합니다.
WAF
•
WAF는 웹 애플리케이션을 대상으로 하는 다양한 공격으로부터 보호하기 위해 설계된 특화된 형태의 방화벽입니다.
•
WAF는 SQL 인젝션, 크로스 사이트 스크립팅(XSS), 크로스 사이트 요청 위조(CSRF) 등과 같은 웹 애플리케이션 공격을 감지하고 차단합니다. 또한, 애플리케이션 레벨에서 발생할 수 있는 다양한 취약점을 보호하는 데 중요한 역할을 합니다.
•
WAF는 웹사이트, 웹 기반 애플리케이션, 웹 서비스 등 인터넷을 통해 제공되는 모든 웹 리소스를 보호하는 데 사용됩니다. 특히 공개적으로 접근 가능한 웹 애플리케이션에서 매우 중요한 보안 수단으로 간주됩니다.
DMZ
•
•
외부에서 접근 가능한 서버(웹 서버, 메일 서버, FTP 서버 …)를 내부 네트워크와 분리하여 배치합니다. 이를 통해 외부 공격으로부터 내부 네트워크를 보호하고 ,내부 네트워크에 직접적인 접근을 차단합니다.
•
사설 네트워크와 공용 네트워크
◦
사설 네트워크
▪
접속할 수 있는 사용자를 제한합니다.
▪
가정 내 네트워크
▪
사내 네트워크
▪
사설 [[IP (Internet Protocol)]] 를 사용합니다.
▪
대역
A 클래스 | 10.0.0.0 ~ 10.255.255.255 |
B 클래스 | 172.16.0.0 ~ 172.31.255.255 |
C 클래스 | 192.168.0.0 ~ 192.168.255.255 |
◦
공용 네트워크
▪
공용 [[IP (Internet Protocol)]] 를 사용합니다.
▪
ISP (Internet Service Provider) 를 사용합니다.
▪
대역
A 클래스 | 0.0.0.0 ~ 9.255.255.255 <br> 11.0.0.0 ~ 126.255.255.255 |
B 클래스 | 128.0.0.0 ~ 172.15.255.255<br>172.32.0.0 ~ 191.255.255.255 |
C 클래스 | 192.0.0.0 ~ 192.167.255.255<br>192.169.0.0 ~ 223.255.255.255 |
