IM 25일차 (http)

1. http란?

 

  클라이언트와 서버가 데이터를 주고받을 때 통신하는 방식, 통신 규약, 하나의 약속이다.

  메시지 타입은 두 가지다. 요청(request) 메시지가 있고 응답(respnse) 메시지가 있다.

  요청 메세지는 클라이언트의 요구사항이고, 응답 메시지는 서버의 응답이다.

  

  웹 개발자가 직접 HTTP 메시지를 텍스트로 작성하는 경우는 거의 없다.

  대신에 소프트웨어, 브라우저, 프록시, 또는 웹 서버가 그 일을 대신 수행한다.

  HTTP 메시지는 설정 파일(프록시 혹은 서버의 경우), API(브라우저의 경우), 혹은 다른 인터페이스를 통해 제공된다.

 

 

 

 

2. http 메세지의 구조

 

  HTTP 요청과 응답의 구조는 거의 비슷하며, 그 구조는 다음과 같다.

  기본적으로 시작 줄(start-line), header, body로 이루어져 있다.

  그리고 http header 와 body 사이에는 구분을 위해 빈 줄(blank line)이 주어진다.  

 

  HTTP 메시지의 start line 과 header를 묶어서 요청 헤드(head)라고 부르며, 본문(body) 을 HTTP 메시지의 payload 라고 합니다.

 

 

 

 

3. http request, response message

 

  3 - 1) request start line

 

    http 요청 메시지의 시작 줄에는 http 메서드, URL, http 버전으로 이루어져 있다.

   

    http 메서드는 요청이 어떤 동작을 수행할 것인지를 나타낸다.

    조회를 데이터를 달라고 할 때는 GET

    해당 데이터가 서버에 저장되어야 할 때는 POST

    특정 데이터의 전체 수정이 필요하다면 PUT

    특정 데이터의 부분만 수정이 필요하다면 PATCH

    특정 데이터의 삭제가 필요하다면 DELETE

    위 동작이 수행가능한 것인지 미리 확인하고자 할 때는 OPTIONS

   

    일단 이 정도는 꼭 기억하자

 

    그 다음은 URL인데 이것은 내가 위 메서드들에 해당하는 동작을 하길 원하는 경로라고 할 수 있다.

    그리고 마지막으로 버전은 말 그대로 http 버전이다.

 

  3 - 2) response start line

 

    http 응답 메시지의 시작 줄에는 http 버전, 응답 상태 코드와 상태 텍스트로 이루어져 있다.

    버전은 말 그대로 버전이다.

 

    응답 상태 코드는 1~500 번대의 코드가 있는데 앞자리에 따라 의미가 다르다.

    의미는 다음과 같다.

    상태 코드를 하나하나 다 외울순 없다. 필요할 때마다 찾아보자! developer.mozilla.org/ko/docs/Web/HTTP/Status

    

  3 - 3) common headers

 

    요청과 응답에 모두 사용되는 헤더를 공통 헤더라 한다. 이 중에서 Content 시리즈는 엔티티 헤더라고 불린다.

Date

HTTP 메시지가 만들어진 시각이다. 자동으로 만들어진다.

Date: Thu, 12 Jul 2018 03:12:27 GMT

Connection

Connection: keep-alive

HTTP/2를 사용하지 않는다면 보통 HTTP/1.1을 사용하게 되는데 Connection은 기본적으로 keep-alive로 되어있는데 사실상 아무런 의미도 없다. HTTP/2에서는 아예 사라져 버렸다.

Cache-Control

매우 중요하고 알아두어야 하는 헤더이기 때문에 따로 추후에 블로깅을 하자.

Content-Length

요청과 응답 메시지의 본문 크기를 바이트 단위로 표시해준다. 마찬가지로 자동으로 만들어진다.

Content-Length: 52

Content-Type

Content-Type: text/html; charset=utf-8

콘텐츠의 타입(MIME)과 문자열 인코딩(utf-8 등등)을 명시할 수 있다. 조금 뒤에 나오는 Accept 헤더, Accept-Charset 헤더와 대응된다. 위에 예시로 든 헤더는 현재 메시지 내용이 text/html 타입이고 문자열은 utf-8 문자열임을 알려주고 있다.

Content-Language

사용자의 언어를 뜻한다.

Content-Encoding

Content-Encoding: gzip, deflate

Content-Encoding은 콘텐츠가 압축된 방식입니다. 응답 컨텐츠를 br, gzip, deflate 등의 알고리즘으로 압축해서 보내면, 브라우저가 알아서 해제해서 사용한다. 이 외에도 다양한 압축 알고리즘이 존재하고 컨텐츠 용량이 줄어들기 때문에 압축을 권장한다.

 

  3 - 4) request headers

Host

서버의 도메인 네임이 나타나는 부분이다(포트 포함). 

Host: www.naver.com

Host 헤더는 반드시 하나가 존재해야 한다.

User-Agent

Host보다 더 유명한 헤더는 User-Agent다.

현재 사용자가 어떤 클라이언트(운영체제와 브라우저 같은 것)를 이용해 요청을 보냈는지 나온다.

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Accept

Accept 헤더는 요청을 보낼 때 서버에게 이런 타입(MIME)의 데이터를 보내줬으면 좋겠다고 명시할 때 사용한다.

예를 들어 요청의 헤더로

Accept: text/html

를 보내면 HTML 형식인 응답을 기대한다는 뜻이다.

Accept: image/png, image/gif
Accept: text/*

콤마로 여러 타입을 동시에 적어줄 수도 있고, *로 "텍스트이기만 하면 돼"라고 적어줄 수도 있다.

Accept로 원하는 형식을 보내면, 서버가 그에 맞춰 보내주면서 응답 헤더의 Content를 알맞게 설정할 것이다.

Accept-Charset: utf-8
Accept-Language: ko, en-US
Accept-Encoding: br, gzip, deflate

Charset은 문자 인코딩(UTF-8 등)을 명시하는 부분이고, Language는 원하는 언어, Encoding은 원하는 컨텐츠 압축 방식이다.

뭘 적어야 할지 모르겠다면 *(와일드카드)를 적거나, 그냥 브라우저가 알아서 설정해서 보내는 Accept를 사용하면 된다.

Authorization

Authorization 헤더는 인증 토큰(JWT든, Bearer 토큰이든)을 서버로 보낼 때 사용하는 헤더다.

API 요청 같은 것을 할 때 토큰이 없으면 거절당하기 때문에 이때, Authorization을 사용하면 된다.

Authorization: Bearer XXXXXXXXXXXXX

보통 Basic이나 Bearer 같은 토큰의 종류를 먼저 알리고 그다음에 실제 토큰 문자를 적어 보낸다.

Origin

POST 같은 요청을 보낼 때, 요청이 어느 주소에서 시작되었는지를 나타낸다. 여기서 요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 한다.

Referer

Referer: https://www.xxx.com/category/JavaScript

현재 페이지 이전의 페이지 주소가 담겨 있다.

이 헤더를 사용하면 어떤 페이지에서 지금 페이지로 들어왔는지 알 수 있기 때문에 애널리틱스 같은 데 많이 사용된다.

 

3 - 5) response headers

Access-Control-Allow-Origin

프런트엔드 개발자들에게 악명 높은 헤더다. 요청을 보내는 프론트 주소와 받는 백엔드 주소가 다르면 CORS 에러가 발생한다.

이때 서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에  요청을 보내는 프런트 주소를 적어주어야 에러가 나지 않는다.

Access-Control-Allow-Origin: www.naver.com
Access-Control-Allow-Origin: *

프로토콜, 서브도메인, 도메인, 포트 중 하나만 달라도 CORS 에러가 나게 된다.

만약 주소를 일일이 지정하기 싫다면 *으로 모든 주소에 CORS 요청을 허용하면 된다. 단 그만큼 보안이 취약해질 것이다.

유사한 헤더로 Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등이 있습니다. Request랑 Allow에서 Method 단수 복수 주의하자!

 

CORS 요청 시에는 미리 OPTIONS 주소로 서버가 CORS를 허용하는지 물어본다. 이때 Access-Control-Request-Method로 실제로 보내고자 하는 메서드를 알리고, Access-Control-Request-Headers로 실제로 보내고자 하는 헤더들을 알린다. Allow 친구들은 Request에 대응되는 애들로, 서버가 허용하는 메서드와 헤더를 응답하는 데 사용된다. Request랑 Allow가 일치하면 CORS 요청이 이루어지는 것이다.

Allow

Allow 헤더는 Access-Control-Allow-Methods랑 비슷하지만, CORS 요청 외에도 적용된다는 데에 차이가 있다.

즉 GET www.naver.com 은 되고, POST www.naver.com 은 허용하지 않는 경우, 405 Method Not Allowed 에러를 응답하면서 헤더로

Allow: GET

를 같이 보내면 된다. GET 요청만 받겠다는 뜻이다.

Content-Disposition

응답 본문을 브라우저가 어떻게 표시해야 할지 알려주는 헤더다. inline인 경우 웹페이지 화면에 표시되고, attachment인 경우 다운로드된다.

Content-Disposition: inline
Content-Disposition: attachment; filename='filename.csv'

다운로드되길 원하는 파일은 attachment로 값을 설정하고, filename 옵션으로 파일명까지 지정해줄 수 있다.

파일용 서버인 경우 이 태그를 자주 사용하게 될 것이다.

Location

300번대 응답이나 201 Created 응답일 때 어느 페이지로 이동할지를 알려주는 헤더이다.

HTTP/1.1 302 Found
Location: /

이런 응답이 왔다면 브라우저는 / 주소로 리다이렉트 한다.

Content-Security-Policy

다른 외부 파일들을 불러오는 경우, 차단할 소스와 불러올 소스를 여기에 명시할 수 있다. 하나의 웹 페이지는 다양한 외부 소스들을 불러온다. 이미지도 불러오고 script 태그로 자바스크립트 파일들도 불러온다. 폰트나 스타일, 아이프레임도 불러온다. 하지만 해커들에 의해 원하지 않는 파일을 불러오게 될 수도 있다. XSS 공격 같은 것이 하나의 예시다. 이럴 때 Content-Security-Policy로 허용할 외부 소스만 지정할 수 있다.

Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src https:
Content-Security-Policy: default-src 'none'

self로 지정하면 자신의 도메인의 파일들만 가져올 수 있다. www.google.com에서는 www.google.com/logo.jpg를 가져올 수 있지만, www.never.com/logo.jpg는 못 가져오는 것이다. https:로 지정하면 https를 통해서만 파일을 가져올 수 있게 된다. 'none'으로 지정하면 가져올 수 없다.

default-src는 모든 외부 소스에 대해 적용되는 것이고 각각 따로 지정할 수도 있다. 두 개나 세 개 정도만 추려서 지정할 수도 있다.

Content-Security-Policy: font-src 'self'; script-src https://www.naver.com 'unsafe-inline'; img-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'

font-src, script-src, img-src, style-src, object-src 등이 있고, 소스 옵션으로는 도메인이나, https:, 'unsafe-inline'(인라인 태그 허용), 'unsafe-eval'(eval 함수 허용) 등이 있다. 옵션들이 매우 많으므로 자세한 내용은 여기 서 참고하자!

이 외에도 다양한 응답 헤더들이 있으나, 자주 보이는 것만 추려보았다.

 

3 - 6) body

 

  바디에는 실제 데이터가 담기게 된다.

  그냥 데이터가 담기므로 크게 신경 쓸 부분은 아닌 거 같다.

 

참고 : www.zerocho.com/category/HTTP/post/5b4c4e3efc5052001b4f519b, www.zerocho.com/category/HTTP/post/5b3ba2d0b3dabd001b53b9db,

developer.mozilla.org/ko/docs/Web/HTTP/Messages,

developer.mozilla.org/ko/docs/Web/HTTP/Headers