Same Origin Policy(SOP)

<aside> 💡

• Same Origin Policy (SOP): 동일 출처 정책, 현재 페이지의 출처가 아닌 다른 출처로부터 온 데이터를 읽지 못하게 하는 브라우저의 보안 메커니즘
• Same Origin: 현재 페이지와 동일한 출처
• Cross Origin: 현재 페이지와 다른 출처
• Cross Origin Resource Sharing (CORS): 교차 출처 리소스 공유, SOP의 제한을 받지 않고 Cross Origin의 데이터를 처리할 수 있도록 해주는 메커니즘 </aside>

 

Same Origin Policy 설명

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

Origin 구성

• 아래의 구성 요소가 모두 일치해야 동일한 오리진이다.
  • 프로토콜(Protocol, Scheme)
  • 포트(Port)
  • 호스트(Host)
    
    

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 오류 발생

• window.open : 새로운 창을 띄우는 함수
• object.location.href : 객체가 가리키고 있는 URL 주소를 읽어오는 코드
• 위와 같이 외부 출처에서 불러온 데이터를 읽으려고 할 때는 오류가 발생하여 읽지 못하지만, 데이터를 쓰는 것은 문제 없이 동작한다.
  
  

Cross-Origin Resource Sharing(CORS)

• 브라우저가 SOP에 상관 없이 외부 출처에 대한 접근을 허용해주는 경우
  • <img>, <style>, <script> 등의 태그
  • 위 경우들 외에도 SOP를 완화하여 다른 출처의 데이터를 처리해야 하는 경우도 있음
  • 카페, 블로그, 메일, 메인의 각 서비스의 Host가 다르기에 오리진이 다르다고 인식. ⇒ 이 상황에서 사용할 수 있는 공유 방법이 교차 출처 리소스 공유(CORS)이다.
• 교차 출처의 자원을 공유하는 방법은 CORS와 관련된 HTTP 헤더를 추가하여 전송하는 방법을 사용한다.
• 이 외에도 JSON with Padding(JSONP) 방법을 통해 CORS 대체 가능
• CORS는 HTTP 헤더에 기반하여 Cross Origin 간에 리소스를 공유하는 방법이다.
• 발신측에서 헤더를 설정해 요청하면, 수신측에서 헤더를 구분해 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 설정한다.
• code explain
  • xhr = new XMLHttpRequest();
    • XMLHttpRequest는 웹 브라우저와 웹 서버 간에 데이터 전송을 도와주는 객체
    • 이를 통해 HTTP 요청을 보낼 수 있음
  • xhr.open(’POST’, ‘https://theori.io/whoami’);
    • 해당 페이지에 POST 요청을 보내도록 한다.
  • xhr.withCredentials = true;
    • HTTP 요청을 보낼 때, 쿠키 정보도 함께 사용하도록 한다.
  • xhr.setRequestHeader(’Content-Type’, ‘application/json’);
    • HTTP Body를 JSON 형태로 보낼 것이라고 수신측에 알려준다.
  • xhr.send(”{’data’:’WhoAmI’}”);
    • xhr 객체를 통해 HTTP 요청을 실행한다.

서버측 응답 결과

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

⇒ 위 과정을 마치면 브라우저는 수신측의 응답이 발신측의 요청과 상응하는지 확인하고, 그때야 비로소 POST 요청을 보내 수신측의 웹 리소스를 요청하는 HTTP 요청을 보냅니다.

JSON with Padding(JSONP)

• <script> 태그로 Cross Origin의 데이터를 불러온다.
• 하지만 <script> 태그 내에서는 데이터를 자바스크립트 코드로 인식하기에 Callback 함수를 활용해야 한다.
• Cross Origin에 요청 시, callback 파라미터에 어떤 함수로 받아오는 데이터를 핸들링할지 넘겨주면, 대상 서버는 전달된 callback으로 데이터를 감싸 응답한다.
• 예시코드(웹 리소스 요청 코드)

<script>
/* myCallback이라는 콜백 함수를 지정합니다. */
function myCallback(data){
    /* 전달받은 인자에서 id를 콘솔에 출력합니다.*/
	console.log(data.id)
}
</script>
<!--
https://theori.io의 스크립트를 로드하는 HTML 코드입니다.
단, callback이라는 이름의 파라미터를 myCallback으로 지정함으로써
수신측에게 myCallback 함수를 사용해 수신받겠다고 알립니다.
-->
<script src='http://theori.io/whoami?callback=myCallback'></script>

• 예시코드(웹 리소스 요청에 따른 응답 코드)

/*
수신측은 myCallback 이라는 함수를 통해 요청측에 데이터를 전달합니다.
전달할 데이터는 현재 theori.io에서 클라이언트가 사용 중인 계정 정보인
{'id': 'dreamhack'} 입니다. 
*/
myCallback({'id':'dreamhack'});

 (다만 JSONP는 CORS가 생기기 전에 사용하던 방법이라 거의 사용하지 않는 추세)