SOP(Same Origin Policy)
동일 출처 정책
웹 브라우저 보안을 위한 기본 정책으로, 출처(origin)가 다른 두 리소스 간의 상호작용을 제한
Origin 이란?
추가적으로 쿠키의 same site는 origin과 다름!
SOP와 오류 발생
프론트 서버에서 다른 서버에 백엔드가 있다면 오류 뜨는 느낌
SOP가 적용되면, 브라우저는 다른 출처에서의 요청을 제한하기 때문에, 예를 들어 아래와 같은 상황에서는 오류(CORS 에러)가 발생
- 프론트엔드 서버:
http://frontend.com - 백엔드 서버:
http://backend.com - 프론트엔드가 AJAX 요청을 통해
http://backend.com/api에 데이터를 요청하면 브라우저가 차단.
보안을 위한 것 - CSRF, XSS 같은 사용자 정보 탈취 위험 막아줌
SOP가 막는 주요 공격
- CSRF(Cross-Site Request Forgery)
- 사용자가 로그인된 상태에서 공격자가 악성 스크립트를 통해 요청을 보내도록 유도
- SOP가 요청을 차단하여 다른 출처로의 무분별한 데이터 전송을 막음
- XSS(Cross-Site Scripting)
- 악의적인 스크립트를 삽입해 사용자 브라우저에서 실행
- SOP는 스크립트가 다른 출처의 리소스와 상호작용하지 못하도록 제한하여 피해를 줄임
CORS(Cross-Origin Resource Sharing)
교차 출처 리소스 공유
다른 서버에 자원을 요청하는 매커니즘
유정피셜
CORS 정책은 비동기통신에서만 발생하는 문제이다!!
origin 서버가 있는데, 비동기통신으로 다른 도메인의 서버를 불러오려고 하면, 이게 조금 이상하다는 거지!!
그러니까, 너 origin 서버야, 너가 요청보내는 서버에 허락받았니?? 라는 의미에서 CORS 정책이 존재하는 것이다!!
그래서 a 태그를 이용해서 그냥 도메인 자체를 바꿔버리는 방식이라면,
CORS 오류가 발생하지 않는다!!
CORS는 서버 입장에서는 ‘아 내 트래픽 복잡해지니까, 모두 다 허용하면 안 되겠어… 허용하는 애들한테만 요청 보내주자” 하는 거
GPT 피셜
CORS는 비동기 통신에서만 발생하는 문제인가?
CORS 정책은 주로 Ajax 요청(XMLHttpRequest 또는 Fetch API)과 같은 비동기 통신에서 발생!!
- 브라우저는 비동기 요청으로 다른 출처(origin)에 접근하려는 시도에 대해 보안을 강화해야 한다고 간주
- 반면,
<a>태그,<form>태그,<script>,<img>등의 태그로 요청하거나 리소스를 로드하는 경우에는 CORS의 제한을 받지 않음. 이는 브라우저가 이러한 요청을 단순히 "리소스 로드"로 간주하기 때문임
CORS 동작
1. Preflight Request (예비 요청)
브라우저가 예비요청과 본요청으로 나누어 서버에 전송
예비 요청 때는 OPTIONS 사용 → 안전하게 전달될 수 있는지 확인
예비 요청할때 내 url을 주고 이거 어떤 http 메소드, 헤더 허락돼있어? 이거 물어보고 답해주는 거임.
예비 요청의 목적
- 안전성 확보:
- 브라우저는 본 요청을 보내기 전에 서버가 허용하는지 확인하므로, 불필요한 요청을 줄이고 보안을 강화합니다.
- 허용된 작업 확인:
- 서버가 특정 메서드나 헤더를 허용하지 않는다면 브라우저는 본 요청을 보내지 않습니다.
- 교차 출처 요청 보호:
- CORS 정책에 따라 출처 간 요청이 서버의 정책에 부합하지 않으면 차단합니다.
2. Simple Request
가장 단순한 요청 → 예비 요청 안보내고 바로 본서버에 요청
이거 사용할 수 있는 경우
- 요청 메소드는 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만 허용
3. Credentialed Request
인증된 요청 사용하는 방법
다른 출처간 통신에서 보안 강화하기 위해 사용
credentials 라는 옵션을 통해 정보 담음
- same-origin: 같은 출처간 요청에만 인증 정보 담음
- include: 모든 요청에 인증 정보 담음
- omit: 모든 요청에 인증 정보 안담음
느낀점
개발할 때 프론트 - 백 첫 통신시 무조건 발생하는 문제였는데, 자세히 공부한 적은 처음인 것 같다.
이래서였구나… 를 많이 느낀 듯
그리고 CORS 동작 방식이라고 해서 프론트에서 셋 중에서 선택해서 사용하는구나 ~ 생각했는데 그게 아니라 어떻게 사용하냐에 따라 골라지는 형식이라 다른 느낌이었다.
추가적으로 더 정리해도 좋을듯함
참고자료
SOP와 CORS
[네트워크] SOP(Same Origin Policy)와 CORS(Cross-Origin Resource Sharing), CORS 오류 해결 방법
