1-5. CORS - Credentialed Request

개발자가 CORS 정책을 잘못 설정하는 경우

XSS, CSRF 등의 보안 위협이 존재할 가능성이 있다고 하였다.

 

취약한 CORS 구성을 알아보기 전,

자격증명(Credential)이 전달되는 경우의 CORS 요청에 대해 어떻게 처리해야 하는지 간략히 짚고 넘어간다.

 

 

Credentialed Request  

Credential 정보로 취급되는 것

정확히 Credentialed Request로 취급되는 것은 아래 두 가지 경우다.

🤍 쿠키를 포함한 요청

🤍 헤더에 Authorization 항목이 포함된 요청

 

이전 글인 1-2에서 XHR 객체를 통해 Cross-origin 요청을 하는 코드를 살펴보았다.

var httpRequest = new XMLHttpRequest();
var url = "https://api.example.com/api/.../..."
var data;
httpRequest.onreadystatechange = function() {
    if(httpRequest.readyState == 4 && httpRequest.status == 200) {
        data = JSON.parse(httpRequest.responseText)
    }
};

httpRequest.open('GET', url);
httpRequest.send();

웹 브라우저는 기본적으로 쿠키를 포함해 HTTP 요청을 하지만,

위처럼 자바스크립트에서 XHR를 통해 Cross-origin 요청 시 쿠키를 포함하지 않는다.

그러나 요청 단과 응답 서버에서 설정만 한다면 크리덴셜을 포함한 요청 및 응답이 가능하다.

 

 

Javascript 옵션 설정

var httpRequest = new XMLHttpRequest();
...
httpRequest.open('GET', url);
httpRequest.withCredentials = true;
httpRequest.send();

XHR 객체의 withCredentials 옵션을 true로 설정한다.

이렇게 하면 쿠키를 비롯한 자격증명과 함께 요청하겠다는 명시가 된다.

 

 

서버 응답 헤더 추가

Access-Control-Allow-Credentials 헤더(이하 ACAC)를 True로 설정해주면 아래와 같이 응답하게 된다.

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Credentials: True

헤더 설정에서 주의해야 할 점

응답 헤더가 아래 조건을 만족하지 않으면 

Response가 전달은 되지만 웹 브라우저가 차단하여 Response에 접근할 수 없다.

또한 예외사항으로, Preflight Request는 credential 정보를 포함할 수 없다.

1	Access-Control-Allow-Credentials	true로 설정되어야 함	Required
2	Access-Control-Allow-Origin	와일드카드(*)를 제외한 값	Required
3	Access-Control-Allow-Methods	지정 시, 와일드카드(*) 사용 불가	Optional  (Preflighted Request가 아니면 불필요)
4	Access-Control-Allow-Headers	지정 시, 와일드카드(*) 사용 불가	Optional  (Preflighted Request가 아니면 불필요)

 

개발 언어 및 환경별 ACAC 헤더

아래 글과 같이 언어별 헤더 설정 방식대로 해주면 된다.

1-3. 환경별 CORS Response 헤더 설정(Node / .NET / Java)