[CS] - CORS

CORS(Cross-Origin Resource Sharing)란?

교차 출처 리소스 공유로써 브라우저에서는 보안상의 문제로 cross-origin HTTP 요청들을 제한합니다.

해당 요청은 서버의 동의가 필요한데, 이는 HTTP-header를 통해서 서버에게 동의를 구하는데, 이를 CORS라고 합니다.

그래서 브라우저는 cross-origin 요청을 안전하게 할 수 있도록 하는 메커니즘입니다.

 

 

cross-origin

cross-origin이란 다음 중 한가지라도 다른 경우를 말합니다

1. 프로토콜 - [EX] https, http는 프로토콜이 다르다 ( SSL 차이 )

2. 도메인 - [EX] domain.com과 other-domain.comdms ekfmek

3. 포트 번호 - [EX] 8080이랑, 3000은 다르다

-> 3가지가 같으면 동일 출처 ( Origin ) 이라고 한다

 

CORS는 왜 필요한가?

CORS 없이 모든 곳에서 데이터를 요청할 수 있게 된다면, 다른 사이트가 원래 사이트의 출처를 흉내낸다.

그렇게 되면 사용자의 세션을 탈취 하는등 악의적으로 정보 추출같은 공격을 당할 수 있다.

결국 브라우저에서 이러한 공격을 보호하고, 필요한 경우에만 서버와 합의하여 요청할 수 있다.

 

CORS는 언제 사용하나?

[1] 단순 요청(SImple Request)인 경우

1. 서버로 요청을 한다

2. 서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 유효한 요청이라면 리소스를 응답한다. 만약 유효하지 않으면 브라우저에서 이를 막고 에러 발생

 

Simple Request란

- HTTP method가 [ GET / POST / HEAD ] 중 하나

- 자동으로 설정되는 헤더는 제외하고,설정할 수 있는 헤더 [ Accept, Accept-Language, Content-Language ]만 변경

- Content-Type이 [ application/x-www-form-unlencoded, multipart/form-data, text/plain ]인 경우

 

=> simple request은 추가적으로 확인하지 않고 바로 본 요청을 보낸다

 

통신 과정을 생각해보면,

브라우저는 다른 출처에 자신의 주소를 origin에 담아서 요청을 보낸다

서버는 요청을 확인하고 다른 출처에 접근이 가능하다는 Access-Control-Allow-Origin에 해당 주소를 담아서 결과를 리턴한다

특히, Access-Control-Allow-Origin는 CORS 헤더의 중요 요소  중 하나로 어떤 요청을 허용할지 경정한다. [ "*" 도 가능 ]

 

[2] preflight인 경우

1. Origin 헤더에 현재 요청하는 origin과 Access-Control-Request-Method 헤더에 요청하는 HTTP method와 Access-Control-Request-Headers 요청 시 사용할 헤더를 OPTIONS 메서드로 서버를 요청한다. [ 이때 내용물 없이 헤더만 전송! ]

2. 브라우저가 서버에서 응답한 헤더를 보고 유효한 요청인 확인하고, 유효하면 원래 요청을 보내려던 요청을 다시 보내 리소스 응답받는다!

 

preflight 요청이란

Simple Request가 아니 cross-origin 요청은 모둔 preflight 요청을 하며, 실제 요청이 안전한지 먼저 OPTIONS 메서드를 사용해 cross-origin HTTP 요청을 보내는것을 말한다

 

요청 헤더 목록

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

응답 헤더 목록

• Access-Control-Allow-Origin
  • 브라우저가 해당 origin이 자원에 접근할 수 있도록 허용합니다. 혹은 *은 credentials이 없는 요청에 한해서 모든 origin에서 접근이 가능하도록 허용합니다.
• Access-Control-Expose-Headers
  • 브라우저가 액세스할 수 있는 서버 화이트리스트 헤더를 허용합니다.
• Access-Control-Max-Age
  • 얼마나 오랫동안 preflight요청이 캐싱 될 수 있는지를 나타낸다.
• Access-Control-Allow-Credentials
  • Credentials가 true 일 때 요청에 대한 응답이 노출될 수 있는지를 나타냅니다.
  • preflight요청에 대한 응답의 일부로 사용되는 경우 실제 자격 증명을 사용하여 실제 요청을 수행할 수 있는지를 나타냅니다.
  • 간단한 GET 요청은 preflight되지 않으므로 자격 증명이 있는 리소스를 요청하면 헤더가 리소스와 함께 반환되지 않으면 브라우저에서 응답을 무시하고 웹 콘텐츠로 반환하지 않습니다.
• Access-Control-Allow-Methods
  • preflight`요청에 대한 대한 응답으로 허용되는 메서드들을 나타냅니다.
• Access-Control-Allow-Headers
  • preflight요청에 대한 대한 응답으로 실제 요청 시 사용할 수 있는 HTTP 헤더를 나타냅니다.

 

[3] 신용 요청 ( Credentialed Rrequest )

신용 요청은 쿠키, 인증 헤더, TLS 클라이언트 인증서 등의 신용정보와 함께 요청한다.

기본적으로, CORS 정책은 다른 출처 요청에 인증정보 포함을 허용하지 않습니다.

요청에 인증을 포함하는 플래그가 있거나 access-control-allow-credentials가 true로 설정 한다면 요청할 수 있습니다. 

 

 

https://hannut91.github.io/blogs/infra/cors