[Dreamhack] Mitigation: Same Origin Policy

Same Origin Policy(SOP)

브라우저는 인증 정보로 사용되는 쿠키를 보관하고, 웹 서비스에 접속할 때 해당 쿠키를 함께 전달합니다

이는 악의적인 페이지가 클라이언트의 권한을 이용해 대상 사이트에 요청을 보내어 정보 유출과 같은 보안 위협이 발생

따라서 브라우저는 동일 출처 정책(Same Origin Policy, SOP)을 사용하여 악의적인 페이지에서 가져온 데이터를 읽을 수 없도록 보호합니다.

 

Orgin (오리진) 구별법

Origin 구성

• 프로토콜 (Scheme)
• 포트
• 호스트

Origin 구분

 

SOP는 Cross Origin이 아닌 Same Origin 에서만 정보를 읽을 수 있도록 해줍니다

 

JS를 통해서 SOP를 테스트 하는 코드

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을 통해 데이터를 읽는 것에는 오류가 발생하지만 쓰는것에는 오류가 발생하지 않습니다

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

 

Cross Origin Resource Sharing (CORS)

CORS는 이미지, 자바스크립트, CSS 등의 리소스를 불러오는 태그는 SOP의 영향을 받지 않습니다
브라우저에서는 SOP를 적용하여 다른 출처의 데이터를 처리하는 것이 제한된다

하지만 교차 출처 리소스 공유(CORS)를 사용하면 HTTP 헤더를 추가하여 교차 출처의 자원을 공유할 수 있습니다
또한, CORS를 대체하는 JSON with Padding(JSONP) 방법도 있습니다

 

CORS는 HTTP 헤더에 기반하여 Cross Origin간에 리소스를 공유하는 방법입니다

발신측에서 CORS 헤더를 설정해 요청하면 수신측에서 헤더를 구분해 정해진 규칙에 맞게 데이터를 가져갈 수 있습니다

 

웹 리소스 요청 코드

/*
    XMLHttpRequest 객체를 생성합니다. 
    XMLHttpRequest는 웹 브라우저와 웹 서버 간에 데이터 전송을
    도와주는 객체 입니다. 이를 통해 HTTP 요청을 보낼 수 있습니다.
*/
xhr = new XMLHttpRequest();
/* https://theori.io/whoami 페이지에 POST 요청을 보내도록 합니다. */
xhr.open('POST', 'https://theori.io/whoami');
/* HTTP 요청을 보낼 때, 쿠키 정보도 함께 사용하도록 해줍니다. */
xhr.withCredentials = true;
/* HTTP Body를 JSON 형태로 보낼 것이라고 수신측에 알려줍니다. */
xhr.setRequestHeader('Content-Type', 'application/json');
/* xhr 객체를 통해 HTTP 요청을 실행합니다. */
xhr.send("{'data':'WhoAmI'}");

발신측의 HTTP 요청

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/

서버 응답

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

응답 결과

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

위 과정을 마치면 브라우저는 수신측의 응답이 발신측의 요청과 상응하는지 확인하고

그때야 비로소 POST 요청을 보내 수신측의 웹 리소스를 요청하는 HTTP 요청을 보냅니다