본문 바로가기
Programming/JavaScript

[JS] HTTP 란 무엇일까

by 공부합시다홍아 2024. 6. 14.

이번 포스팅은 HTTP 프로토콜에 대해서만 알아보려고 한다. 이전에는 HTTP란 Hyper Text Transfer Protocol 로 웹 간의 데이터를 주고 받기 위한 통신 규약으로만 간단히 이해하고 포트번호는 80을 사용한다고만 이해하고 있었다.
오늘은 HTTP에 대해서 너무 깊진 않지만 약간 알아보려고 한다.

HTTP ( Hyper Text Transfer Protocol )

API와 같이 다른 서버와 통신을 할 때는 특정한 규칙에 맞춰 그 통신이 이루어져야 한다.
현재 웹에서 통신을 할 때 가장 흔하게 HTTP를 사용한다.

HTTP는 Hyper Text Transfer Protocol의 약자로, 간단하게 이야기하면 서로 다른 서버 간에 문자 형식으로 데이터를 주고 받을 때 지켜야 하는 규약이다.
우리가 HTTP 통신을 할 때는 몇 가지의 단계를 거치게 된다.
HTTP에서 요청을 보낼 때는 대상 서버로 HTTP 메서지를 보내고 요청 헤더(Request Header)와 요청 정보(Request Body)가 아래와 같이 담겨진다.

위 이미지를 통해 요청을 보내고 응답을 받을 때의 HTTP 메세지를 확인할 수 있따.
먼저 Request Message란

Request Message

가장 윗 줄을 보면 GET / data / 2.5 / weather? HTTP/1.1 에 해당하는 부분을 확인할 수 있는데, 이 부분을 Start-line이라고 한다. 그리고 그 아래의 Host부터가 요청 헤더(Request Header)부분에 속하게 된다.

Request Header에는 다양한 정보가 담기게 되는데, 요청을 받는 서버의 이름, 서버의 버전, 전달하는 컨텐츠의 타입, 요청 날짜, 요청을 보낸 컴퓨터의 정보 등 수 많은 정보를 담아서 전달한다.
그리고 Request Body에는 우리가 서버로 혹은 다른 사용자가 우리의 서버로 전달하고자 하는 컨텐츠 내용을 담게 된다.

Response Body에는 HTTP/1.1 200 OK 라는 정보를 제일 윗 줄에서 확인할 수 있다. 이 부분도 요청 헤더와 동일하게
start-line이라고 부른다. 순서대로 아래와 같은 정보를 담는다.
● HTTP/1.1 : HTTP 버전
● 200 : 상태 코드
● OK : 응답 메서지 
이렇게 위 세 가지의 정보를 담고있다.

그리고 두 번째 줄부터가 Response Header에 속하는데, Request Header와 마찬가지로 응답 날짜, 응답을 전달한 서버 명, 서버의 버전, 컨텐츠의 타입 등을 담고있고 아래와 같다.
● Content-Type : application/json; - JSON 타입의 데이터
● Access-Control-Allow-Origin : * - 접속이 허가된 사이트(홈페이지)정보로 * 일떄는 모든 사이트의 접근을 허락한다는 뜻
● Access-Control-Allow-Credentials : true : 쿠키의 허용 여부 ( true : 허용 / false : 불허용 )

Response Header 이후에 나타나는 빈 줄을 하나 거치고 나면, Response Body가 나타난다.
Response body에는 실제로 응답 리소스 데이터가 담겨져 있는데, 아래에서는 HTTP Request Method에 대해 알아보려고 한다.

HTTP Request Method

HTTP 요청은 각 요청마다 Method를 사용하며 그 역할이 모두 다르다.

  • GET : 서버의 데이터를 조회하는 Method로 HTTP Message에 요청 바디를 담아줄 수 없다. 
    ▷ 쉽게 이해하면 주소에 데이터의 값이나 타입을 담아서 전달하는 것
  • POST : 서버에 데이터를 등록하는 Method이다.
    ▷ 내가 개발을 하면서 이해하고 있는 부분은 Post는 데이터를 숨겨서 보낼 수가 있어, 제 3자가 어떤 데이터를 보내고 받는지 확인을 할 수가 없다.
  • PUT : 서버의 리소스를 Request Body에 담긴 내용으로 수정하는 Method
  • PATCH : 서버 내 리소스의 일부를 수정하는 Method
  • DELETE : 서버 내 리소스를 삭제하는 Method
  • OPTION : 서버에서 허용하는 Method의 목록을 알려주는 Method

상태 코드 목록 ( Status Code )
HTTP 통신을 통해 전달하는 상태 코드는 요청에 대한 응답의 결과를 세자리의 번호로 나타낸다.

1xx : 요청을 정상적으로 받은 것에 대한 응답, 계속 작업중임을 뜻한다.

2xx : 클라이언트의 요청을 수신, 승낙하였고 정상적으로 요청이 수행될 것임을 의미

3xx : Redirection과 관련한 동작이 수행되었을 때 돌려받는 상태 코드이다.

4xx : 클라이언트가 보낸 요청이 잘못되었음을 의미하는 상태 코드
보통 처음 개발을 하면 가장 많이 만나는 에러의 종류는 4xx 대의 404 에러이다.
보통 JSP, ThymeLeaf를 이용해 개발을 배우고 시작하는데, 이때 보내주는 Form의 방식이 GET, POST인데,
Controller에서 잘못 맞춰주거나, 요청 주소와 수신받는 주소의 차이가 발생할 때 자주 나타난다.

5xx : 서버에서 요청을 받아 로직을 수행하는 과정에서 문제가 생겼을 때 받게 되는 상태 코드이다.
5xx 대 에러는 나도 종종 많이 만나보는 에러인데, 로직을 수행할 때 예기치 못한 에러가 상당히 많다.
그 중에서 나는 DB에서 데이터를 잘못가져왔을 경우 혹은 화면에 잘못 입력해줬을 경우에 만나보았다.

하지만 이렇게 사용하면 HTTP 프로토콜의 보안이 약하기 때문에 해킹에 대한 위험이 매우크다. 
그래서 우리는 HTTPS에 대해서도 알아보아야 한다.


HTTPS ( Hyper Text Transfer Protocol Secure )

간단하게 설명하면 HTTP 프로토콜에 SSL이라는 Secuity Layer를 한층 올린 뒤 통신하는 프로토콜이다.
기본적인 통신 원리는 기존의 HTTP와 동일하고, End Points 간에 data를 주고 받을 때 좀 더 안전하게 데이터를 주고 받을 수 있게 한다.

출처 : https://velog.io/@code12/Spring-Security-SSLHTTPS
출처 : https://velog.io/@code12/Spring-Security-SSLHTTPS

HTTPS는 데이터를 endPoints 끼리 약속한 Secret Key로 암호화해서 전송하기 때문에 악의적인 공격자가 정보를 탈취하더라도 무슨 내용인지 알 수 없다.

SSL Certificates ( SSL 인증서 )

HTTPS의 통신의 보안은 SSL Certificates를 통해 보장된다.
SSL Certificates란 클라이언트와 서버간의 통신을 제 3자가 보증 해주는 문서이다.

클라이언트에서 서버에서 접속하면, 서버는 클라이언트에 인증서를 전달한다.
클라이언트는 전달받은 인증서를 확인하고 신뢰할 수 있는 사람인지 확인 후에 데이터를 전송한다.

SSL Certificates 종류
1. Self-Signed : 사용자 본인이 생성한 SSL Certificates로 개발 단계에서 사용
2. Signed By Trusted Authority : Symantex, Comodo와 같이 인증된 기관이 발급해준 SSL 인증서

HTTPS의 실제 동작 순서

출처 : https://velog.io/@code12/Spring-Security-SSLHTTPS

1. 클라이언트가 서버로 HTTPS Request 요청을 보낸다.
2. 서버는 클라이언트에게 SSL 인증서와 Public Key를 전달해 정상적인 서버임을 인증한다.
3. 클라이언트는 전달받은 인증서가 믿을만한 기관으로 발급받은 SSL 인증서인지 등을 확인한다.
4. SSL이 정상적임을 확인하면 브라우저가 서버에 Session Key를 전달한다.
5. 이후 클라이언트와 서버 사이의 모든 과정은 전달한 Session Key를 사용해 암호화 하게 된다.

728x90

'Programming > JavaScript' 카테고리의 다른 글

[JS] 호이스팅  (0) 2024.06.14
[JS] Scope(스코프)  (1) 2024.06.14
[JS] To do List 구현  (0) 2024.06.13
[JS] Local Storage  (2) 2024.06.13
[JS] D-DAY 카운트 구현  (0) 2024.06.13