미니프로젝트 주차에 접어들었따..드디어..
프론트엔드와 협업을 하려면 CORS에 대해 알아야 해서 정리를 하며 공부해본다.
개요
CORS (Cross-Origin Resource Sharing): 다른 도메인의 리소스를 요청하는 것을 허용하기 위한 웹 보안 메커니즘
SOP (Same-Origin Policy): 웹 브라우저의 기본 보안 정책으로, 다른 도메인의 리소스에 대한 요청을 제한
목적
CORS: 웹 애플리케이션에서 다른 도메인의 리소스에 안전하게 액세스할 수 있도록 허용
SOP: 사용자 데이터를 보호하고 악의적인 웹 사이트로부터의 공격을 방어하기 위해 도입
동작 원리
CORS: 웹 서버가 응답 헤더에 'Access-Control-Allow-Origin' 등의 정보를 추가하여 다른 도메인에서의 요청을 허용
SOP: 동일 출처 (같은 프로토콜, 도메인, 포트)에서만 리소스에 대한 요청이 허용되도록 제한
예외 및 허용 조건
CORS: 서버에서 허용하는 도메인에 대해서만 CORS 요청이 가능하며, 리소스에 대한 액세스가 허용됨
SOP: 스크립트 내에서 JSONP, CORS, postMessage 등의 기술을 사용하여 SOP의 제약을 우회할 수 있음
사용 사례
CORS: 웹 애플리케이션에서 외부 API를 사용하거나 다른 도메인의 이미지, 스타일시트, 자바스크립트 파일 등을 불러올 때
SOP: 웹 브라우저에서 기본적으로 적용되어 사용자 데이터를 보호하고 악의적인 공격을 방어하는 데 사용
CORS와 SOP를 함께 알아야하는 이유
웹 보안 이해: SOP는 웹 보안의 기본 정책이고, CORS는 SOP를 완화하여 안전한 상황에서 웹 애플리케이션 간의 상호 작용을 가능하게 한다.
이 두 정책을 함께 이해하면 웹 보안의 기본 원칙을 파악할 수 있음
프론트엔드와 백엔드 통신: 웹 애플리케이션 개발에서 프론트엔드와 백엔드 간의 통신이 필수적이며,
이 과정에서 SOP와 CORS가 적용된다.
두 정책을 이해해야 웹 애플리케이션 간의 통신을 원활하게 수행할 수 있음
추천 참고 블로그 및 자료:
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS CORS
CORS에 대한 자세한 설명과 예제가 있는 Mozilla 개발자 문서
https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
SOP에 대한 깊이 있는 설명과 동작 원리를 확인할 수 있는 Mozilla 개발자 문서
