Web - CORS (Cross Origin Resource Sharing)

CORS (Cross Origin Resource Sharing) 란?

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

 

쉽게 말하자면, 흥부네가 놀부네에 가서 밥을 얻을 수 있는 권한을 얻는 것이다.

 

예) https://domain-a.com 의 프론트 엔드 자바스크립트 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json 을 요청하는 경우.

 

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다 (웹 서버에서 요청을 제한하는 것이 아니라 브라우저에서 제한한다!!). 예를 들어서, XMLHttpRequest와 Fetch API는 SOP (동일 출처 정책, Same-Origin Policy) 을 따른다. 즉 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

 

 

즉, 만약 우리가 다른 출처로 리소스를 요청한다면 SOP 정책을 위반한 것이 되고, 거기다가 SOP의 예외 조항인 CORS 정책까지 지키지 않는다면, 아예 다른 출처의 리소스를 사용할 수 없게 되는 것이다.

서버는 CORS를 위반했는지 신경쓰지 않는다. 그러나 응답의 파기 여부는 브라우저가 결정한다.

CORS를 사용하는 요청

교차 출처 공유 표준에 따르면 다음과 같은 경우들에 한하여 사이트간 HTTP 요청을 허용한다.

 

• XMLHttpRequest와 Fetch API 호출
• 웹 폰트 (CSS 내 @font-face 에서 교차 도메인 폰트 사용 시)
• WebGL 텍스쳐
• drawImage() 를 사용해 캔버스에 그린 이미지/비디오 프레임
• 이미지로부터 추출하는 CSS Shapes

CORS 동작법

서로 다른 출처를 가진 리소스를 안전하게 사용하는 법을 알아보자. 기본적으로 웹 클라이언트 어플리케이션이 다른 출처의 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 보내게 되는데, 이 때 브라우저는 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 함께 담아 보낸다.

 

예) Origin: https://lgphone.tistory.com

 

이후, 서버가 이 요청에 대한 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin이라는 값에 "이 리소스를 접근하는 것이 허용된 출처"를 내려주고. 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 이 응답이 유효한 응답인지 아닌지를 결정한다.

 

CORS가 동작하는 방식은 세 가지의 시나리오에 따라 변경된다. 따라서 어떤 시나리오에 해당되는지 잘 파악한다면 CORS 정책 위반으로 인한 에러를 고치는 것이 더 쉬워질 것이다. 이와 관련된 시나리오들과 동작 방식은 아래 글을 참고한다.

https://evan-moon.github.io/2020/05/21/about-cors/#cors%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%82%98%EC%9A%94

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

출처

https://github.com/WeareSoft/tech-interview/blob/master/contents/network.md#%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

https://evan-moon.github.io/2020/05/21/about-cors/