[자바스크립트] 크로스도메인 서브도메인 접근방법, document.domain

Last Modified : 2017-12-11 / Created : 2015-01-08

49,789
View Count

주소 복사하기

동일 출처 정책에 따라 외부 URL 및 도메인을 통한 DOM객체의 접근에 제한을 가지게 됩니다. 하지만 서브도메인을 사용해 중요한 소스를 서로 공유 할 필요가 있다면 아래 방법을 사용하여 이 문제를 해결할 수 있습니다.

# 서브 도메인간의 통신 해결방법, 크로스 도메인

이 방법은 서브 도메인(sub domain)인 두 사이트가 정보를 교환, 통신하기 위한 경우에 이를 해결하기 위한 방법입니다. 만약 도메인이 모두 다른 경우라면 jsonp(제이슨 패딩)등의 다른 방법을 사용해야 할 것입니다... 아래는 서브 도메인간의 크로스도메인을 하기 위한 간략한 사용방법입니다.

document.domain = 'webisfree.com';

이 방법은 서브 도메인을 사용중이나 하나의 호스트를 사용하고 있음을 설정하는 방법으로 document 객체의 domain 속성에 값을 변경하여 사용합니다. 이렇게 각 사이트의 호스트 주소를 동일하게 맞추면 크로스도메인 정책에 위배되지 않아 서로 통신이 가능합니다.

아래는 스크립트에 동일한 도메인 주소를 설정하여 서브도메인의 DOM접근을 가능하게 바꾼 간단한 예제입니다.

만약 위처럼 서로의 접근을 가능하게 하려면 당연히 두 사이트의 소유자가 같거나 이해관계, 협의를 통하여 이루어져야 할 것입니다.

# 크로스도메인 예제보기

아래의 사이트 a, b는 동일한 호스트를 가지고 있으나 서브 도메인이 달라 CORS 이슈를 가지고 있습니다. 이를 해결하기 위해 코드를 각각 추가합니다.

! abc.webisfree.com의 URL 주소, 사이트 A

해당 웹사이트에 아래처럼 도메인을 맞추는 스크립트를 추가합니다.

// Site A
document.domain = 'webisfree.com';

해당 코드의 스크립트를 추기, 실행합니다. 이제 통신할 다른 사이트 역시 댕일하게 추가합니다.

! def.webisfree.com의 URL 주소, 사이트 B

나머지 사이트 역시 도메인값을 맞추어줍니다.

// Site B
document.domain = 'webisfree.com';

모든 과정이 끝났습니다. 이 두 사이트의 데이터를 서로 통신할 수 있게되었습니다.

한번 더 말하지만, 서브도메인이 상이한 경우에 사용할 수 있는 방법이며 보통 다른 서브도메인을 이용한 frame 또는 iframe 태그나 새창을 불러올때... 아니면 비동기식으로 다른 서브도메인 정보를 불러올 경우가 있을 수 있겠습니다.

# 크로스도메인은 언제필요한가

참고로, 크로스도메인이 필요한 경우는 언제일까요? 아래와 같은 몇 가지의 예가 있습니다.