HTML5 CORS 완벽 정리: 교차 출처 리소스 공유(CORS)의 개념과 구현 방법

HTML5 CORS란 무엇인가?

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹 브라우저에서 다른 도메인에 있는 제한된 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 기본적으로 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 적용하여 다른 도메인의 리소스 요청을 차단하는데, CORS를 사용하면 서버가 명시적으로 허용한 경우에 한해 이러한 제약을 우회할 수 있습니다.

CORS의 대표적인 활용 예시

예를 들어 HTML5 데모 섹션에서 비디오 플레이어를 클릭하면 카메라 접근 권한을 요청하는 화면이 나타납니다. 사용자가 권한을 허용해야만 웹 애플리케이션이 카메라를 열 수 있고, 거부하면 카메라에 접근할 수 없습니다. 이처럼 CORS는 사용자 동의와 보안 정책을 기반으로 안전하게 외부 리소스를 다룰 수 있게 해줍니다.

브라우저별 CORS 지원 현황

Chrome, Firefox, Opera, Safari는 XMLHttpRequest2 객체를 사용하여 CORS 요청을 처리합니다. 반면 구버전 Internet Explorer는 유사한 역할을 하는 XDomainRequest 객체를 별도로 제공했습니다. 참고로 XDomainRequest는 현재 폐기(deprecated)되었으며, 최신 브라우저에서는 표준 XMLHttpRequest 또는 fetch API를 통해 CORS를 일관되게 지원합니다.

크로스 브라우징을 위한 CORS 요청 생성 함수

아래 코드는 브라우저 환경에 따라 적절한 객체를 선택해 CORS 요청을 생성하는 범용 함수입니다.

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();

    if ("withCredentials" in xhr) {
        // XMLHttpRequest 객체에 "withCredentials" 속성이 있는지 확인합니다.
        // "withCredentials"는 XMLHttpRequest2 객체에만 존재합니다.
        xhr.open(method, url, true);
    }
    else if (typeof XDomainRequest != "undefined") {
        // 그렇지 않으면 XDomainRequest 여부를 확인합니다.
        // XDomainRequest는 IE에만 존재하며, IE의 CORS 요청 방식입니다.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // 그 외의 경우, 해당 브라우저는 CORS를 지원하지 않습니다.
        xhr = null;
    }
    return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
    throw new Error('CORS not supported');
}

코드 동작 방식 설명

이 함수는 먼저 withCredentials 속성의 존재 여부를 확인하여 표준 XMLHttpRequest2 객체를 사용할 수 있는지 판별합니다. 만약 해당 속성이 없고 XDomainRequest가 정의되어 있다면, Internet Explorer 환경으로 간주하고 XDomainRequest 객체를 생성합니다. 두 조건 모두 충족되지 않으면 해당 브라우저는 CORS를 지원하지 않으므로 null을 반환하고, 호출부에서 에러를 발생시킵니다.

이러한 크로스 브라우징 처리 방식은 과거에는 필수적이었지만, 현재는 모든 주요 브라우저가 표준 XMLHttpRequest와 fetch API를 지원하므로 대부분의 경우 간결한 표준 코드만으로 CORS 요청을 구현할 수 있습니다.