[TIL220301] CORS

 

 

 

 

 

Cross-Origin Resource Sharing

 

 

 

CORS는 추가 http header를 사용하여, 한 출처에서 실행중인 web application이

다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체제이다.

 

web application은 resource가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 Cross Origin 교차 출처 http요청을 실행한다.

ex) https;//domain-a.com의 프론트엔드가 XMLHttpRequest를 사용하여 https;//domain-b.com/data.json을 요청하는경우 

보안상의 이유로, 브라우저는 스크립트에서 시작한 교차출처 http요청을 제한한다.

 

XMLHttpRequest과 Fetch API는 동일 출처 정책을 따른다.

이 API를 사용하는 web application은 자신의 출처와 동일한 리소스만 불러올 수 있으며,

다른 출처의 리소스는 그 출처에서 올바른 CORS header를 포함한 응답을 반환해야 한다.

 

 

 

 

 

 

 

 

SOP란?

 

 

 

Same Origin Policy

: 다른 출처의 리소스를 사용하는 것에 제한하는 보안방식

 

 

출처 : [youtube] 10분테코톡-나봄의 CORS

 

 

origin을 확인해서 (요청이 어디온지 확인해서) 자신의 출처와 다른 cross origin은 보안상 요청이 받아들여지지않는다.

 

그렇다면 다른 출처의 리소스가 필요할때는?   -  CORS!!

 

 

 

 

 

---

 

 

 

 

 

CORS란?  

 

 

Cross-Origin Resource Sharing

다른 출처의 자원을 공유

 

 

 

CORS 접근제어 시나리오

• Simple Request 단순요청
• Preflight Request 프리플라이트 요청
• Credentialed Request 인증정보 포함 요청

 

 

1. Preflight Request

     OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 사전확인작업을 한다. 

     ➡️  요청이 가능하다면 Actual Request 실제 요청을 보낸다. (client에서 총 2번의 request)

    

     request 내용

•     origin : 요청 출처
•     Access-Control-Request-Method : 실제 요청의 메서드
•     Access-Control-Request-Headers : 실제 요청의 추가 헤더

 

      response 내용  ( 응답코드는 200대여야 하며, body는 비어있는 것이 좋다)

• Access-Control-Allow-Origin : 서버 측 허가 출처
• Access-Control-Allow-Methods : 서버 측 허가 메서드
• Access-Control-Allow-Headers : 서버 측 허가 헤더
• Access-Control-Allow-Max-Age : 응답 캐시 기간

   

 

 

 

 

 

2. Simple Request

     request 내용 Preflight 요청없이 바로 본 요청을 날린다.

     [ 다음조건을 모두 충족 ]

         -  GET, POST, HEAD 메서드 중 하나

         -  Content-type

                A. application/x-www-form-urlencoded

                B. multipart/form-data

                C. text/plain

         -  Header

                Accept

                Accept-Language

                Content-Language

                Content-Type

   

 

 

 

3. Credentialed Request

    인증 관련 헤더를 포함 할 때 사용하는 요청이다.

     ➡️  요청이 가능하다면 Actual Request 실제 요청을 보낸다. (client에서 총 2번의 request)

    

     request 내용

•  credentials : include

     response 내용

• Access-Control-Allow-Credentials : true
• (Access-Control-Allow-Origin : *은 안된다.)

 

 

 

 

 

---

 

 

 

CORS 해결방법

 

1. 프론트 프록시 서버 설정 (개발 환경)

 

2. 직접 header 설정

3. 스프링 부트 이용