(인프런) 반드시 알고 넘어가야 할 웹 기술 기초편 을 보고 정리한 내용입니다.
웹 아키텍쳐
- 일반적인 웹 아키텍쳐는 클라이언트, 웹 서버, 데이터베이스의 형태로 되어 있음.
- 영역 별로 프론트엔드(Front-End)와 백 엔드(Back-End)로 나뉨.
- 아래의 웹 아키텍쳐는 웹을 단순화 시킨 구조로 실 환경은 이보다 훨씬 복잡함.
클라이언트 ========= 웹 서버 ========= 데이터베이스
-------- ---------------------------
프론트 엔드(Front-End) 백 엔드(Back-End)웹 아키텍쳐 동작 원리 분석
- 웹 브라우저 동작 순서.
- 웹 사이트 접속 - URL 입력.
- 클라이언트 측에서 사용자가 웹 브라우저를 통해 사이트 접속을 함.
- 도메인 - IP 변환 작업.
- 웹 브라우저는 가장 먼저 도메인에 따른 IP 변환 작업을 함.
- 이유 : 데이터 전송을 위해서는 IP가 반드시 필요하기 때문.
- 로컬 DNS 캐시 확인. (ipconfig/displaydns)
- hosts 파일 참조.
- DNS 서버 질의.
- 웹 브라우저는 가장 먼저 도메인에 따른 IP 변환 작업을 함.
- HTTP 요청 메시지 제작.
- HTTP Request Message.
- HTTP 프로토콜.
- TCP/IP 통신을 기반으로 하기 때문에 TCP 연결의 특징인 3-way hand shake 과정을 거친 후 HTTP 데이터를 전송함.
- 요청에 따른 DB 연결 및 질의 과정을 거치며, 이에 따라 응답 메시지를 제작 후 전송함.
요청 메시지 (HTTP Request Message) DB 연결 및 질의 ___ (3-way hand shake) _____ 클라이언트 === TCP/IP 통신(HTTP Connection) === 웹 서버 ==== 데이터베이스 ------- 응답 메시지 제작 및 전송 응답 메시지 (HTTP Response Message)
- HTTP 응답 메시지 해석.
- HTTP Response Message.
- HTML 해석 후 출력.
- 응답 메시지를 받으면 이를 해석 후 바디에 있는 데이터인 HTML 코드를 웹 브라우저가 해석하여 사용자에게 깔끔한 인터페이스를 제공.
- 웹 사이트 접속 - URL 입력.
클라이언트
- 클라이언트 프로그램 : 대표적으로 웹 브라우저.
- ex. 크롬, 사파리, 파이어 폭스 등.
- 웹 브라우저는 사용자가 입력한 URL을 이용해 서버에 자원을 요청하고, 서버로부터 응답을 받아서 해석 후 사용자에게 GUI 환경을 제공함.
- 응답 메시지 해석.
- HTML, CSS, JAVASCRIPT 코드 해석.
- 사용자 인터페이스 제공.
웹 사이트 구조 분석.
- 웹 사이트 구조 : 3요소로 구성. (HTML, CSS, JAVASCRIPT)
- HTML, CSS : 웹에 가독성 있는 인터페이스를 구성하기 위해 사용.
- JAVASCRIPT : 동적인 인터페이스 구성을 위해 사용.
-
모던 웹 모델(Modern Web Model) 구조.
-
웹 서버와 통신을 위해 HTML 태그를 사용하거나 JAVASCRIPT를 통해 통신이 가능함.
웹 인터페이스 구성. HTML (HyperText Markup Language) CSS (Cascading Style Sheet) 요청 ➡ 백 엔드 ⬇⬆ ⬅ 응답 웹 서버 === 데이터베이스 동적 인터페이스 구성. JAVASCRIPT.
-
- Ajax 웹 모델(Ajax Web Model) 구조.
- Ajax 기술로 페이지 동기화 필요 없이 서버에 요청/응답을 받아 페이지 재구성(렌더링)이 가능함.
- 백 엔드 측 부하율을 낮출 수 있음.
웹 인터페이스 구성. 동적 인터페이스 구성. HTML (HyperText Markup Language) ➡ JAVASCRIPT 요청 ➡ 백 엔드(웹 서버 === 데이터베이스) CSS (Cascading Style Sheet) ⬅ AJAX ⬅ 응답
- 웹 서버, 웹 어플리케이션 서버.
- 웹 서버.
- 클라이언트 자원 요청에 따른 웹 서비스를 제공.
- 종류 : Apache, IIS, Nginx, WebtoB, Oracle HTTP Server 등.
- JAVA Web Application 환경의 경우, 웹 서버와 웹 어플리케이션 서버를 분리. (보다 효율적이고 유연한 서비스 제공을 목표)
- 웹 서버 : 정적인 컨텐츠 자원 제공.
- 사용자가 정적 자원을 요청할 경우, 웹 서버에서 처리 후 바로 응답 메시지를 보냄.
- 웹 어플리케이션 서버 : 동적인 컨텐츠 자원 제공.
- 사용자가 정적 자원을 요청할 경우, 웹 서버는 웹 어플리케이션 서버로 포워딩(Forwarding)함.
- 웹 어플리케이션 서버에서 로직에 따라 처리 후 응답 메시지를 보냄.
- 만약 로직 상에 데이터베이스 질의 과정이 있을 경우 데이터베이스와 연결함.
- 웹 서버와 웹 어플리케이션은 하나의 서버에 구성되어 있는 경우가 있으나, 대부분의 기업은 물리적으로 분리함.
- 웹 서버 : 정적인 컨텐츠 자원 제공.
- 웹 서버.
2-Tier 구조. 3-Tier 구조. (JAVA Web Application 환경)
웹 서버 ==== 데이터베이스 웹 서버 ==== 웹 어플리케이션 서버 ==== 데이터베이스웹 서버 동작 원리 분석
- 웹 서버는 어떤 동작 원리로 클라이언트가 요청한 자원을 호출하는가?
- 요청 메시지 해석.
- 메소드 파싱.
- URL 파싱.
- 메소드에 따른 액션 ➡ '2. 자원 요청에 따른 액션' 동작 실행.
- 결과 반환. ➡ '3. 응답 메시지 제작 및 전송' 동작 실행.
- 자원 요청에 따른 액션.
- 자원 유/무 체크 : '파일 시스템'에 접근.
- 객체 생성.
- 동적/정적 자원에 따른 액션.
- 정적 자원.
- 동적 자원 : '스크립트 해석기(엔진)'로 '데이터베이스'에 접근. (스크립트 해석기(엔진) ↔ 데이터베이스)
- 결과 반환.
- 응답 메시지 제작 및 전송.
- 응답 헤더 세팅.
- 응답 바디 세팅.
- 응답 메시지 전송.
웹 디렉토리
- 웹에서 호출할 수 있는 자원이 있음.
- URL로 서버에 자원을 요청하는 것들은 웹 서버에 설정된 경로로 인해 가능함.
- 웹 서버에서 바라보는 경로 : 웹 디렉토리. (웹 루트, 도큐먼트 루트 등)
- 설정 파일 : 파일 다운로드/업로드 취약 점 공격 시 많이 활용됨.
웹 서버와 웹 어플리케이션 서버를 분리하는 이유
- 웹 서버 : 정적 자원 처리에 대해 최적화가 되어 있음.
- 웹 어플리케이션 서버 : 동적 자원 처리에 최적화가 되어 있음.
- 업무 분담을 하여 자원처리에 대한 효율성을 극대화 시킴.
데이터베이스
- 동적인 컨텐츠를 제공하기 위해 데이터를 저장해두는 저장소.
- 종류: Oracle, MySQL 등.
Server Side와 Client Side
- 웹 구조는 크게 Server Side와 Client Side로 나눌 수 있음.
- Client-Side Script.
- 웹 클라이언트에서 해석되는 스크립트(언어).
- ex) JAVASCRIPT
- Server-Side Script.
- 웹 어플리케이션 서버에서 해석된느 스크립트(언어).
- ex) PHP, JSP, ASP/.NET
Client-Side Script 기반 보안 검증이 안전하지 않은 이유
- 클라이언트 측에서 보안 검증 절차가 구현되어 있다 하더라도 서버 측 보안 검증 로직을 반드시 구현해야 함.
- 이유.
- 웹 프록시 도구와 개발자 도구를 통해 Client-Side Script 조작 및 값 변조가 가능하기 때문에 사실상 검증 자체가 무의미함.
- input 태그의 hidden 타입의 전송도 웹 프록시 도구와 개발자 도구로 확인, 변조가 가능하기 때문에 해당 값을 신뢰해서는 안됨.
👋 https://github.com/ujw0712