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

출처(Origin)란?

 

Protocol과 Host, 포트 번호(:80, :443)까지 모두 합친 것

 

 

동일 출처 정책?

서로 다른 출처의 리소스 간 상호작용을 방지하기 위해 클라이언트 측 웹 애플리케이션(웹브라우저 등)에서 적용되는 보안 정책

> 악의적인 행동 뿐 아니라 origin 간의 적법한 상호작용도 방지함 > 해결 방안 = CORS

 

CORS란? (교차 출처 리소스 공유)

 

웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조

도메인/ 포트가 다른 서버의 자원을 요청하는 것 

 

추가 HTTP 헤더를 사용해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

 

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행함

 

 

CORS의 동작원리

웹페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베드할 수 있음

특정 cross-domain 요청, 특히 Ajax 요청은 기본적으로 금지됨 (동일-출처 보안 정책 위배)

CORS는 교차 출처 요청을 허용하는 것이 안전한지 아닌지를 판별하기 위해 브라우저와 서버가 상호 통신하는 하나의 방법을 정의함

 

 

CORS 요청 유형

1) 단순 요청 : 바로 시작 가능

(1) 브라우저가 Origin 헤더(리소스 공유를 위한 리소스 출처를 포함)를 요청에 추가함 

(2) 대상은 http 메소드와 Origin 헤더 값을 CORS 구성의 메소드/출처 정보와 비교

(3) 일치하면 Access-Control-Allow-Origin 헤더를 응답에 포함시킴 (초기 요청의 Origin 헤더의 값 포함)

 

 

2) 실행 전 요청 : 기본 요청 진행 전에 '실행 전' 요청을 서버에 보내 권한 받아야 함 

• GET, HEAD, POST 외의 메서드 사용
• POST 메서드를 text/plain, application/x-www-form-urlencoded, multipart/form-data가 아닌 Content-Type과 함께 사용
• 커스텀 헤더를 설정. (ex: X-PINGOTHER)

(1) 브라우저가 기본 요청의 Requested Method/ Requested Headers 를 포함하는 OPTIONS 요청 보냄

(2) 대상은 리소스 허용하는 http 메소드/ 헤더값 반환

    > 실행전 요청의 메소드/헤더 중 하나라도 대상 리소스에서 허용하는 메소드/헤더 집합에 없으면 요청 실패

 

관련 헤더

요청 헤더

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

 

응답 헤더

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

 

 

---

Reference

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

교차 출처 리소스 공유 - 위키백과, 우리 모두의 백과사전

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

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