스터디 도중 네트워크 쪽을 얘기하던 도중, SOP, CORS, Preflight-Request라는 용어가 등장하게 되었다. 학교에서 컴퓨터 네트워크도 열심히 듣고 나름 네트워크를 잘 알진 못해도 용어 정도는 최소한 들어보기라도 했었는데, 위 용어들은 처음 들어 보아서 알아보고 정리하면 좋겠다고 생각했다.
네트워크에서의 출처
우선 위 3가지 용어를 알기 위해선 네트워크에서의 출처가 무슨 의미를 갖는지 알아야 한다. 네트워크에서의 출처의 의미는 무엇일까?
네트워크에서의 출처는 프로토콜, 호스트, 포트가 동일한 것을 말한다. 한번 예시를 보자.
http://example.com:80- 프로토콜 : http (!= https)
- 호스트 : example.com
- 포트 : 80 (보통 주소에선 생략)
위 세가지가 동일하면 동일 출처라고 이야기한다.
SOP(Same-Origin Policy)
정의
SOP는 이름 그대로에서 알 수 있듯이 동일 출처 정책이다. 위에서 말한 출처가 동일해야 리소스를 공유하게 하는 웹 보안 정책이다.
등장 배경
보안 문제 때문에 SOP가 등장하게 되었다. 웹 기술이 발전하며 웹 페이지가 더 복잡하고 상호 작용이 많게 되었고, 데이터와 리소스 공유가 필요한 경우도 늘어나게 되었다. 하지만 데이터 공유의 증가로 인해 악의적인 의도를 가지고 데이터 탈취를 하는 경우도 늘어나게 되었고, 이를 방지하기 위해 SOP가 등장하게 되었다.
CORS(Cross-Origin-Resource Sharing)
등장 배경
CORS가 등장한 배경은 웹 애플리케이션 간의 리소스 공유가 필요한 경우에 SOP의 제약을 완화하기 위함이다.
SOP로 인해 프로토콜, 호스트, 포트가 동일해야만 리소스를 공유할 수 있게 됨으로써 보안은 강화 되었다. 하지만 웹 기술의 발전과 함께 다른 도메인과의 리소스 공유가 점점 더 중요해지게 되었고, 개발자들은 SOP의 엄격한 제약 때문에 정보 공유의 어려움을 느끼게 되었다. 이러한 문제를 해결하기 위해 CORS가 등장하였다.
동작 방식
기본적으로 다른 출처에 요청을 보내게 될때는 Http 프로토콜을 사용하는데, 브라우저는 이때 요청 헤더에 Origin이라는 필드에 요청을 보내는 출처를 담아서 보낸다.
이후 서버는 요청을 받고 허용된 출처인지 확인한다. 출처가 확인된 경우, 서버는 응답에 Access-Control-Allow-Origin 헤더를 포함한다. 이 헤더는 브라우저가 리소스 엑세스를 허용하는 출처를 확인할 수 있게 해준다.
브라우저는 요청한 페이지와 Acess-Control-Allow-Origin 헤더에 나열된 출처가 일치하는지 확인한다. 일치하면 요청한 리소스를 사용할 수 있고 일치하지 않으면 리소스를 사용할 수 없으며 보안 오류가 발생한다.
흐름은 간단하지만 CORS가 동작하는 방식은 한 가지가 아닌 여러 가지가 있다(Simple Request, Preflight Request, Credential Request, Non-Credential Request). 그 중 나는 Preflight Request를 알아보고자 한다.
Preflight Request
개념
Preflight Request는 요청을 한번에 보내지 않고 예비 요청과 본 요청으로 나누어서 서버로 전송한다. 이때 브라우저가 본 요청을 보내기 전에 보내는 예비 요청을 Preflight라고 부르고, 이 예비 요청에는 Http 메서드 중 OPTIONS 메서드가 사용된다. 예비 요청을 통해 브라우저는 서버로부터 현재 제출하려는 요청이 허용 되는지 먼저 확인하고, 허용되는 경우에만 본 요청을 진행한다.
동작 과정
1. 요청 조건 확인
브라우저는 Preflight Request를 실행해야 하는지 결정하기 위해 요청이 단순(simple) 요청인지 아닌지 확인한다. 단순 요청은 HTTP 메서드가 GET, POST, HEAD 중 하나이고, 보내는 헤더가 일정한 범위 내의 헤더를 사용하는 경우이다.
단순 요청이 아니거나 특정 조건에 해당하는 경우(예: PUT, DELETE 메서드 사용, 특별한 헤더 추가 등), 브라우저는 Preflight Request를 수행한다.
2. Preflight 요청
브라우저는 서버에 HTTP OPTIONS 메서드를 사용하여 Preflight Request를 전송한다. 이때, 브라우저는 요청 헤더에 Origin, Access-Control-Request-Method(실제 요청에 사용할 메서드) 및 Access-Control-Request-Headers(실제 요청에 사용할 사용자 지정 헤더) 등의 정보를 포함한다.
3. 서버 검토 및 응답
서버는 받은 Preflight 요청을 처리하고, 요청이 유효하다면 응답 헤더에 다음과 같은 정보를 포함하여 응답한다.
-
Access-Control-Allow-Origin : 어떤 출처(origin)들이 해당 리소스에 접근할 수 있는지 명시
-
Access-Control-Allow-Method : 허용되는 HTTP 메서드 나열
-
Access-Control-Allow-Headers : 허용되는 사용자 지정 헤더 나열
-
옵션으로, Access-Control-Max-Age : Preflight 요청 결과를 캐싱할 수 있는 최대 시간 명시
4. 브라우저 확인
브라우저는 서버로부터 받은 응답을 처리하여 해당 요청이 허용되는지 확인한다. 응답의 허용 헤더가 실제 요청과 일치하는 경우, 브라우저는 본 요청을 수행하고 그렇지 않으면 보안 오류를 발생시키며 요청이 차단된다.
곧 프로젝트를 수행하게 될텐데 내가 개발을 하고 프론트와 통신을 하게 될때 위와 같은 상황들을 마주할 것 같아 찾아보고 정리하게 되었다. 이러한 상황이 발생 했을때 CORS, SOP 등을 떠올리고 해결 방안을 찾아 해결하면 좋을 것 같다.
출처: 뤼튼 AI
