[10분 테코톡] 🌳 나봄의 CORS

SOP (Same Origin Policy)

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

- 출처란?

출처

 

 

CORS (Cross-Origin Resource Sharing)

- 다른 출처의 자원을 공유

- 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이

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

 

 

CORS 접근제어 시나리오

✔ 단순요청 (Simple Request)

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

✔ 인증정보 포함 요청 (Credentialed Request)

 

 

Preflight

- 사전 확인 작업

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

- 요청이 가능하다면 실제 요청(Actual Request)을 보냄

 

Preflight 수행과정

 

Preflight Requset

- Origin : 요청 출처

-  Access-Control-Request-Method : 실제 요청의 메서드

-  Access-Control-Requset-Headers: 실제 요청의 추가 헤더

Preflight Response

- Access-Control-Allow-Origin : 서버 측 허가 출처

- Access-Control-Allow-Methods : 서버 측 허가 메서드

- Access-Control-Allow-Headers : 서버 측 허가 헤더

- Access-Control-Max-Age : Preflight 응답 캐시 기간

==> Preflight Response가 가져야하는 특징

        - 응답 코드는 200대여야 함

        - 응답 바디는 비어있는 것이 좋음

 

 

 

 

 

 

 

Simple Request 

✔ Preflight 요청 없이 바로 요청을 날림

✔ 다음 조건을 모두 만족해야 함

    - GET, POST, HEAD 메서드

 

    - Content-Type

       A. application/x-www-form-urlencoded

       B. multipart/form-data

       C. text/plain

 

    - 헤더는 Accept, Accept-Language, Content-Language, Content-Type 만 허용됨

   

Simple Request의 흐름

 

 

왜 Preflight가 필요할까?

- CORS를 모르는 서버를 위해 ( 설정이 안된 서버)

CORS를 모르는 서버

PREFLIGHT를 사용하게 된다면

 

 

 

 

Credentialed Request

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

- 클라이언트측 

  credentials : include

- 서버측

   Access-Control-Allow-Credentials : true

  (Access-Control-Allow-Origin : * 은 안됨) ==> 정확한 오리진을 줘야함

 

 

 

CORS 해결하기

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

- 직접 헤더에 설정

- 스프링 부트를 이용

 

프론트 프록시 서버 설정

 

 

 

출처 : https://youtu.be/-2TgkKYmJt4