Same Origin
Protocol, Host, Port 가 모두 같은 오리진
http://store.company.com/dir2/other.html - 경로만 다르므로 성공
http://store.company.com/dir/inner/another.html - 경로만 다르므로 성공
https://store.company.com/secure.html
- 프로토콜이 다름
http://news.company.com/dir/other.html
- 호스트가 다름SOP
SOP Same-Origin Policy 의 약자로 웹 브라우저 보안을 위해 프로토콜, 호스트, 포트번호가 같은 Same-Origin의 서버로만 리소스를 주고 받도록 상호작용을 제한하는 보안 방식 입니다.
SOP 적용 범위
기본적으로 HTTP 요청에 적용되는데, 교차 출처 요청이 가능하므로 모든 HTTP 요청이 SOP 요청이 가능한 것은 아닙니다. 요청이 가능한 대표적인 예시로 Ajax, Fetch API 요청이 있습니다.
SOP 장단점
Ajax나 Fetch를 통해 현재 origin과 다른 URL에 리소스를 요청할 경우 말 그대로 origin이 다르기 때문에 SOP에 위배되어 오류가 발생합니다.
따라서 이를 해결하기 위해 CORS 정책이 생겨났습니다.
예상 꼬리질문
모든 HTTP 요청이 SOP 요청이 가능한 것은 아니라고 말씀해주셨는데요, SOP가 적용되지 않는 Cross-Origin 예가 있을까요?
<img> 태그로 다른 도메인의 이미지 파일 요청
<link> 태그로 다른 도메인의 css요청
<script> 태그로 다른 도메인의 js 파일 요청
SOP의 단점이 있다면 무엇이 있을까요?
A. Ajax가 널리 사용되면서 XMLHttpRequest에 대해 cross-Site HTTP Request의 필요성이 증가했다. 이러한 불편함을 해결하기 위해 CORS 개념이 생겼습니다.
SOP에서 외부 리소스 요청 시 오류가 발생하고, 그에 대한 해결책으로 CORS가 있다고 하셨는데 CORS에 대해 간략하게 설명 가능하실까요?
CORS는 Cross-Origin Resource Sharing 의 약자로 다른 출처의 리소스에도 접근할 수 있도록 하는 정책입니다.
CORS의 요청에는 크게 단순요청과 프리플라이트 요청이 있습니다.
단순요청은 CORS preflight를 발생시키지 않는 요청입니다.
프리플라이트 요청은 OPTIONS 메소드를 사용해 다른 origin에 사전 요청을 보내 실제 요청을
하기에 안전한지 확인하는 요청을 말합니다. 이를 통해 오리진이 다른 외부 도메인에 안전하게 접근할 수 있게 됩니다.
