공통 헤더

Date

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

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

Connection

HTTP/2를 사용하지 않는다면 보통 HTTP/1.1을 사용하게 되는데요.

Connection은 기본적으로 keep-alive로 되어있는데 사실상 아무런 의미도 없습니다. HTTP/2에서는 아예 사라져버렸습니다.

Connection: keep-alive

Cache-Control

일반 헤더 필드는 요청과 응답 내의 캐싱 메커니즘을 위한 디렉티브를 정하기 위해 사용됩니다.

캐싱 디렉티브는 단방향성이며, 이는 요청 내에 주어진 디렉티브가 응답 내에 주어진 디렉티브와 동일하다는 것을 뜻하지는 않는다는 것을 의미합니다.

Cache-control: no-cache

Content-Length

요청과 응답 메시지의 본문 크기를 바이트 단위로 표시해줍니다. 메시지 크기에 따라 자동으로 만들어집니다.

Content-Length: 52

Content-Language

사용자의 언어를 뜻합니다. 요청이나 응답이 무슨 언어인지와는 관련 없습니다.

예를 들어 한국 사람한테 일본어를 가르치는 사이트일 경우, 페이지 언어는 일본어더라도 Content-Language는 ko-KR일 수 있습니다.

Content-Language: de-DE, en-CA

Content-Type

컨텐츠의 타입(MIME)과 문자열 인코딩(utf-8 등등)을 명시할 수 있습니다.

조금 뒤에 나오는 Accept 헤더, Accept-Charset 헤더와 대응됩니다.

아래 예시로 든 헤더는 현재 메시지 내용이 text/html 타입이고 문자열은 utf-8 문자열임을 알려줍니다.

프런트엔드에서 서버로 데이터를 보낼 때는 text/html 이런 것 대신 www-url-form-encoded나 multipart/form-data같은 게 Content-Type이 됩니다.

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

Content-Encoding

Content-Encoding은 컨텐츠 압축된 방식입니다.

응답 컨텐츠를 br, gzip, deflate 등의 알고리즘으로 압축해서 보내면, 브라우저가 알아서 해제해서 사용합니다.

이 외에도 다양한 압축 알고리즘이 존재합니다.

컨텐츠 용량이 줄어들기 때문에 압축을 권장합니다.

요청이나 응답 전송 속도도 빨라지고, 데이터 소모량도 줄어들기 때문에 가능하면 압축해두세요.

Content-Encoding: gzip, deflate

요청 헤더

Host

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

Host 헤더는 반드시 하나가 존재해야 합니다

Host: www.zerocho.com

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 시리즈를 알아봅시다. Accept 헤더는 요청을 보낼 때 서버에 이런 타입(MIME)의 데이터를 보내줬으면 좋겠다고 명시할 때 사용합니다.

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

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

Authorization

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

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

Authorization: Bearer XXXXXXXXXXXXX

Origin

POST같은 요청을 보낼 때, 요청이 어느 주소에서 시작되었는지를 나타냅니다.

여기서 요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 합니다.

Referer

이 페이지 이전의 페이지 주소가 담겨 있습니다.

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

Referer은 오타입니다.

Referrer가 표준어인데 실수로 Referer로 만들었으며, 하위 호환성 때문에 수정하지 못하고 있습니다.

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

응답 헤더

Access-Control-Allow-Origin

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

이 때 서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에 프론트 주소를 적어주어야 에러가 나지 않습니다.

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

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.zerocho.com은 되고, POST www.zerocho.com은 허용하지 않는 경우, 405 Method Not Allowed 에러를 응답합니다.

Allow: GET

Content-Disposition

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

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

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'
  • No labels