[블로깅 챌린지2] HTTP MDN

HTTP

HyperText Transfer Protocol 로 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜(OSI 계층 중 하나)이다. 웹 브라우저와 웹 서버간의 통신을 위해 설계되었고, 클라이언트가 요청을 하기 위해 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델을 따른다.

* OSI 계층

• 개방형 시스템 상호 연결 모델의 표준으로 실제 인터넷에서 사용되는 TCP/IP는 OSI 참조 모델을 기반으로 상업적이고 실무적으로 이용될 수 있도록 단순화
• 초기 여러 정보 통신 업체 장비들은 호환성이 없었지만 OSI 7계층을 통해 모든 시스템들의 상호연결에 있어 문제없도록 표준(호환성)을 정함

• OSI 7 계층은 응용, 표현, 세션, 전송, 네트워크, 데이터링크, 물리계층으로 나뉨
• 전송 시 7계층에서 1계층으로 각각의 층마다 인식할 수 있어야 하는 헤더를 붙임(캡슐화)
• 수신 시 1계층에서 7계층으로 헤더를 떼어냄(디캡슐화)

계층	특징
물리 계층 Physical Layer	7계층 중 최하위 계층으로 전기적, 기계적, 기능적인 특성을 이용해 데이터(0과 1 비트열) 전송 (케이블, 허브)
데이터링크 계층 Data-Link Layer	물리적인 연결을 통하여 인접한 두 장치 간의 신뢰성 있는 정보 전송을 담당 (브리지, 스위치)
네트워크 계층 Network Layer	라우터 기능을 맡고 있는 계층으로 최적의 경로를 설정하여 데이터를 보내는 기능 (라우터 , L3 스위치)
전송 계층 Trasnport Layer	종단 간 신쇠성있고 정확한 전송을 담당 (TCP/UDP)
세션 계층 Session Layer	통신 장치 간 상호작용 및 동기화 제공
표현 계층 Presentation Layer	데이터를 어떻게 표현할지 정하는 역할
응용 계층 Application Layer	사용자와 가장 밀접한 계층으로 인터페이스 역할을 하며 응용 프로세스 간의 정보 교환 담당

CORS

추가 HTTP 헤더를 사용하여 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

서버 데이터에 부수효과(Side Effect)를 일으킬 수 있는 HTTP 요청메서드 (GET 을 제외한 HTTP 메서드)에 대해, CORS 명세는 브라우저가 요청을 OPTIONS 메서드로 프리플라이트(preflight, 사전전달)하여 지원하는 메서드에 요청을 하고, 서버의 허가가 떨어지면 실제 요청을 보내도록 요구하고 있다. 또한 서버는 클라이언트에게 요청에 인증접로를 함께 보내야한다고 알려줄 수도 있다.

HTTP 요청 헤더

• Origin : 요청이 시작된 서버를 나타내는 URI로 경로가 아닌 서버이름만 포함한다. 접근 제어 요청에는 항상 이 헤더가 전송됨
• Access-Control-Request-Method : 실제 요청에서 어떤 HTTP 메서드를 사용할지 서버에게 알려주기 위해 preflight request 할 때 사용
• Access-Control-Request-Headers : 실제 요청에서 어떤 HTTP 헤더를 사용할지 서버에게 알려주기 위해, preflight request 할 때 사용

HTTP 응답 헤더

• Access-Control-Allow-Origin : 단일 출처를 지정하여 브라우저가 해당 출처가 리소스에 접근하도록 허용합니다. 또는 자격 증명이 없는 요청의 경우 * 와일드 카드로 브라우저의 origin에 상관없이 모든 리소스에 접근하도록 허용한다.
• Access-Control-Allow-Methods : 리소스에 접근할 때 허용되는 메서드 지정
• Access-Control-Allow-Headers : preflight request 에 대한 응답으로 사용, 실제 요청시 사용할 수 있는 HTTP 헤더
• Access-Control-Max-Age : preflight request 요청 결과를 캐시할 수 있는 시간
• Access-Control-Allow-Credentials : credentials 플래그가 true일 때 요청에 대한 응답을 표시할 수 있는지 나타냄. preflight request 에 대한 응답의 일부로 사용하는 경우 credentials 를 사용하여 실제요청을 수행할 수 있는지 나타냄. 그러나 simple request 는 preflighted 되지 않기 때문에 credentials 이 있는 리소스를 요청할 경우 이 헤더가 리소스와 함께 반환되지 않음.

예제1 - Simple request

https://foo.example 의 웹 컨텐츠가 https://nar.other 도메인의 컨텐츠를 호출하기 바라는 경우

const xhr = new XMLHttpRequest();
const url = 'https://bar.other/resources/public-data/';

xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

클라이언트와 서버 간에 간단한 통신을 하고, CORS 헤더를 사용하여 권한을 처리한다.

//request
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example

//response
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
[…XML Data…]

• 브라우저가 서버로 전송 : Origin:https://foo.example 로부터 요청이 옴.
• 서버가 응답 :Access-Control-Allow-Origin: * 헤더를 다시 전송하여 모든 도메인에서 접근가능함을 알림.

예제 2 - Preflight 요청

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://bar.other/resources/post-here/');
xhr.setRequestHeader('Ping-Other', 'pingpong');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = handler;
xhr.send('<person><name>Arun</name></person>');

• POST 요청과 함께 보낼 XML body 를 생성한다.
• Ping-Other 비표준 HTTP 요청 헤더가 설정되어 일반 웹 응용프로그램에 유용, Content-Type 은 application/xml 로 설정. 사용자 정의 헤더가 설정되어서 preflighted 처리된다.

//preflight request
OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

//preflight response
HTTP/1.1 204 No Content
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive

• OPTIONS 메서드를 사용하여 preflight 요청
• Access-Control-Request-Method: POST / Access-Control-Request-Headers: - : 실제 요청을 전송할 때 POST 메서드로 사용자 정의 헤더와 함께 전송된다는 것을 알림.
• 서버는 Access-Contorl-Allow-Origin, Access-Control-Allow-Methods , Access-Control-Allow-Headers , Access-Contorl-Max-Age 로 응답