[Dreamhack] Same Origin Policy (SOP)

[Dreamhack] Wargame - Same Origin Policy (SOP)

브라우저는 인증 정보로 사용될 수 있는 쿠키를 브라우저 내부에 보관한다. 그리고 이용자가 웹 서비스에 접속할 때 브라우저는 해당 웹 서비스에서 사용하는 인증 정보인 쿠키를 HTTP 요청에 포함시켜 전달한다. 이 특징은 사이트에 직접 접속하는 것에만 한정되지 않는다. 이 특징으로 악의적인 페이지가 클라이언트의 권한을 이용해 대상 HTTP 요청을 보내고 HTTP응답 정보를 획득하는 코드를 실행할 수 있다.  브라우저의 보안 메커니즘인 동일 출처 정책(SOP)는 클라이언트 입장에서 가져온 데이터를 악의적인 페이지에서 읽을 수 없도록 한다.

- 오리진 구분 방법

: 프로토콜, 포트, 호스트로 구성되며 이 세 구성요소가 모두 일치해야 동일한 오리진이라고 한다.

 

5-1 실습

모듈 구성 코드

<!-- iframe 객체 생성 -->
<iframe src="" id="my-frame"></iframe>
<!-- Javascript 시작 -->
<script>
/* 2번째 줄의 iframe 객체를 myFrame 변수에 가져옵니다. */
let myFrame = document.getElementById('my-frame')
/* iframe 객체에 주소가 로드되는 경우 아래와 같은 코드를 실행합니다. */
myFrame.onload = () => {
    /* try ... catch 는 에러를 처리하는 로직 입니다. */
    try {
        /* 로드가 완료되면, secret-element 객체의 내용을 콘솔에 출력합니다. */
        let secretValue = myFrame.contentWindow.document.getElementById('secret-element').innerText;
        console.log({ secretValue });
    } catch(error) {
        /* 오류 발생시 콘솔에 오류 로그를 출력합니다. */
        console.log({ error });
    }
}
/* iframe객체에 Same Origin, Cross Origin 주소를 로드하는 함수 입니다. */
const loadSameOrigin = () => { myFrame.src = 'https://same-origin.com/frame.html'; }
const loadCrossOrigin = () => { myFrame.src = 'https://cross-origin.com/frame.html'; }
</script>
<!--
버튼 2개 생성 (Same Origin 버튼, Cross Origin 버튼)
-->
<button onclick=loadSameOrigin()>Same Origin</button><br>
<button onclick=loadCrossOrigin()>Cross Origin</button>
<!--
frame.html의 코드가 아래와 같습니다.
secret-element라는 id를 가진 div 객체 안에 treasure라고 하는 비밀 값을 넣어두었습니다.
-->
<div id="secret-element">treasure</div>

코드를 보면 cross origin버튼을 누르면 오리진 호스트가 다르기때문에 오류가 발생한다.

페이지에서 cross origin을 누르면 데이터에 접근할 수 없다는 오류가 출력되는 것을 확인할 수 있다.

same origin을 눌렀을 때는 treasure이 출력되는 것을 확인할 수 있다.

SOP는 웹 보안에서 중요한 요소이지만 브라우저가 SOP에 구애받지 않고 외부 출처에 대한 접근을 허용해주는 경우가 존재하기 때문에 오리진이 다른 사이트들을 SOP 적용받지 않고 리소스 공유할 방법이 필요하다.

그 방법이 자원을 공유하기 위해 사용할 수 있는 공유 방법인 교차 출처 리소스 공유(Cross Origin Resource Sharing)라고 한다.