CORS(Cross Origin Resource Sharing) 란?

🎀 CORS (Cross Origin Resource Sharing)

브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한합니다. 하지만 SOP에 대한 예외 조항을 두고, 이 예외 조항을 지킨 리소스 요청에 대해서는 출처가 다르더라도 허용하기로 했습니다. 이 예외 조항을 CORS 정책이라고 합니다.

 

SOP (Same Origin Pollicy)

같은 출처에서만 리소스를 공유할 수 있다.

 

 

cross-origin

프로토콜, 도메인, 포트 번호 중 하나라도 다른 경우를 의미합니다.

• 프로토콜: http와 https는 프로토콜이 다릅니다.
• 도메인: naver.com과 google.com은 다른 도메인입니다.
• 포트 번호: 8080 포트와 3000 포트는 다릅니다.

 

🎀 CORS는 왜 필요한가?

출처가 다른 두 개의 어플리케이션이 마음대로 소통하는 환경은 위험한 환경입니다. 웹에서 돌아가는 클라이언트 애플리케이션은 사용자 공격에 매우 취약합니다. 개발자 도구만 열더라도 DOM, Javascript 코드 등 각종 통신 정보를 쉽게 열람할 수 있는데요, 이를 통해 사용자가 악의를 가지고 다른 사이트로 본 사이트를 똑같이 모방할 수 있습니다. 이렇게 다른 출처의 어플리케이션이 통신하는 것에 제약이 없다면 기존 사이트와 동일하게 동작하는 것이 가능하여 사용자의 정보가 탈취되기 쉬워집니다.

 

 

🎀 CORS가 동작하는 원리

• origin에 대해 비교하는 로직은 브라우저가 수행하는 것!
• 브라우저는 HTTP 요청을 보낼 때, 요청 헤더에 Origin 필드에 요청을 보내는 출처를 담아서 보낸다.
• 이 후 서버가 이 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin이라는 값에 리소스 접근이 허용된 출처를 내려준다.
• 응답을 받은 브라우저는 자신이 보낸 Origin과 서버가 보내준 응답인 Access-Control-Allow-Origin을 비교하여 유효한 응답인지 확인한다.
• 만약 유효하지 않으면 그 응답을 사용하지 않는다.

CORS는 세 가지 시나리오에 따라 변경된다.

 

Preflight Request

브라우저는 요청을 한 번에 보내지 않고 예비 요청과 본 요청으로 나누어서 서버로 전송한다.

본 요청을 보내기 전에 보내는 예비 요청을 Preflight라고 하며, 예비 요청에는 OPTIONS 메소드가 사용된다.

• 브라우저가 서버에 예비 요청을 보내면 서버는 예비 요청의 응답으로 어떤 것을 허용하고, 어떤 것을 금지하고 있는지에 대한 정보를 응답 헤더에 담아서 보내준다.
• 이후 브라우저는 자신이 보낸 예비 요청과 서버가 응답에 담아준 정책을 비교하여 안전하다고 판단하면 같은 엔드포인트로 본 요청을 보내게 된다.

 

Simple Request

단순 요청은 예비 요청을 보내지 않고 서버에 본 요청을 보낸 후, 서버가 응답 헤더에 Access-Control-Allow-Origin과 같은 값을 보내면 그 때 브라우저가 CORS 정책 위반 여부를 검사하는 방식입니다.

 

 

Credentialed Request

인증된 요청을 사용하는 방법으로 CORS의 기본적인 방식보다 다른 출처 간 통신에서 보안을 더 강화하고 싶을 때 사용하는 방법입니다.

 

XMLHttpRequest나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 요청에 담지 않습니다.

이 때 인증과 관련한 정보를 담을 수 있게 해주는 옵션이 credentials 옵션입니다.

 

same-origin이나 include과 같은 옵션을 사용하여 리소스 요청에 인증 정보가 포함되면, 브라우저는 Cross-origin 리소스를 요청할 때 단순히 Access-control-Allow-Origin 만 확인하는 것이 아니라 조금 더 빡빡하게 검사를 하게 됩니다.

 

 

🎀 CORS 해결하기

• 서버에서 Access-Controll-Allow-Origin 헤더에 알맞은 값 세팅하기
• 프론트에서 프록시 설정하기

 

 

🎀 References

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

CORS란 무엇인가? – Yunseok's Dev Blog

https://hymndev.tistory.com/78

CORS란 무엇인가?

https://biio-studying.tistory.com/238

CORS에러 해결 방법 : CRA에서 Proxy 설정하기