[보안] : CORS ?

 

CORS ? 

Cross-Origin Resource Sharing(교차 출처 리소스 공유) 의 앞철자를 따서 만든 용어이며,

웹 브라우저에서 현재 실행중인 JS가 어떠한 출처에서(origin) 불러온 웹 페이지가 다른 출처에서 불러들이는 리소스에 접근하려고 할 때 발생하는 보안 정책이다.

만약 서버가 허락을 한다면, 브라우저에서는 요청을 허락하고 서버에서 동의를 하지 않는다면, 브라우저에서는 거절을 한다.

이러한 허락/거절을 구하는 메커니즘이 HTTP-Header 를 이용하여 가능한것인데, 이를 CORS 라고 부른다.

따라서 브라우저에서 Cross-Origin 요청을 안전하게 할 수 있도록 하는 매커니즘이라 생각하면 된다.

 

Cross-Origin ?

다음 중 한가지라도 다른 부분이 있다면 그것을 Cross-Origin 이라고 말한다.

• 프로토콜 - http / https
• 도메인 - example.com / another-example.com
• 포트 번호 - 3306 / 8803

이런 식으로 호출하는 두 출처의 프로토콜, 도메인, 포트번호 자체가 서로 하나라도 일치하지 않는다면 그것을 Cross-Origin 이다.

 

CORS의 필요성 ?

만약 CORS 보안 정책이 존재하지 않는다면 ?

CORS 정책이 없다면, 다른 사이트에서 기존의 사이트를 그대로 모방자체가 가능하다.

따라서, 기존 사용자가 모방사이트에서 로그인하게 만든다면 그 기록을 가지고 유저 개개인의 정보에 접근이 가능하고 악용이 가능하다는 뜻이다.

그렇기 때문에 서로 필요에 의해서만 서버의 허락을 구하고 요청할 수 있도록 보안방지정책으로써 필요성을 가진다.

 

CORS의 동작 방식

 

1. 간단 요청(Simple Request)인 경우

1. 서버로 요청을 보냄.

2. 서버의 응답이 왔을 때, 브라우저가 요청한 Origin 과 응답한 헤더의(Access-Control-Request-Headers)의 값을 비교하여
그것이 유효한 요청이라면, 리소스를 응답한다.
만약, 유효하지 않은 요청이라면 브라우저에서는 이를 막고 error를 반환한다.

 

Simple Request ?

HTTP 메서드가 GET / POST / HEAD 중 하나이고,

자동으로 설정되는 헤더는 제외하고, Accept / Accept-Language / Content-Language 이 세가지의 헤더들만 변경하고,

Content-Type 이 다음과 같은 경우

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

위와 같은 경우를 Simple Request 라고 부른다.

흔히 우리가 fetch('경로', {method : 'POST', headers : {Content-Type : 'application/json'}, body : {title}})

사용하는 이런 fetch 같은 경우가 이에 해당한다.

이 요청은 따로 확인과정을 거치지 않고 바로 본 요청을 보낸다.

 

2. Preflight 요청일 경우

• Origin헤더에 현재 요청하는 origin과, Access-Control-Request-Method헤더에 요청하는 HTTP method와 Access-Control-Request-Headers요청 시 사용할 헤더를 OPTIONS 메서드로 서버로 요청합니다. 이때 내용물은 없이 헤더만 전송합니다.
• 브라우저가 서버에서 응답한 헤더를 보고 유효한 요청인지 확인합니다. 만약 유효하지 않은 요청이라면 요청은 중단되고 에러가 발생합니다. 만약 유효한 요청이라면 원래 요청으로 보내려던 요청을 다시 요청하여 리소스를 응답받습니다.

 

preflight 요청이란?

Simple requests가 아닌 cross-origin요청은 모두 preflight 요청을 하게 되는데, 실제 요청을 보내는 것이 안전한지 확인하기 위해 먼저 OPTIONS 메서드를 사용하여 cross-origin HTTP 요청을 보냅니다. 이렇게 하는 이유는 사용자 데이터에 영향을 미칠 수 있는 요청이므로 사전에 확인 후 본 요청을 보냅니다.

 

요청 헤더 목록

1. Origin

2. Access-Control-Request-Method
preflight 요청을 할 때 실제 요청에서 어떤 메서드를 사용할 것인지 서버에게 알리기 위해 사용됩니다.

3. Access-Control-Request-Headers
preflight요청을 할 때 실제 요청에서 어떤 header를 사용할 것인지 서버에게 알리기 위해 사용됩니다.

 

응답 헤더 목록

1. Access-Control-Allow-Origin
브라우저가 해당 origin이 자원에 접근할 수 있도록 허용합니다. 혹은 *은 credentials이 없는 요청에 한해서 모든 origin에서 접근이 가능하도록 허용합니다.

2. Access-Control-Expose-Headers
브라우저가 액세스할 수 있는 서버 화이트리스트 헤더를 허용합니다.

3. Access-Control-Max-Age
얼마나 오랫동안 preflight요청이 캐싱 될 수 있는지를 나타낸다.

4. Access-Control-Allow-Credentials
Credentials가 true 일 때 요청에 대한 응답이 노출될 수 있는지를 나타냅니다.

preflight요청에 대한 응답의 일부로 사용되는 경우 실제 자격 증명을 사용하여 실제 요청을 수행할 수 있는지를 나타냅니다.

간단한 GET 요청은 preflight되지 않으므로 자격 증명이 있는 리소스를 요청하면 헤더가 리소스와 함께 반환되지 않으면 브라우저에서 응답을 무시하고 웹 콘텐츠로 반환하지 않습니다.

5. Access-Control-Allow-Methods
preflight`요청에 대한 대한 응답으로 허용되는 메서드들을 나타냅니다.

6. Access-Control-Allow-Headers
preflight요청에 대한 대한 응답으로 실제 요청 시 사용할 수 있는 HTTP 헤더를 나타냅니다.

 

#headers #CORS #simple_request #preflight #content_type #application_json