[CS] CORS는 무엇일까?

 

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

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

 

등장 배경

원래 보안을 위해 다른 출처의 리소스를 접근하는 것이 불가능했지만, 웹 생태계가 다양해지면서 여러 서비스들끼리 자유롭게 데이터 주고 받아질 필요가 생겼다.

다른 사이트 간의 요청들을 브라우저가 막고 있기 때문에 이를 허용해주기 위해 어떠한 기준을 충족시키면 리소스 공유할 수 있도록 CORS가 만들어졌다.

 

CORS를 이해하기 위해 필요한 3가지 개념

Origin(출처)

Protocol과 Host, Port까지 합친 것을 의미한다.

즉, 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐 놓은 것이다.

 

 

SOP(동일 출처 정책)

SOP는 Same Origin Policy 를 뜻한다.

RFC 6454에 등장한 보안 정책으로 동일한 출처의 Origin만 리소스를 공유할 수 있따.

이 SOP 표준에 따라야지 XSS와 CSRF라는 보안상의 Issue를 막을 수 있다.

Access-Control-Allow-Origin

Access-Control-Allow-Origin을 이용해서 CORS를 해결할 수 있다.

접근 제어 출처 허용이라는 직역과 같이 다른 출처를 허용해 주는 역할을 한다.

 

CORS 동작 원리

프리플라이트 요청(Preflight Request)

Preflight Request는 요청을 예비 요청과 본 요청으로 나눈다.

OPTIONS 메서드를 통해 다른  도메인의 리소스에 요청이 가능한지 확인 작업하고,

요청이 가능하다면 실제 요청을 보낸다.

 

Request

OPTIONS 요청과 함께 두 개의 다른 요청 헤더가 전송된다.

Access-Control-Request-Method: POST # 실제요청의 메서드
Access-Control-Request-Headers: X-PINGOTHER, Content-Type # 실제요청의 추가헤더

 

Response

서버가 메서드와 헤더를 받을 수 있음을 알려준다.

Access-Control-Allow-Origin: http://foo.example # 서버측 허가출처
Access-Control-Allow-Methods: POST, GET, OPTIONS # 허가 메서드
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type # 서버측 허가헤더
Access-Control-Max-Age: 86400 # Prefilght 응답 캐시기간

 

 

단순 요청

서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 유효한 요청이라면 리소스를 응답합니다. 만약 유효하지 않은 요청이라면 브라우저에서 이를 막고 에러가 발생합니다.

• 메서드는 GET, POST, HEAD 중 하나
• 헤더는 Accept, Accept-Language, Content-Language, Content-Type 만 허용
• Content-Type 헤더는 다음의 값들만 허용
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

 

 

참고

https://docs.tosspayments.com/resources/glossary/cors

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터

 

긴 글 읽어 주셔서 감사합니다.