네트워크에서 도메인은 독립적으로 운영되는 단위이며, 서로 다른 도메인이 자원을 공유하기 위해서는 트러스트 관계를 설정해야 합니다. 이는 두 도메인이 서로 필요한 자원을 공유하고 관리할 수 있게 해줍니다. 웹 환경에서는 A 사이트의 JavaScript 코드가 B 사이트에 접근하려 할 때 보안 문제로 인해 브라우저는 이를 기본적으로 차단합니다.
브라우저는 동일 출처 정책(Same-Origin Policy)을 통해 한 도메인의 스크립트가 다른 도메인의 문서 속성을 가져오거나 변경하는 것을 방지합니다. 즉, 요청된 URL의 도메인이 현재 웹 페이지의 도메인과 일치해야 합니다. 하지만 동적 스크립트 요소를 삽입하는 것은 이 제한을 피해갈 수 있습니다.
서버 측 XmlHttpRequest 프록시를 사용한 도메인 간 통신
클라이언트 측에서 직접 AJAX를 사용하여 도메인 간 자원에 접근할 수 없지만, 서버 측에서는 이러한 제한이 없습니다. 따라서 서버 측에서 프록시 역할을 수행하도록 하고 클라이언트 측에서는 그 결과를 받아 처리하면 됩니다.
<html>
<head>
<title>XMLHttpRequest 프록시 예제</title>
<script type="text/javascript">
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/proxy?url=http://externalapi.com/data.json', true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
}
</script>
</head>
<body onload="fetchData()">
</body>
</html>
동적 script 태그를 사용한 클라이언트 측 도메인 간 통신
서버 측 수정 없이 클라이언트 측에서 직접 도메인 간 통신을 수행하려면 <script> 태그를 사용할 수 있습니다. 이 방법은 callback 함수를 지정하여 데이터를 받습니다.
<html>
<head>
<title>동적 Script 태그 사용 예제</title>
<script type="text/javascript">
function handleResponse(data) {
alert(data.error.message);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://externalapi.com/data?callback=handleResponse';
document.body.appendChild(script);
}
</script>
</head>
<body onload="loadScript()">
<input type="button" value="데이터 로드" onclick="loadScript()">
</body>
</html>
기타 도메인 간 통신 방법
다른 도메인 간 통신 방법으로는 다음과 같은 것들이 있습니다:
- Apache의 mod_rewrite 또는 mod_proxy 모듈을 사용하여 자동으로 서버 측 프록시를 생성.
- 동적으로 iframe을 생성하여 도메인 간 호출 가능.
JavaScript 및 Ajax 도메인 간 통신 해결 방안
Ajax와 JavaScript 간 도메인 간 통신에는 여러 가지 방법이 있으며, 상황에 따라 적절한 방법을 선택해야 합니다:
- 본 도메인과 하위 도메인 간 통신:
www.example.com과sub.example.com - 다른 도메인 간 통신:
www.example.com과www.another.com- iframe 사용 - 다른 도메인 간 통신:
www.example.com과www.another.com- XMLHttpRequest 프록시 사용 - 다른 도메인 간 통신:
www.example.com과www.another.com- 동적 스크립트 생성 사용
특정 상황에 따른 해결 방안:
- 하위 도메인 간 통신 시 iframe 내부와 외부 모두
document.domain = "example.com"설정. - 두 개의 다른 도메인 간 통신 시 window.location.hash를 활용하여 데이터 전달.
- 하나의 도메인만 조작 가능한 경우 서버 측 프록시를 사용하여 데이터를 중개.
- 두 도메인 모두 조작 가능한 경우
<script>태그를 사용하여 JS 파일 주입.