공부하게된 이유...
이번에 프로젝트를 진행하면서, 처음으로 프론트엔드 파트와 백엔드 파트를 나누어 개발을 진행하게 되었는데 배포 방식에 대해 이야기 하던 도중 프론트 서버와 백 서버를 분리하게 되는 경우 CORS와 관련된 문제가 발생한다는 점에 대한 개념을 잘 이해하지 못해서 이에 대해서 정리해보려고 합니다.
CORS가 뭔가 공부하기 위해서 얄코님의 설명 영상과 여러 개발자 분들의 글들을 참고해서 공부했습니다!!
그래서 CORS는 뭔데??
CORS는 Cross-Origin Resource Sharing의 약자로 우리 말로 풀면, 다른 origin간의 자원 공유라고 해석할 수 있을 것 같다. 그런데, 여기서 말하는 origin은 무엇을 의미할까??
Origin은 바로 자원의 출처를 의미합니다. 그러니깐 웹 상에서는 URL(혹은 URI)라고 볼 수 있겠죠?
그렇기 때문에, cross-origin(출처가 다른 상황)은 다음 세가지 중 하나라도 해당하는 상황일 때를 의미합니다!
- 프로토콜(스키마)이 다른 경우
- 도메인(domain)이 다른 경우
- 포트 번호(port #)가 다른 경우
origin = protocol + host + port
정리하자면, CORS는 다른 출처끼리의 자원 공유(교차 출처 리소스 공유)를 의미합니다.
여기까지 정리한 내용을 보고, 저는 CORS가 문제 상황을 가리키는 용어가 아니라는 점을 이해할 수 있었습니다.
그렇다면, 문제가되는 상황은 무엇이고 CORS는 어떤 상황과 관련된 개념일까요😦❓❓
SOP를 CORS로 해결하는 개념이다
바로 SOP(Single Origin Policy, 동일 출처 정책)라는 것 때문에, CORS라는 개념이 등장한 것이었습니다.
SOP는 동일한 출처(origin)에서만 자원을 주고받도록 하는 정책을 의미하는데, 웹 브라우저에서 기본적으로 이 SOP를 채택하기 때문에, cross-origin에서의 자원 공유 상황이 문제가 발생하는 것이었죠!
하지만, 시간이 지나면서 다른 출처로부터 자원 공유를 하는 상황이 빈번해졌고, 이러한 문제를 해결하기 위해서 CORS 정책이 등장한 것이라고 합니다!!
이 CORS(교차 출처 자원 공유 방식)는 합의된 출처들간의 리소스 공유가 특정 조건을 만족할때 합법적으로 이루어질 수 있도록 만들어진 매커니즘입니다.
만약 CORS 없이 다른 출처간의 리소스 공유가 자유분방하게 발생한다면, 악성 사이트가 브라우저에 저장된 사용자의 쿠키를 이용해 다른 사이트에 등록한 사용자의 개인 정보를 훔쳐가기 매우 쉬운 상황이 벌어진다고 합니다.
(쿠키와 세션을 이용해 stateless한 HTTP의 방식을 극복해 상태 정보를 저장했었다!!)
그래서 postman 같은 애플리케이션을 활용한 요청은 잘 동작을 해도 실제로 웹 브라우저에서 교차 출처 자원을 공유하려는 상황이 발생하면, 문제가 발생했던 것입니다.
CORS를 더 자세히
이 origin(출처)의 비교의 주체는 서버에 구현된 스펙이 아닌 바로 브라우저의 스펙입니다.
즉, response 자체에서 오류 결과를 반환하는 것이 아니라 브라우저 측에서 response message에 담긴 정보를 분석해서 CORS 정책을 적용해 오류를 내거나 resource sharing을 허용하는 구조라는 뜻입니다!
그렇기 때문에 분명히 나는 WAS는 올바르게 동작하게 구현을 했는데, 브라우저에서는 계속해서 에러를 뱉어내는 답답한 상황이 연출된 것이었죠
CORS 정책이 적용된 client-server간의 일련의 통신 과정을 간략하게 정리하면, 다음과 같다고 합니다.
- 기본적으로 client에서 server로 request를 보낼때에는 origin 정보를 HTTP request message에 담아 전달하게 됩니다.
- 서버는 response message에 Access-Control-Allow-Origin 이라는 헤더에 리소스를 접근하는 것이 허용된 출처(origin) 정보를 포함해서 client로 전달합니다.
- 클라이언트는 자신이 보냈던 request message의 origin과 response message의 Access-Control-Allow-Origin 헤더의 출처를 비교해서 차단 여부를 판단합니다.
이런 구조로 CORS 정책에 따른 자원 공유 여부 판단 과정을 위해서는 서버에서 자원 공유를 허용할 출처(origin)의 정보를 기재해야할 필요성이 생긴 것이죠!!
일단 여기까지 필요한 정보들을 정리하고, 프로젝트를 진행하며 공부한 내용을 추후에 이어서 정리해보도록 하겠습니다!!
참고한 자료들
https://fomaios.tistory.com/entry/Network-CORS%EB%9E%80-feat-%EB%B3%B4%EC%95%88HTTP
[Network] CORS란? (feat. 보안,HTTP) (What is a CORS?)
CORS란? CORS는 Cross-Origin Resource Sharing의 약자로 직역하면 "교차 출처 리소스 공유" 이다. 좀 더 쉽게 말하면 동일한 출처가 아닌 다른 출처에서 데이터를 주고 받는 것을 허용하는 정책이다. 그렇다
fomaios.tistory.com
https://www.youtube.com/watch?v=bW31xiNB8Nc
https://hannut91.github.io/blogs/infra/cors
CORS란 무엇인가? – Yunseok's Dev Blog
hannut91.github.io
[WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이
inpa.tistory.com
'TIL(Today I Learned)' 카테고리의 다른 글
| [Spring] data.sql을 이용한 테스트 데이터 추가하기.. (스프링 부트 2.7.8 버전) (0) | 2023.02.22 |
|---|---|
| Spring 프로젝트에 CORS 적용하기 (0) | 2023.02.15 |
| [Java] 시간 정보 다루기 (0) | 2023.02.03 |
| Synchronous vs Asynchronous와 Blocking vs Non-Blocking (1) | 2023.02.02 |
| [JAVA] java.util 패키지 정리 (0) | 2023.02.01 |
댓글