SOP & CORS

What is SOP(Same Origin Policy)?

HTTP 요청에서 가져온 악의적인 데이터를 읽을 수 없게 하는 브라우저 보안

 

Origin 구분 : Protocol, Port, Host

https://same-origin.com 

 

주소를 기준으로 Same Origin, Cross Origin 판단 예시

 

URL                                                                                                                                결과                                 이유

https://same-origin.com/frame.html	Same Origin	Path만 다름
http://same-origin.com/frame.html	Cross Origin	Scheme이 다름
https://cross.same-origin.com/frame.html	Cross Origin	Host가 다름
https://same-origin.com:1234/	Cross Origin	Port가 다름

SOP Test

Origin이 http://dreamhack.io인 SOP 보호 기법이 걸려있는 사이트에서 "window.open" 함수를 통해 same origin인 사이트와 cross origin 사이트를 직접 열어보자.

 

Same Origin

sameNewWindow = window.open('https://dreamhack.io/lecture');
console.log(sameNewWindow.location.href);
결과: https://dreamhack.io/lecture

Cross Origin

crossNewWindow = window.open('https://theori.io');
console.log(crossNewWindow.location.href);
결과: Origin 오류 발생

다만, Cross Origin이 read는 불가능하지만 Data의 write은 가능하다.

crossNewWindow = window.open('https://theori.io');
crossNewWindow.location.href = "https://dreamhack.io";

 

SOP Example

<iframe src="[Define Origin Site]" id="my-frame">

<script>
let myFrame = document.getElementById("my-frame");

myFrame.onload = () => {
	try {
    	let secretValue = myFrame.contentWindow.document.getElementById('secret-element').innerText;
        console.log({ secretValue });
    } catch() {
    	...
    }
 
const loadSameOrigin = () => { myFrame.src = 'https://same-origin.com/frame.html'; }
const loadCrossOrigin = () => { myFrame.src = 'https://cross-origin.com/frame.html'; }
</script>

<button onclick=loadSameOrigin()>Same Origin</button><br>
<button onclick=loadCrossOrigin()>Cross Origin</button>

<div id="secret-element">treasure</div>

iframe 태그의 src를 이용해 Origin을 지정한다. myFrame 변수에서 id가 "my-frame"인 Element를 저장하고, onload를 함수를 실행시킨다.  loadSameOrigin과 loadCrossOrigin 함수를 실행시키면 각각 아래와 같다.

// Result
SameOrigin :
{"secretValue":"treasure"}

CrossOrigin :
{"error":{"stack":"Error: Blocked a frame with origin "https://same-origin.com/" from accessing a cross-origin frame.
at HTMLIFrameElement.myFrame.onload (https://same-origin.com/:6:51)"}}

---

What is CORS(Cross Origin Resource Sharing)?

HTTP 헤더에 기반하여 Cross Origin 간의 Resource를 공유하는 방식. Sender 측에서 CORS 헤더를 설정해 요청하면, Receiver 측에서 헤더를 구분해 규칙에 맞게 Data를 가져가도록 설정. 이 과정을 마친 후, 브라우저는 수신측의 응답이 발신측의 요청과 상응하는지 확인하고, 그때야 비로소 POST 요청을 보내 수신측의 웹 리소스를 요청하는 HTTP 요청을 보낸다.

 

Web Resource Request Code

/*
    XMLHttpRequest 객체를 생성합니다. 
    XMLHttpRequest는 웹 브라우저와 웹 서버 간에 데이터 전송을
    도와주는 객체 입니다. 이를 통해 HTTP 요청을 보낼 수 있습니다.
*/
xhr = new XMLHttpRequest();
xhr.open('POST', 'https://theori.io/whoami');

/* HTTP 요청을 보낼 때, 쿠키 정보도 함께 사용하도록 해줍니다. */
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/json');

/* xhr 객체를 통해 HTTP 요청을 실행합니다. */
xhr.send("{'data':'WhoAmI'}");

Sender's HTTP Request

OPTIONS /whoami HTTP/1.1
Host: theori.io
Connection: keep-alive
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: https://dreamhack.io
Accept: */*
Referer: https://dreamhack.io/

Server's Response

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://dreamhack.io
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type

 

Types of CORS's Header

 

Header                                                                             Description

Access-Control-Allow-Origin	헤더 값에 해당하는 Origin에서 들어오는 요청만 처리합니다.
Access-Control-Allow-Methods	헤더 값에 해당하는 메소드의 요청만 처리합니다.
Access-Control-Allow-Credentials	쿠키 사용 여부를 판단합니다. 예시의 경우 쿠키의 사용을 허용합니다.
Access-Control-Allow-Headers	헤더 값에 해당하는 헤더의 사용 가능 여부를 나타냅니다.

 

Reasons for use

SOP 보호 기법에 구애받지 않고 외부 출처에 대한 접근을 허용하는 경우가 존재. 태그로는 <img>, <style>, <script>가 있고 그 외에도  서비스에서 동일 출처 정책인 SOP를 완화하여 다른 출처의 데이터를 처리 해야 하는 경우도 있다. 따라서 CORS 보호 기법을 이용한다.