CORS

🚀 CORS (Cross-Origin Resource Sharing : 교차 출처 리소스 공유) 란?

CORS 이전에 "동일 출처 정책" 을 알아야합니다.

동일 출처 정책이란 "추가 HTTP 헤더를 사용하여, 다른 출처의 리소스 접근권한에 제약을 거는 브라우저단의 보안 스펙" 입니다.

CORS는 이 보안 제약사항을해결하기 위해 W3C에서 개발한 사양입니다.

 

👻 교차 출처

브라우져는 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 동일 출처 정책에 의한 보안 정책이 실행됩니다.

교차 출처는 말 그대로 현재와 다른 출처를 말합니다. 그렇다면 출처를 어떻게 비교하는 걸까요?

출처는 도메인, 프로토콜, 포트를 합친 것을 의미합니다.

즉, 리소스가 앞서 언급한 출처(도메인, 프로토콜, 포트)와 다를 때 동일 출처 정책으로 인해 접근 제약이 발생합니다.

₩

 

 

👻 동일 출처 정책 프로세스

1. 브라우저가 Origin 헤더를 요청에 추가합니다. Origin 헤더는 Origin:https://www.example.appspot.com과 같이 서버에 리소스를 공유하기 위해 리소스 출처를 포함하고 있습니다.
2. 서버가 요청의 HTTP 메서드와 Origin 헤더의 값을 대상 CORS 구성에 있는 메서드 및 출처 정보와 비교하여 일치하는 항목이 있는지 확인합니다. 일치하는 항목이 있으면 Access-Control-Allow-Origin 헤더를 응답에 포함합니다. Access-Control-Allow-Origin 헤더는 초기 요청에 있는 Origin 헤더의 값을 포함합니다.
3. 브라우저가 응답을 받고 Access-Control-Allow-Origin 값이 원래 요청에 지정된 도메인과 일치하는지를 확인합니다. 일치하면 요청이 성공합니다. 일치하지 않거나 응답에 Access-Control-Allow-Origin 헤더가 없는 경우에는 요청이 실패합니다.

 

 

👻 CORS / 동일 출저 정책 해결하기

1. Access-Control-Allow-Origin 헤더 세팅
   서버에서 개발자가 임의로 Access-Control-Allow-Origin 헤더에 알맞은 값을 지정해 주는 것입니다.
   Node의 경우에는 아래와 같이 미들웨어를 통해서 손쉽게 세팅 가능합니다.
   

   app.use(cors({
     origin : '*', // 모든 요청 허용
     origin : true, // 들어오는 요청 도메인/포트가 자동으로 origin에 삽입된다.
     origin : 'www.domain.com', // 실 서비스에서는 실제 서비스 도메인을 넣어. 해당 도메인 요청만 허용한다.
    credentials : false, // 개발단계에서는 false, 실 서비스에서는 true
   })

2. 프록시 세팅
   주로 동일 출처 보안정책은 로컬에서 개발 진행시에 많이 발생하는 문제입니다. 
   그렇기에 서버를 조작하기보다는 프록시 세팅을 통해 해당 보안정책을 우회할 수 있습니다.
   Webpack-DevServer를 활용하시면 간단하게 구현하실 수 있습니다.

 

 

# Reference

Google Cloud : https://cloud.google.com/storage/docs/cross-origin?hl=ko 

교차 출처 리소스 공유(CORS)  |  Cloud Storage  |  Google Cloud

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

교차 출처 리소스 공유 (CORS) - HTTP | MDN