자바스크립트 크로스 도메인 데이터 교환

10 Sep 2023

javascript

자바스크립트는 웹 개발에서 널리 사용되는 프로그래밍 언어입니다. 하지만 웹 애플리케이션에서 다른 도메인의 데이터를 가져오는 크로스 도메인 데이터 교환(Cross-Domain Data Exchange)은 보안 상의 이유로 기본적으로 제한되어 있습니다. 그러나 자바스크립트에서도 크로스 도메인 데이터를 교환하기 위한 다양한 방법을 제공하고 있습니다.

1. JSONP (JSON with Padding)

JSONP는 크로스 도메인 데이터 교환을 위해 가장 널리 사용되는 방법 중 하나입니다. 이는 페이지에 동적으로 <script> 태그를 추가하여 다른 도메인의 데이터를 가져오는 방식입니다. 다른 도메인 서버에서는 JSON 데이터를 특정 함수로 래핑한 형태로 전송합니다. 이 때, 클라이언트 측에서는 해당 함수를 정의하고 서버에서 온 데이터를 콜백 함수로 전달 받아 처리합니다.

function handleData(data) {
    // 데이터 처리
}

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleData';
document.body.appendChild(script);

이 방법은 일반적으로 서버 측의 지원이 필요하며, 클라이언트 측에서는 결과적으로 신뢰할 수 없는 코드가 실행될 수 있다는 단점이 있습니다.

2. 크로스 오리진 리소스 공유 (CORS)

CORS는 서버 측에서 클라이언트에게 허용되는 도메인들을 명시적으로 설정하는 방법입니다. 이를 통해 다른 도메인의 요청을 허용하고, 클라이언트 측에서도 웹 애플리케이션 자체에서 해당 도메인들을 사용하여 데이터를 교환할 수 있습니다.

서버에서는 HTTP 응답 헤더에 Access-Control-Allow-Origin을 포함하여 요청을 허용할 도메인을 지정합니다. 클라이언트에서는 AJAX 요청을 보낼 때 해당 도메인이 허용되는지 확인하고, 그에 따른 조치를 취합니다.

// 서버 응답 헤더 설정
Access-Control-Allow-Origin: https://allowed-domain.com

// 클라이언트에서의 AJAX 요청
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
    // 데이터 처리
};
xhr.send();

CORS를 사용하면 더욱 간편하고 안전하게 크로스 도메인 데이터를 교환할 수 있습니다. 하지만 서버 설정이 필요하고, 사용자 브라우저가 지원하는 경우에만 사용할 수 있다는 점을 염두에 두어야 합니다.

3. 프록시 서버

프록시 서버는 클라이언트와 서버 사이에 중간에서 요청과 응답을 처리하는 서버입니다. 다른 도메인에서 데이터를 가져와야 할 때, 프록시 서버를 사용하여 해당 데이터를 먼저 가져오고 클라이언트에 전달하는 방식을 사용할 수 있습니다. 이는 클라이언트에서는 프록시 서버를 통한 요청으로만 데이터를 교환하므로 크로스 도메인 제약을 우회할 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://my-proxy-server.com/data?target=https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.response);
        // 데이터 처리
    }
};
xhr.send();

프록시 서버를 사용하면 클라이언트와 서버 사이에서 데이터를 전달할 수 있으므로, 크로스 도메인 제약을 우회할 수 있습니다. 단, 프록시 서버를 구성하고 관리해야 하므로 일정한 비용과 추가적인 작업이 필요합니다.

이상으로 자바스크립트에서 크로스 도메인 데이터 교환을 위한 세 가지 방법을 살펴보았습니다. 각 방법은 서로 다른 장단점을 가지고 있으므로 상황에 맞게 사용하시면 됩니다. 크로스 도메인 데이터 교환을 효과적으로 활용하여 웹 애플리케이션의 기능과 사용자 경험을 향상시키세요!