[Web hacking] Mitigation: Same Origin Policy

해당 포스팅은 https://dreamhack.io/lecture/roadmaps/1?obj=7를 참고하여 작성하였으며 공부 목적으로 작성하였습니다.

Same Origin Policy(SOP)

---

브라우저는 쿠키를 인증 정보로 사용하기 위해 브라우저 내부에 보관하며 클라이언트가 웹 서비스에 접속을 요청할 때 쿠키 정보를 HTTP 요청에 포함시켜 전달하는 방식으로 동작한다.

하지만, 치명적인 문제가 존재한다. 쿠키를 HTTP 요청에 포함시켜 전달하는 특징은 직접 접속하는 것에만 한정되는 것이 아니라 웹 리소스를 통해 간접적으로 타 사이트를 접근할 때도 사용한다는 특징을 지니고 있다.

이러한 특징을 악의적인 페이지가 클라이언트 권한을 이용해서 타 사이트로 HTTP 요청을 보낼 경우 클라이언트 정보 탈취가 가능해진다.

이러한 문제를 방지하기 위해 등장한 보안 메커니즘이 동일 출처 정책(SOP)이며 Origin이 일치하지 않을 경우 데이터를 읽지 못한다.

❓

어떻게 브라우저가 가져온 정보인 Origin을 구분할까? 일반적으로 오리진은 프로토콜(Protocol, Scheme), 포트(Port), 호스트(Host)로 구성된다. SOP의 경우 위의 3가지 구성요소가 모두 일치해야 동일한 오리진으로 판단한다

*하지만, Origin은 다르더라도 데이터를 쓰는 것은 문제없이 동작한다.

Cross Origin Resource Sharing(CORS)

---

CORS는 HTTP 헤더에 기반하여 Cross Origin 간에 리소스를 공유하는방법으로 간단히 말해 자원을 공유하기 위해 사용할 수 있는 공유 방법을 뜻한다.

구체적으로 SOP가 적용되어 있는 브라우저의 경우 <img>, <style>, <script> 태그는 SOP의 영향을 받지 않지만 나머지의 코드는 영향을 받기 때문에 다른 출처의 데이터 처리가 불가능해진다.

만약, 다른 출처의 데이터 처리가 필요한 상황에서는 SOP를 완화하여 다른 출처의 데이터를 처리하거나 CORS를 적용하여 해결할 수 있다.

실제 동작은 다음 과정을 이루어진다.

1. 발신측에서 CORS 헤더를 설정하여 요청한다

2. 수신측에서 헤더를 구분해 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 설정한다.

웹 리소스를 요청하는 코드는 다음과 같다.

xhr = new XMLHttpRequest(); // XMLHttpRequest 객체 생성
xhr.open('POST', 'https://theori.io/whoami'); // Target URL로 Post 요청
xhr.withCredentials = true; // 쿠키 정보도 보내겠다
xhr.setRequestHeader('Content-Type', 'application/json'); // Body를 json 형태로 보내겠다
xhr.send("{'data':'WhoAmI'}"); // xhr 객체를 사용하여 요청 수행

코드를 실행한 후 발신측의 HTTP 요청은 다음과 같은데 주목해야할 부분은 OPTIONS 이다. 코드에서 분명 HTTP 요청을 보냈으나 OPTIONS 메소드를 가진 HTTP요청이 전달된 것을 알 수 있으며 이를 CORS preflight라고 한다.

OPTIONS /whoami TTP/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/

❓

CORS preflight 란? 기본적으로 브라우저는 cross-origin 요청을 전송하기 전 OPTIONS 메소드로 preflight를 전송한다. 이때 Response 으로 Access-Control-Allow-Origin과 Access-Control-Allow-Methods가 넘어오는데 이는 서버에서 어떤 origin과 method를 허용하는지 브라우저에게 알려주는 역할을 한다. 브라우저가 결과를 성공적으로 확인한 경우 cross-origin 요청을 보내 이후 과정을 계속 진행한다.

Response의 Header과 의미는 다음과 같다.

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

오류, 잘못된 점 또는 궁금한 점이 있으시다면 댓글 남겨주세요❗

Uploaded by N2T