HTML5 CORS 완벽 가이드: 웹 브라우저에서 다른 도메인의 제한된 리소스 접근하기

CORS(교차 출처 리소스 공유)란 무엇인가?

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 웹 브라우저에서 다른 도메인에 있는 제한된 리소스에 접근할 수 있도록 허용하는 메커니즘입니다.

기본적으로 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 적용하여, 현재 페이지와 다른 도메인 간의 리소스 요청을 차단합니다. 하지만 CORS를 활용하면 서버가 명시적으로 특정 외부 출처의 접근을 허용함으로써, 안전하게 교차 도메인 통신이 가능해집니다.

CORS의 실제 동작 예시

대표적인 예로 HTML5 데모 섹션에서 HTML5 비디오 플레이어를 클릭하는 경우를 들 수 있습니다. 이때 애플리케이션은 사용자에게 카메라 권한을 요청하며, 사용자가 권한을 허용했을 때만 웹 애플리케이션이 카메라에 접근할 수 있습니다. 권한이 거부되면 카메라는 열리지 않습니다. 이처럼 CORS는 사용자의 명시적 동의를 기반으로 민감한 리소스 접근을 제어하는 중요한 보안 장치 역할을 합니다.

브라우저별 CORS 지원 방식

각 주요 브라우저는 다음과 같은 방식으로 CORS 요청을 처리합니다.

Chrome, Firefox, Opera, Safari: XMLHttpRequest2 객체를 사용합니다.
Internet Explorer(구버전): 유사한 기능을 하는 XDomainRequest 객체를 사용합니다.

따라서 모든 브라우저에서 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 객체에는 withCredentials 속성이 존재합니다. 이 속성이 있다면 표준적인 방식으로 CORS 요청을 생성합니다.
XDomainRequest 폴백(Fallback): 구버전 Internet Explorer의 경우 XDomainRequest 객체를 대신 사용하여 CORS 요청을 처리합니다.
미지원 브라우저 처리: 두 객체 모두 사용할 수 없다면 CORS를 지원하지 않는 브라우저이므로 null을 반환하고, 호출부에서 에러를 발생시킵니다.

마무리

CORS는 최신 웹 개발에서 API 연동, 외부 리소스 로딩 등 교차 도메인 통신에 필수적인 기술입니다. 서버 측에서는 응답 헤더에 Access-Control-Allow-Origin과 같은 CORS 관련 헤더를 설정해야 하며, 클라이언트 측에서는 위 예제처럼 브라우저 호환성을 고려한 요청 코드를 작성하는 것이 좋습니다.