#02: Web hacking-SOP와CORS

지난 편에 웹에 대해 간단한 이해를 했다면 이번편에는 Client-Side 취약점을 공격하려면 꼭 알아야 하는 Same-Origin-Policy(SOP)와 CORS(Cross-Origin-Resource-Sharing)에 대해 공부해보자.

Origin이란 무엇인가

Origin은 Scheme(protocol), Host, Port로 이루어져있다. 다음 URL에서 Origin의 구성요소를 찾아보겠다.

https://www.naver.com:443

이 경우에 https가 scheme(protocol), www.naver.com이 host, 443이 포트다.

SOP이란 무엇인가

SOP은 Same-Origin-Policy의 약자로 동일 출처 정책정도로 번역할 수 있다. SOP은 사용자 보호를 위해 같은 오리진끼리만 document를 읽거나, script를 읽을 수 있는 정책이다. 왜 오리진이 다를 경우 document와 script를 읽어오는 것을 막는 것이 보안상 도움이 될까?

HTTP는 Connectionless하고 Stateless한 특징이 있다. 웹 브라우저는 사용자의 정보를 늘 유지하기 위해 모든 요청에 해당 사이트에서 발급한 쿠키를 동봉하여 전송한다.

만약 해커가 페이지에 iframe이나 xmlHttpRequest 코드를 삽입하여 다른 사용자가 해당페이지에 접속했을 때 gmail에 접속하도록 한다. 만약 그 공격을 당하는 사용자가 gmail에 로그인되어 있다면 웹 브라우저는 쿠키를 요청과 함께 보내 gmail에 접근하여 정보를 가져온다.

하지만 SOP 때문에 gmail을 가져올 수는 있어도 본인의 서버로 전송하는 것을 막을 수 있는 것이다(iframe의 경우 gmail이 정상적으로 로드되지만 상위 document와 iframe 내부의 origin이 다르기 때문에 null 값이 리턴된다)

CORS란 무엇인가

CORS란 Cross-Origin-Resource-Sharing의 약자로 운영, 개발 등의 이유로 다른 오리진끼리 통신하여야 할 때 이를 가능케 하는 방법이다. 방법은 3개정도 있다.

1. postMessage
2. JSONP
3. CORS HEADER

postMessage

메시지를 주고 받기 위한 이벤트 핸들러를 이용하여 리소스를 공유한다. postMessage 메서드로 메시지를 보내고 message 이벤트로 메시지를 받을 수 있다.

다음은 예시 코드다.
https://abc.com

const otherWindow = window.open('http://other.com');

window.addEventListener('message', (e) => {
  if(e.origin === `http://other.com`){
    console.log(e.data);
  }
})
otherWindow.postMessage('hi', 'http://ohter.com');

http://other.com

window.addEventListener('message', (e) => {
  if(e.origin === 'https://abc.com') {
    console.log(e.data)
    e.source.postMessage('bye','https://abc.com');
  }
})

JSONP

스크립트 태그를 통해 외부 JS코드를 호출하면 현재 오리진에서 해당 코드가 실행된다는 점을 이용한 방법이다. 스크립트 태그를 통해 다른 오리진의 리소스를 요청하고 응답 데이터를 현재 오리진의 Callback에서 다루는 방식으로 리소스를 공유한다. 다음은 dreamhack.io에서 제공하는 예시다.

https://dreamhack.io

<script>
function myCallback(data){ 
	console.log(data.id)  // 'dreamhack'
}
</script>

//test.dreamhack.io/me로부터 리소스를 요청함
<script src='http://test.dreamhack.io/me?callback=myCallback'></script>

http://test.dreamhack.io/me?callback=myCallback

myCallback({'uid':1, 'id':'dreamhack', 'pw':'********'});

Cross Origin Resource Sharing(CORS)헤더 사용

다른 오리진을 허용하는 설정을 HTTP 헤더를 통해 허용하고 리소스를 공유하는 방식이다. 대략적인 flow는 다음과 같다.

1. 리소스 요청을 보낸다.
2. OPTIONS 헤더를 통해 메서드, 헤더 등이 허용하는지 확인한다(이 과정을 CORS preflight)라고 한다.
3. OPTIONS 헤더를 통해 전송을 허용하는 정보를 확인하고 리소스를 공유한다.

다음 시간에는 공격방법을 알아보겠습니다.

출처
https://www.dreamhack.io
https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy
https://www.youtube.com/watch?v=6QV_JpabO7g