[Dreamhack] Mitigation : Same Origin Policy ( SOP ) + Cross Origin Resource Sharing ( CORS ) + JSON with Padding ( JSONP )

1 - 0 - 9. Mitigation : Same Origin Policy ( SOP ) + Cross Origin Resource Sharing ( CORS ) + JSON with Padding ( JSONP )

 

 

 

#  동일 출처 정책 ( = Same Origin Policy ( SOP ) )

: 현 페이지가 아닌 타 출처에서 온 데이터를 읽어들이지 못하게 하는 브라우저의 보안 메커니즘

 

+ mitigation이란?

: '완화, 경감' 이라는 의미를 지님

 

 

 

- 동일 출처 정책의 오리진(origin) 구분법

origin의 구성 요소
프로토콜(protocol, scheme)	호스트(host)	포트(port)

+ 위 구성 요소가 모두 일치하는 경우에만 동일한 오리진이라고 칭한다.

 

 

ex 1) https://same-origin.com/과 동일한 오리진인 https://same-origin.com/frame.html

-->  path 만 다르기에 동일한 오리진( Same Origin )

 

ex 2) https://same-origin.com/과 동일한 오리진이 아닌 http://same-origin.com/frame.html

-->  Scheme 이 달라 Cross Origin

 

ex 3) https://same-origin.com/과 동일한 오리진이 아닌 https://cross.same-origin.com/frame.html

--> Host 가 달라서 Cross Origin

 

ex 4) https://same-origin.com/과 동일한 오리진이 아닌 https://same-origin.com:1234/

-->  Port가 달라서 Cross Origin

 

 

 

- SOP 실습

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>

+ << Line 2 >>

: iframe 을 사용하여 웹페이지 안에 다른 웹페이지를 삽입하는 HTML 태그를 구현

: src 요소로 삽입되는 웹 페이지 주소 설정

 

+ << Line 10 >>

: 이벤트 핸들러 onload를 통해 객체 로드 성공 시에 동작하도록 함

 

+ << Line 10 ~ 23 >>

: iframe 객체에 페이지 로드 시 동작하는 코드

 

+ << Line 14 ~ 15 >>

: 페이지 로드 완료 시 secret-element 객체의 값인 tresure을 읽어와 콘솔에 출력하는 코드

 

 

 

2. 실습 탭을 통해 코드 정상 동작 여부 실습

Same Origin인 경우&nbsp; --> 데이터 접근이 성공적으로 수행됨

 

 

Cross Origin인 경우&nbsp; -->&nbsp; tresure 객체값 데이터에 접근하여 읽어오는 과정에서 에러 발생

 

 

 

 

# 교차 출처 리소스 공유 ( = Cross Origin Resource Sharing ( CORS ) )

: SOP의 제한을 받지 않고 Cross Origin의 데이터 처리를 가능하게 하는 메커니즘으로, HTTP 헤더를 기반으로 하여 Cross Origin 간 리소스를 공유하는 방법

 

 

- CORS 동작 순서

1. 발신자 측에서 CORS 헤더 설정 후 요청

웹 리소스를 요청하는 코드

 

발신 측에서 보낸 HTTP 요청&nbsp; -->&nbsp; 헤더와 메소드의 추가 사용이 가능한지 질의

+ CORS preflight

: 수신 측에 웹 리소스 요청 가능 여부 질의하는 과정

 

 

 

2. 수신 측에서 헤더를 구분하는 작업 수행

 

 

 

3. 구분 후 정해진 규칙에 따라 데이터를 가져갈 수 있게 설정

서버의 응답 코드

Access-Control- Allow-Origin	Access-Control- Allow-Methods	Access-Control- Allow-Credentials	Access-Control- Allow-Headers
헤더 값에 해당하는 Origin에서 들어오는 요청만 처리하는 헤더	헤더 값에 해당하는 메소드의 요청만 처리하는 헤더	쿠키의 사용 여부를 판단하는 헤더	헤더 값에 해당하는 헤더의 사용 여부를 표시하는 헤더

 

 

 

4. 브라우저가 수신 측의 응답과 발신 측의 요청의 상응 여부 확인

 

 

 

5. 상응함이 확인될 경우, 브라우저에서 POST 요청을 보내 수신 측의 웹 리소스를 요청하는 HTTP 요청 전송

 

 

 

 

# JSON with Padding ( JSONP )

: CORS의 대체법 중 하나로, <script> 태그로 Cross origin의 데이터를 불러오고 Callback 함수를 사용한다는 특징이 있다.

 

 

ex) 

웹 리소스를 요청하는 코드

+ << Line 13 >>

: Cross origin의 데이터를 호출하는 코드

: 데이터를 호출할 때 callback 파라미터를 이용하여 myCallback 도 함께 전달

 

리소스 요청에 따른 응답