HTTP 헤더에 대해 공부하던 중, 헤더에 많은 속성들이 존재하는 것을 알게 되었다. 웹개발자라면 요청하고 응답받는 '데이터'의 형식이 구체화 되어 있는 '헤더'에 대해 조금 자세하게 정리할 필요가 있을 것 같았다.
HTTP 메시지
클라이언트와 서버가 요청과 응답으로 데이터를 교환할 때, HTTP 메시지를 주고 받는다. 클라이언트가 서버로 요청할 때 보내는 메시지에는 '서버가 어떤 것을 해줬으면 좋겠다'라는 내용이 구체화 되어있고, 서버가 응답할 때, 클라이언트로 보내는 메시지에는 요청의 처리에 대한 성공 여부와 성공했을 시 응답보내는 데이터에 대한 내용이 구체화 되어있다.
HTTP 메시지는 헤더와 본문(body)으로 구성되어 있다. 이 중, 헤더에 대해 정리하려고 한다.
// 요청헤더 예시
GET /hello/other/top-20-mysql-best-practices/ HTTP/1.1
Host: net.tutsplus.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,
Accept-Language: ko,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: token=ejaflkaadsfase
Pragma: no-cache
Cache-Control: no-cache
요청헤더
Host : 서버의 도메인 이름을 나타내는 부분이다(포트 포함). 호스트헤더는 반드시 하나가 존재해야 한다. 클라이언트의 요청이 특정 서버 IP로 보내지기는 하지만 도메인 주소까지 명시해야 서버는 클라이언트가 어떤 서버에 요청을 했는지 정확히 알 수 있다.
UserAgent : Host보다 더 유명한 헤더로써, 브라우저 이름과 버전, OS 이름과 버전, Default Language로 구성되어 있다. 그렇지만 UserAgent를 100% 믿으면 안된다. 수정해서 보내줄 수 있기 때문이다. 보통 이 헤더를 사용해서 접속자 통계를 추출한다.
위 UserAgent에 명시된 gecko란? 웹브라우저 를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크
Accept : 이 헤더는 서버에 요청을 보낼때 어떤 타입의 데이터를 보내달라고 명시해줄때 사용한다.예를 들어 요청의 헤더로 Accept: text/html를 보내면 HTML 형식인 응답을 처리하겠다는 뜻이다.
Accept: image/png, image/gif : 콤마로 여러 타입을 동시에 적어줄 수도 있고,
Accept: text/* : *(와일드카드)로 "텍스트이기만 하면 돼"라고 적어줄 수도 있습니다.
Accept는 다음과 같이 Accept-Encoding, Accept-Charset, Accept-Language 등 여러 종류로 구성되어 있다. 이는 공통 헤더의 Content 시리즈와 대응되는데. Accept로 원하는 형식을 보내면, 서버는 그에 맞춰 보내주면서 응답에 맞게 Content를 설정한다.
Accept-Encoding : 현재 대부분의 브라우저는 gzip이란 압축프로그램을 지원한다. 무엇을 압축하냐? 서버로부터 응답온 데이터의 크기(용량)를 최대 80%까지 압축해서 보낸다.
Accept-Language : 유저의 기본 언어 설정을 표시한 헤더
Cookie : name=value 형식으로 구성되어 있으며, 인증수단으로 사용되거나 HTTP의 connectionless한 특성의 단점을 보완해주는 도구이다. 이 쿠키가 요청 헤더에 명시된다면 서버에서 이를 확인할 수 있다.
Cache-Control : 캐시 여부에 관한 헤더. (후에 자세히 다뤄야 할 부분), 응답헤더에도 설정된다. 문서링크
cache는 서버 성능에 큰 영향을 미치는 중요한 라이브러리
Authorization ⇒ 이 헤더는 인증토큰을 서버로 보낼 때 사용하는 헤더이다. 보통 로그인 요청을 할 때, 인증수단으로 토큰(JWT)을 사용할 때, 이 헤더를 사용해서 서버로 보낼 수 있다.
Origin ⇒ 요청이 시작된 주소. 여기서 요청을 보내는 주소와 받는 주소가 다르면 CORS에러가 발생한다.
응답헤더
Access-Control-Allow-Origin ⇒ 프론트엔드 개발자에게 악명높은 헤더라고 한다. 클라이언트쪽 origin주소와 Host주소를 비교했을 때, 프로토콜, 서브도메인, 도메인, 포트 중 하나만 달라도 CORS에러가 난다. 만약 서버쪽에서 주소를 일일이 주소를 정해주기 싫다면 와일드카드(*)를 쓰면 되는데 그만큼 보안이 취약해진다. 여기 CORS에 대한 부분은 다음 글에서 정리한다.
유사한 헤더로 Access-Control-Request-Method(OPTIONS 요청시), Access-Control-Request-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등이 있다. Request랑 Allow에서 Method, Header의 단수 복수에 주의해야 한다.
Content-type : 컨텐츠 타입(MIME)과 문자열 인코딩(utf-8)을 명시할 수 있다. 요청 헤더의 Accept헤더, Accept-Charset헤더 와 대응된다.
ex) text/html; charset=utf-8
Content-Length : 요청과 응답 메세지의 본문 크기를 바이트 단위로 표시해준다.
Content-Security-Policy ⇒ 다른 외부 파일을 불러오는 경우, 차단할 소스와 불러올 소스를 설정할 수 있다.
ex)
Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src https:
Content-Security-Policy: default-src 'none'
self로 지정하면 자신의 도메인에서만 파일을 불러올 수 있다. https로 설정하면 https에서만, none이면 아예 불러올 수 없다.
(위 Access에 대한 설명은 zerocho사이트에서 개념에 대해 정의해 놓은 것을 거의 복붙한 것이다)
etag : HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자이다. MDN문서를 봐도 이해하기가 쉽지않다. 문서링크
일단 내용을 복붙해본다.
ETag HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자입니다. 웹 서버가 내용을 확인하고 변하지 않았으면, 웹 서버로 full 요청을 보내지 않기 때문에, 캐쉬가 더 효율적이게 되고, 대역폭도 아낄 수 있습니다. 허나, 만약 내용이 변경되었다면, "mid-air collisions" 이라는 리소스 간의 동시 다발적 수정 및 덮어쓰기 현상을 막는데 유용하게 사용됩니다.
만약 특정 URL 의 리소스가 변경된다면, 새로운 ETag 가 생성됩니다. ETag 는 지문과 같은 역할을 하면서 다른 서버들이 추적하는 용도에 이용되기도 합니다. ETag 를 비교하여 리소스가 서로 같은지의 여부를 빠르게 판단할 수 있지만, 서버에서 무기한으로 지속될 수 있도록 설정할 수도 있습니다.
출저 : MDN
여러 자료들을 찾아보고 종합해 봤을 때, etag라는 개념은 캐시된 데이터가 아직 유효한지 확인하기 위한 메커니즘을 의미한다고 한다라고 정의할 수 있다.
Vary : 이 헤더는 캐시된 응답을 향후 요청들에서 오리진 서버로 새로운 요청 헤더를 요청하는 대신 사용할 수 있는지 여부를 결정합니다. 이것도 무슨말인지 잘 모르겠다. cache에 대한 확실한 개념정리가 필요하다!!
Date : http 메세지가 만들어진 시각(자동생성)
참고링크
developer.mozilla.org/ko/docs/Web/HTTP/Messages
code.tutsplus.com/tutorials/http-headers-for-dummies--net-8039
'기술들 > Today I Learned' 카테고리의 다른 글
Node.js architecture 정리 (0) | 2020.12.01 |
---|---|
CORS 정책 정리 (0) | 2020.11.23 |
HTTP 기초 정리 (0) | 2020.11.20 |
비동기, 동기 정리 (feat. callback, promise, async/await) (0) | 2020.11.17 |
[Today I Learned] 11월 5일(목) - solo day (0) | 2020.11.05 |