SOP (Same Origin Policy)
다른 출처의 리소스를 사용하는 것에 대해 제한하는 보안 방식
출처(origin) 이란
http://localhost 와 동일 origin 인 것은
1은 프로토콜이 다름
2는 80이 기본포트이므로 같음
3은 127.0.0.1 은 IP가 로컬호스트이긴 하지만 스트링밸류로 브라우저가 비교하기 때문에 다름
4는 /api/cors 는 추가적으로 붙는 거기때문에 동일출처 맞음
여기서 다른 origin resource가 필요할때
CORS 를 사용함
CORS 접근제어 시나리오
1. 단순요청 (Simple Request)
2. 프리플라이트 요청 (Preflight Request)
3. 인증정보 포함 요청 (Credentialed Request)
1. 단순요청
2. Preflight (사전요청? 같은 너낌)
Preflight가 왜 있는가에 대해서는 쉽게 말해서 CORS spec이 생기기 이전에 만들어진 서버들은 브라우저의 SOP(same origin policy) request만 가능하다는 가정하에 만들어졌는데, cross-site request가 CORS로 인해서 가능해졌기 떄문에 이런 서버들은 cross-site request에 대한 security mechanism이 없다보니 보안적으로 문제가 생길수 있으니 이런 서버들을 보호하기 위해 CORS spec에 preflight request를 포함한겁니다. Preflight request로 서버가 CORS를 인식하고 핸들할수있는지 먼저 확인을 함으로써 CORS를 인식하지 못하는 서버들을 보호할수있는 매커니즘 입니다.
라고 댓글이 달려있는데 이해가 쏙 됐음
Preflight Request
- Origin : 요청 출처
- Access-Control-Request-Method : 실제 요청의 메소드
- Access-Control-Request-Header : 실제 요청의 추가 헤더
Preflight Response
- Access-Control-Allow-Origin : 서버 측 허가 출처
- Access-Control-Allow-Methods : 서버 측 허가 메소드
- Access-Control-Allow-Headers : 서버 측 허가 헤더
- Access-Control-Max-Age : Preflight 응답 캐시 기간
응답시에 응답코드는 200대 여야하며, 응답 바디는 비어있는 것이 좋다
Preflight 가 필용한 이유는
CORS를 모르는 서버를 위해서 필요하다
Credentialed Request
인증관련 헤더를 포함할 때 사용하는 요청
CORS 를 해결하는 방법
1. front proxy server 설정 (개발환경 세팅해주기)
브라우저 입장에서 SAME ORIGIN으로 인식
2. 직접 헤더에 설정
3. 스프링부트를 이용하기
VUE.JS 프로젝트 올려볼 때 방법만 그냥 찾아서 해봤던..개념
'Web > HTTP' 카테고리의 다른 글
| [Spring Http API Test] 테스트환경 만들기 (0) | 2023.03.19 |
|---|
