CORS(Cross-Origin-Resource Sharing)란?

26번째 포스팅하게 될 내용은 CORS에 대한 내용입니다.

 

[ URL 구조 ]

 

 

[ Origin ]

• 출처란 Protocol, Host, Port를 합친 것
• 브라우저 개발자 도구의 콘솔 창에 location.origin를 실행하면 출처를 확인할 수 있음
• Protocol, Host, Port를 확인하여 출처가 같은지 다른지 확인할 수 있음

 

 

[ CORS ]

• Cross-Origin Resource Sharing의 약자
• 브라우저에서 다른 출처의 리소스를 공유하는 방법
• 추가HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는    권한을 부여하도록 브라우저에 알려주는 체제

 

 

[ CORS 동작과정 ]

• 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달

Origin: http://localhost:3000

• 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달

Access-Control-Allow-Origin: http://localhost:3000

• 클라이언트에서 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교
  • 두 개를 비교하여 차단할지 말지를 결정함

 

 

[ CORS 작동방식 ]

Simple Request

• 단순 요청은 서버에 API를 요청하고, 서버는 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보냄
• 브라우저는 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단
•  

Simple Request 조건

• 요청의 메소드는 GET, HEAD, POST 중 하나여야 함
• Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안됨
• 만약 Content-Type를 사용하는 경우에는 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용됨

 

 

Preflight Request

• 서버에 예비 요청을 보내서 안전한지 판단한 후 본 요청을 보내는 방법
• 브라우저는 요청을 한번에 보내지 않고 예비 요청과 본 요청으로 나누어서 서버로 전송
• 브라우저가 본 요청을 보내기 전에 보내는 예비 요청을 Preflight라고 부르는 것이며, 이 예비 요청에는 HTTP 메소드 중 OPTIONS 메소드가 사용
• 예비 요청의 역할은 본 요청을 보내기 전에 브라우저 스스로 이 요청을 보내는 것이 안전한지 확인하는 것

 

 

Credentialed Request

• CORS의 기본적인 방식이라기 보다는 다른 출처 간 통신에서 좀 더 보안을 강화하고 싶을 때 사용하는 방법
• 기본적으로 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않음
• 이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션
• 이 옵션에는 총 3가지의 값을 사용할 수 있음
  • same-origin: 기본 값으로, 같은 출처 간에 쿠키 등의 인증 정보 전달이 가능
  • include: 출처에 상관없이 모든 요청에 쿠키 등의 인증 정보를 전달할 수 있음 
  • omit: 쿠키 등의 인증 정보를 전달하지 않음