반응형
참고자료
- [MDN Web Docs] 교차 출처 리소스 공유(CORS)
- 블로그 [Evans Library] => CORS는 왜 이렇게 우리를 힘들게 하는 걸까?
- 우아한Tech 테코톡 => 나봄의 CORS
# SOP
- SOP는 Same Origin Policy의 줄임말
- 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식
=> 해커가 다른 출처의 리소스로 요청을 한다면, Cross Origin(다른 출처)라고 판단하고 요청을 거부한다.
# 출처(Origin)란?
- 서버의 위치를 의미하는 https://google.com과 같은 URL 들은 마치 하나의 문자열 같아 보여도,
사실은 여러 개의 구성 요소로 이루어져 있다.
즉, 서버의 위치를 찾아가기 위해 필요한 가장 기본적인 것들을 합쳐놓은 것이다. - URL의 Protocl, Host, Port를 통해 같은 출처인지 다른 출처인지 판단할 수 있다.
=> Protocol, Host, Port 무엇이라도 다르면, 다른 출처라고 판단한다. - 출처 내의 포트 번호는 생략이 가능한데, 이는 각 웹에서 사용하는 HTTP, HTTPS 프로토콜의 기본 포트 번호가
정해져 있기 때문이다.
http://localhost와 동일 출처인 url은 무엇일까요?(더보기 클릭)
더보기
1. http:// localhost:80
- http는 기본 포트가 80
- http://localhost 에서는 생략이 된 것
2. http://localhost/api/cors
- /api/cors 는 추가적으로 붙는 location 이기 때문에 api 앞에까지 비교를해서 동일 출처로 본다.
* 그러면 http://127.0.0.1는?
- 127.0.0.1 은 localhost가 맞기는 한데 브라우저 입장에서는 String value를 서로 비교한다.
=> 결국 String value가 다르기 때문에 브라우저는 다른 출처로 본다.
그렇다면 다른 출처의 리소스가 필요하다면 어떻게 할까?
=> 이때 필요한 게 CORS이다.
# CORS란?
- Cross-Origin Resource Sharing의 줄임말이다.
=> 다른 출처의 자원을 공유하는 것
교차 출처 리소스 공유(CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이
다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
반응형
