IT STUDY LOG

[웹서비스 개발 기초] 03. HTTP 기초 본문

devops bootcamp 4/개발 및 배포

[웹서비스 개발 기초] 03. HTTP 기초

roheerumi 2023. 3. 16. 18:26

# 학습 목표

  • HTTP의 기본적인 내용을 학습할 수 있다.
    • HTTP messages의 구조를 설명할 수 있다.
    • HTTP의 동작 방식을 이해할 수 있다.
    • HTTP requests와 responses를 구분할 수 있다.
    • HTTP의 응답 메시지를 찾아볼 수 있다.

 


# 학습 내용

1.  HTTP (Messages)

    • 개요
      • 웹 상에서 클라이언트와 서버 간의 통신을 위해 개발된 프로토콜
      • 다양한 하이퍼 텍스트 문서(참조, 링크를 통해 한 문서에서 다른 문서로 접근할 수 있는문서, 대표적인 예 : HTML)들이 웹 상에 연결되어있음
      • 주로 80/tcp 포트 사용
    • 특징
      • Connectionless 비연결형 프로토콜
        • HTTP/1.0 : 클라이언트 요청, 서버 응답 이후 바로 연결 종료하는 구조
        • HTTP/1.1 : Keep-Alive 옵션이 추가되어 TCP 연결 상태를 웹 서버 설정(아파치의 경우 httpd.conf)에 따라 일정시간 지속 가능
      • Stateless 상태정보를 유지하지 않는 프로토콜
        • 동일 클라이언트의 현재 요청과 이전 요청을 식별하지 못한다는 뜻
        • 클라이언트 상태 정보 유지하기 위한 기술
          클라이언트 상태정보 유지 기술 설명
          쿠키 방식 (클라이언트 기술) - 클라이언트 상태 정보를 요청/응답 시 헤더에 담아 전달
           > 서버 : Set-Cookie 응답 헤더
           > 클라이언트 : Cookie 요청 헤더
          - 분류
           > 영속 쿠키 : 클라이언트에 파일 형태로 저장되어 존재
           > 세션 쿠키 : 클라이언트 메모리 상에 세션이 유지되는 동안 존재하다 세션 종료(일반적으로 웹 브라우저 종료 시) 소멸
          - 해킹, 스니핑에 의한 변조와 외부 노출에 취약한 특성
          세션 방식 (서버 기술) - 클라이언트 상태 정보를 서버 메모리에 저장하는 기술
           > 서버 -> 클라이언트 : session ID 부여 후 세션 쿠키를 통해 주고받음
          - 쿠키보다 보안상 안전
          - HTTP 세션 하이재킹에 취약
      • HTTP 쿠키 관련 보안 속성
        • httponly 속성 : 클라이언트 사이드에서 쿠키 접근 불가
        • secure 속성 : https 통신일 경우에만 쿠키 사용

 

2. HTTP Requests

  • 요청 메세지 구조

  • 요청 메세지 예시 
    GET /hello.htm HTTP/1.1
    User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
    Host: www.tutorialspoint.com
    Accept-Language: en-us
    Accept-Encoding: gzip, deflate
    Connection: Keep-Alive
  • 요청 메세지 구문 형식
    항목 내용
    요청 라인 - 1행
    - 구성 : 요청 메소드(0x20, 공백)요청 URI(0x20, 공백)HTTP 버전 정보(0x0d0a, 개행)
    요청 헤더 - 여러 헤더 정보로 구성되며 각 헤더는 개행으로 구분
    - 주요 요청 헤더
     > Host : 요청 대상이 되는 서버의 도메인명/호스트명과 포트 정보
     > User-Agent : 요청 클라이언트 어플리케이션/OS 정보
     > Referer : 현재 요청 URL 정보를 담고 있는 이전 문서의 URL 정보
    빈 라인 - 헤더 끝을 의미하는 개행
    - 헤더 개수가 가변이므로 빈 라인을 통해 끝을 식별
    요청 메시지 바디 - 클라이언트에서 서버로 전송하는 데이터를 담는 부분
    - GET 방식의 경우 요청 데이터가 없으므로 바디가 없음
[발표 주제1] HTTP의 메소드와 CRUD(create/read/update/delete)를 적절하게 짝짓고, POST와 PUT의 차이점을 설명하세요.
  • 주요 요청 메소드
    메소드 설명
    GET - 요청 URI로 자원을 서버에 요청하는 메소드
    - 요청 메시지 바디 없음
    - 필요 시 쿼리 스트링을 이용해 제한된 데이터 전송 가능
    POST - 요청 URI로 자원에 데이터를 전달하여 처리한 결과를 서버에 요청하는 메소드
    - 요청 메시지 바디 포함
    PATCH - 리소스의 부분만을 수정하는 데 쓰는 메소드
    HEAD
    (취약) 
    - GET METHOD와 유사
    - 서버 응답 시 응답 메시지 바디를 제외하고 헤더부만 응답해주는 메소드
    - 요청 자원에 대한 처리는 서버에서 이루어지나 결과로 헤더값 만을 전송
    - 주로 검색엔진에서 URL/링크 유효성을 검증하기 위한 목적으로 사용
    OPTIONS
    (취약) 
    - 서버가 지원하는 메소드를 확인하는 목적으로 사용하는 메소드
    CONNECT
    (취약) 
    - 클라이언트와 서버 간의 터널링 목적으로 사용하는 메소드로 웹 서버가 프락시 역할 수행
    PUT
    (취약) 
    - 요청 메시지 바디에 포함되어있는 데이터를 요청 URL로 지정한 자원으로 저장하도록 하는 메소드
    TRACE
    (취약) 
    - 클라이언트로부터 수신한 메시지를 서버에서 그대로 반환하는 메소드로 요청에 대한 루프백 테스트 용도로 사용
    DELETE
    (취약) 
    - 요청 URI로 지정한 자원을 서버에서 삭제하도록 하는 메소드
  • POST와 PUT의 차이
    POST PUT
    - 요청에 포함된 Request-URI에 정의된 리소스 하위 Entity로 새롭게 생성
    - Request-URI가 Collection-URI여야 함 (ex) POST /users, POST /clothes
    - 여러번의 요청에 항상 동일한 결과를 받지 않음(멱등하지 않음)
    - 캐싱 가능
    - Request-URI에 리소스가 존재한다면 갱신하고 존재하지 않다면 생성
    - Resource Identifier를 지정해야 함 (ex) PUT /users/{존재하는_사용자_id}, PUT /users/{존재하지_않는_사용자_ID}
    - 여러번의 요청에 항상 동일한 결과를 받음(멱등함)
    - 캐싱할 수 없음

출처 : 코드스테이츠 데브옵스 과정
출처 : 코드스테이츠 데브옵스 과정

  • 메소드 요청 형식
    요청 형식 설명 예시
    origin 형식 - ?와 함께 쿼리 문자열이 붙는 절대 경로
    - 주로 POST, GET, HEAD, OPTIONS 등의 메소드와 함께 쓰임
    POST / HTTP 1.1
    GET /background.png HTTP/1.0
    HEAD /test.html?query=alibaba HTTP/1.1
    OPTIONS /anypage.html HTTP/1.0
    absolute 형식 - 완전한 URL 형식
    - 프록시 연결하는 경우 대부분 GET 메소드와 함께 사용
    GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
    authority 형식 - 도메인 이름과 포트 번호로 이루어진 URL의 authority component
    - CONNECT와 주로 사용
    CONNECT developer.mozilla.org:80 HTTP/1.1
    asterisk 형식 - OPTIONS와 함께 별표 하나로 서버 전체를 표시 OPTIONS * HTTP/1.1
  • Query String(요청 문자열) 
    • 구문 형식 
      • ? : 쿼리 스트링 식별자
      • param=value : 파라메터 명=파라메터 값
      • & : 각 파라메터 구분자

출처 : 코드스테이츠 데브옵스 과정

  • Request Headers
    • 종류
      종류 설명
      General headers - 메시지 전체에 적용되는 헤더
      - body를 통해 전송되는 데이터와는 관련 없음
      Request headers - fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더
      - 요청 구체화, 컨텍스트 제공, 조건에 따른 제약 추가 등 가능
      Representation headers
      (Entity headers)
      - body에 담긴 리소스 정보(컨텐츠 길이, MIME TYPE 등)을 포
  • Request Body
    • 종류
      종류 설명
      Single-resource bodies(단일-리소스 본문) - 헤더 두 개(Content-Type과 Content-Length)로 정의된 단일 파일로 구성
      Multiple-resource bodies(다중-리소스 본문) - 여러 파트로 구성된 본문에서는 각 파트마다 다른 정보 지님
      - 보통 HTML form과 관련

 

3. HTTP Responses

  • 응답 메세지 구조

  • 응답 메세지 예시
    HTTP/1.1 200 OK
    Date: Mon, 27 Jul 2009 12:28:53 GMT
    Server: Apache/2.2.14 (Win32)
    Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
    Content-Length: 88
    Content-Type: text/html
    Connection: Closed
  • 응답 메세지 구문 형식
    항목 내용
    상태 라인 - 1행
    - 구성 : HTTP 버전 정보(0x20, 공백)상태코드(0x20, 공백)상태 응답 구문(0x0d0a, 개행)
    응답 헤더 - 여러 헤더 정보로 구성되며 각 헤더는 개행으로 구분
    - 주요 요청 헤더
     > Content-Type: 메시지 바디의 데이터 형식 설정
     > Content-Length: 메시지 바디의 전체 크기 설정(단위:바이트)
    빈 라인 - 헤더 끝을 의미하는 개행
    - 헤더 개수가 가변이므로 빈 라인을 통해 끝을 식별
    응답 메시지 바디 - 서버에서 클라이언트로전송하는 데이터를 담는 부분
[발표 주제2] HTTP 응답 코드의 200, 300, 400, 500번대의 특징과 차이점을 설명하세요.
  • 주요 상태 코드
    • 1xx번대 : information (정보 응답 코드)
      상세 코드 응답 구문 설명
      100 Continue  클라이언트로부터 일부 요청을 받았으며 나머지 정보를 계속 요청함
    • 2xx번대 : Suceess (성공 응답 코드)
      상세 코드 응답 구문 설명
      200 OK  요청이 성공적으로 수행되었음
      201 Created  PUT 메소드에 의해 원격지 서버에 파일 생성됨
      202 Accepted  웹 서버가 명령 수신함
    • 3xx번대 : Redirection (재지정 응답 코드, 요청 자원의 위치가 재지정되었음을 의미)
      상세 코드 응답 구문 설명
      301 Moved Permanently 요청 자원의 위치가 영구적으로 변경됨. Location 응답 헤더를 통해 자원의 변경된 URL 정보 전달
      302 Found 요청 자원의 위치가 임시적으로 변경됨. Location 응답 헤더를 통해 자원의 변경된 URL 정보 전달
      304 Not Modified 요청한 자원이 변경되지 않았으므로 클라이언트 로컬 캐시에 저장된 자원을 이용하라는 의미
    • 4xx번대 : Client Error (클라이언트 오류 응답 코드)
      상세 코드 응답 구문 설명
      400 Bad Request  요청 메시지 문법 오류
      401 Unauthorized 요청한 자원에 대한 인가 필요, 요청 자원을 실행하는데 필요한 적절한 권한이 없음을 의미
      403 Forbidden 요청한 자원에 대한 접근 차단
      404 Not Found 요청한 자원이 존재하지 않음
    • 5xx번대 : Server Error (서버 오류 응답 코드)
      상세 코드 응답 구문 설명
      500 Internal Server Error 내부 서버 오류 
  • 기타 상태 코드 참고 : https://developer.mozilla.org/ko/docs/Web/HTTP/Status
 

HTTP 상태 코드 - HTTP | MDN

HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고

developer.mozilla.org

출처 : 코드스테이츠 데브옵스 과정

  • Response Headers
    • 종류
      종류 설명
      General headers - 메시지 전체에 적용되는 헤더
      - body를 통해 전송되는 데이터와는 관련 없음
      Response headers -  위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더
      - Vary, Accept-Ranges와 같이 상태 줄에 넣기에는 공간이 부족했던 추가 정보를 제공
      Representation headers (Entity headers) - body에 담긴 리소스 정보(컨텐츠 길이, MIME TYPE 등)을 포함
  • Response Body
    • 종류
      종류 설명
      Single-resource bodies(단일-리소스 본문) - 길이 아는 파일 : 헤더 두 개(Content-Type과 Content-Length)로 정의된 단일 본문로 구성
      - 길이를 모르는 단일 파일 : Transfer-Encoding이 chunked 로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩
      Multiple-resource bodies(다중-리소스 본문) - 여러 파트로 구성된 본문에서는 각 파트마다 다른 정보 지님
      - 보통 HTML form과 관련
  • Form 데이터 POST 전송 시 Content-Type (MIME Type) 유형
    • MIME(Multipurpose Internet Mail Extensions) 타입
      • 표현 형식 
        • 메인타입/서브타입
        • (ex) text/plain, image/png, application/pdf 등
      • 대표적인 타입
        타입 설명 예시
        text 텍스트를 포함하는 모든 문서 text/plain, text/html, text/css, text/javascript
        image 모든 종류의 이미지 image/gif, image/png, image/jpeg, image/bmp, image/webp
        audio 모든 종류의 오디오 파일 audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
        video 모든 종류의 비디오 파일 video/webm, video/ogg
        application 모든 종류의 이진 데이터 application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf
      • 전송 방식에 따른 분류
        application/x-www-form-urlencoded multipart/form-data
        - 폼 입력 필드의 데이터를 URL 인코딩하여 쿼리스트링으로 요청 메시지 바디부에 담아 전달 - 각각의 폼 입력 필드 데이터를 바운더리(랜덤값)를 이용해 개별 파트로 구분한 후 각 파트별로 헤더부와 데이터부로 구성
        # multipart/form-data 요청 예
        POST / HTTP/1.1
        Host: localhost:8000
        User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
        Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
        Accept-Language: en-US,en;q=0.5
        Accept-Encoding: gzip, deflate
        Connection: keep-alive
        Upgrade-Insecure-Requests: 1
        Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
        Content-Length: 465

        -----------------------------8721656041911415653955004498
        Content-Disposition: form-data; name="myTextField" : 파트 헤더
        : 개행
        Test : 사용자 입력값
        -----------------------------8721656041911415653955004498
        Content-Disposition: form-data; name="myCheckBox"

        on
        -----------------------------8721656041911415653955004498
        Content-Disposition: form-dataname="myFile"filename="test.txt"
        Content-Type: text/plain

        Simple file.
        -----------------------------8721656041911415653955004498--
출처 : 탑스팟 정보보안기사 실기 이론편(정일영, 강재순, 조현준 공저), https://developer.mozilla.org/ko/docs/Web/HTTP/Messages, https://kingjakeu.github.io/study/2020/07/15/http-post-put/, https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types, https://www.tutorialspoint.com/http/http_requests.htm

 

<기타 참고하면 좋을 자료>

설명 링크
브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361
Chrome Network Tab 사용 방법 https://www.youtube.com/watch?v=e1gAyQuIFQo&feature=youtu.be 
CRUD와 요청 메소드 관련 Best Parctice 참고 레퍼런스 https://koreanjson.com/

 

Comments