SOP와 CORS

SOP (same origin policy)

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.

어떤 origin 으로 부터 로드된 document 또는 script가 다른 origin 의 리소스와 상호작용하는 방법을 제한하는 보안 방식

document.location.origin
// "https://velog.io"

origin 의 정의

https://www.google.com:443/path/page.html
scheme |     Host    | port

Origin 이 같다는 것은 scheme, host, port 가 모두 일치한다는 것을 말한다.

상호작용의 종류

1. ajax
2. socket
3. window.open 팝업
4. iframe

위의 모든 것들은 Same Origin Policy 가 적용된다. 참고로 브라우저 내장 저장소인 Local Storage, Session Storage는 same origin 마다 하나씩 생성되고 same origin 을 갖는 document 나 script 만 접근이 가능하다.

SOP 가 중요한 이유

1. 해커가 본인사이트를 클릭하도록 유도하는 이메일을 보냈다.
2. 사용자가 무심코 클릭
3. 해당 사이트는 사용자의 이메일을 iframe 으로 띄운다. (또는 사용자의 이메일주소로 ajax 요청을 한다.)
4. 이때 SOP가 없다면 javascript로 해당 document에 접근이 가능하고, 해커의 서버로 정보를 보낼 수 있다.

Same-Origin 과 Cross-Origin

Same-Origin 은 상호간의 document에 자유롭게 접근이 가능하지만 Cross-Origin 은 접근이 불가능하며 매우 제한적인 객체에만 접근이 가능하다.

만약 Cross-Origin 간에 데이터 교환이 필요할때는

• popup 의 경우 window.postMessage() API 를 이용

일반적으로는 서버측에서 response header 에 허용할 origin 만을 Access-Control-Allow-Origin 에 추가한다. 이것을 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)라고 부른다.

Access-Control-Allow-Origin: https://developer.mozilla.org

주의할 점

1. SOP 는 CSRF 공격을 방지하지 못한다.

Cross-Origin 응답 데이터를 읽을 수는 없지만 요청은 가능하기 때문이다. 요청시 쿠키가 같이 붙어서 요청하기 때문에 서버측 CSRF 대책은 필수.

2. Cross-origin embedding 은 일반적으로 가능하다.

<script src=""></script>
<link rel="stylesheet" href="">
<img>, <video>, <audio>
<object>, <embed>
@font-face
<iframe>

3. Cross-origin read 는 일반적으로 불가능. 다만 embedding 을 이용해 일부 정보 누출이 가능할 수도 있다.

참고자료

What happens if there is no SOP

MDN-교차 출처 리소스 공유 (CORS)