SOP & CORS

뾰족머리삼돌이·2023년 12월 27일

cors sop

WEB

목록 보기

6/10

SOP ( Same-Origin Policy )

동일-출처 정책

SOP는 웹 환경에서의 보안 모델로, 동일한 출처의 URL과 데이터 접근만을 허용하는 정책이다

여기서 출처란, http://www.sample.com 과 같이 프로토콜, 호스트, 포트를 묶어서 부르는 것을 의미한다
위 예시에서는 http, www.sample.com, 80 을 사용하고 있다

따라서 아래와 같은 URL과는 데이터 접근을 허용하지 않는다

https://www.sample.com
http://www.sample.com:8080

이러한 SOP는 보안 정책 중의 하나로, 브라우저에서 제어된다
또한 이를 통해서 CSRF( Cross-Site Request Forgency )공격 등을 차단할 수 있다

실제로는 자원의 종류에 따라서 SOP가 다르게 적용된다

HTML 문서에서 다른 출처로 폼 제출(GET/POST Request), 링크 클릭(GET Request)등은 허용
HTML 문서에서 다른 출처의 CSS, JavaScript, Iframe, Image, Media 등을 포함(GET Request)하는 것은 허용
HTML 문서에서 다른 출처로 XHR (Ajax Request)을 보내는 것은 거부

하지만 웹 애플리케이션 개발 시에는 보통 다른촐처간에 데이터를 공유하는 일이 발생한다
예를들어 프론트( React ) / 백엔드 ( Spring Boot ) 로 개발한다면 포트를 따로 둬야한다

이 때문에 SOP를 제어하기 위한 정책이 CORS( Cross-Site Resource Sharing ) 이다

교차-출처 자원 공유

CORS는 서버측에서 설정할 수 있으며, 동작과정은 간단하게 아래의 과정을 거친다

서버측으로 요청을 보내는 경우 헤더에 origin 이라는 이름으로 출처를 명시
서버측에서 허용하는 출처( Access-Control-Allow-Origin ) 제공
브라우저에서 일치하는지 확인

여기서 Access-Control-Allow-Origin 부분이 서버에서 설정할 수 있는 내용이다

configuration.addAllowedOrigin("http://localhost:3000");
configuration.setAllowedMethods(Arrays.asList("HEAD","POST","GET","DELETE","PUT"));
configuration.setAllowedHeaders(Arrays.asList("*"));
configuration.setAllowCredentials(true);

위 예시와 같이 허용할 출처, 메서드, 헤더 등을 설정할 수 있다

동작과정

CORS의 동작방식은 크게 3가지의 시나리오가 존재한다

1. Preflight Request

예비요청

본격적인 요청을 전송하기 이전에 통신이 정상적으로 동작하는지 확인하는 절차를 밟는다
이러한 확인요청을 preflight 라고 부르며 주로 OPTIONS 메서드가 사용된다

이러한 확인과정을 통해서 비정상적인 요청으로부터 서버측의 데이터를 지킬 수 있다는 장점이 존재한다
하지만, 통신의 과정에서 매번 preflight 요청을 보내는 것은 성능면에서 큰 단점이기 때문에 캐시를 통해 이러한 단점을 보완할 수 있다

2. Simple Request

Preflight Request과 다르게 바로 본요청을 보내고 CORS를 확인하는 방법이다
이러한 경우 서버측의 데이터가 변조될 가능성이 있기때문에 3가지 경우를 충족해야만 한다

요청의 메소드는 GET, HEAD, POST 중 하나여야 한다.
Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width 헤더일 경우에만 적용된다.
Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain중 하나여야한다. 아닐 경우 예비 요청으로 동작된다.