행복한 아빠

Cross domain JSON 원리 본문

웹기술들

Cross domain JSON 원리

행복한아빠 2009. 12. 9. 08:42

현재 페이지의 스크립트에서 다른 서버로 Ajax 호출을 시도하는 것은 허용되지 않습니다. 이것을 cross domain JSON을 이용하여 해결할 수 있는데 다음 URL에서 cross domain JSON을 이용한 원격 호출 방법과 간단한 JavaScript 유틸리티를 제시합니다.

그럼 어떻게 JSON을 이용하여 다른 서버의 서비스를 호출할 수 있는지 살펴보겠습니다. 원리를 알면 쉽게 나에게 적합한 유틸리티를 만들수 있을 겁니다.

스크립트 태그

다음은 스크립트 태그입니다. 보통 아래와 같이 사용합니다.

test.js

alert('OK');


test.html

...
<script type="text/javascript" src="js/test.js"></script>
...


그럼 js 디렉토리에 아래와 같은 JavaScript를 생성하는 jsp를 만들고 스크립트 태그에 다음과 같이 수정해봅니다.

test.jsp

alert('<%=System.getProperty("os.name")%>');


test.html

...
<script type="text/javascript" src="http://userhost:port/js/test.jsp"></script>
...


System.getProperty("os.name")은 Host의 OS 이름을 가져오는 Java 코드이고 서버에서 실행되는 코드입니다.
위와 같이 하면 해당 서버의 OS 이름이 나타날 겁니다.


스크립트 src의 URL에 제약이 없다

위의 test.jsp가 이 서버말고 다른 서버(도메인)에 있더라도 동작합니다.
그럼 test.jsp를 다른 서버에 올려놓고 다음과 같이 스크립트 태그를 수정해 봅니다.

test.html

...
<script type="text/javascript" src="http://remote:port/js/test.jsp"></script>
...


원격 서버의 OS 이름이 나타날 겁니다.

그럼 test.jsp를 다음과 같은 스크립트를 생성하도록 바꾸고, test.html에는 getHostOs라는 JavaScript 함수를 만들어 놓습니다.

(내서버) test.html

...
<script type="text/javascript">
function getHostOs(response) {
alert(response.osName);
}
</script>
<script type="text/javascript" src="http://remote:port/js/test.jsp"></script>
...



(원격서버) test.jsp

getHostOs({osName:'<%=System.getProperty("os.name")%>'});


7번째 줄 javascript 태그에서 원격에서 생성된 스크립트를 실행합니다. 원격 서버에서 생성된 스크립트를 보니 JSON 데이터를 만들고 그걸 파라메터로 getHostOs 라는 함수를 호출하는군요. 이 함수는 이미 페이지에 준비되어 있습니다. (callback 함수라고 합니다.) 즉 아래와 동일한 결과죠.

...
<script type="text/javascript">
function getHostOs(response) {
alert(response.osName);
}
</script>

<script type="text/javascript">
getHostOs({osName:'Linux'});
</script>
...


여기서 관심있게 볼 부분은 8번째 줄 {osName:'Linux'}이 원격에서 생성한 JSON 데이터라는 것입니다.


실전
원격의 JSON 데이터를 가지고 오기 위해서는 <script type... src="..."></script> 부분이 필요합니다.
원격 서비스 호출을 하는 JavaScript 유틸리티를 만들려면 원격 호출할 때마다 위 방식의 스크립트 태그가 필요하니 동적으로 생성하면 됩니다.

...
scriptObj = document.createElement("script");
scriptObj.setAttribute("type", "text/javascript");
scriptObj.setAttribute("charset", "utf-8");
scriptObj.setAttribute("src", remoteUrl);
...


원격 서비스마다 응답 JSON을 처리하는 방법이 다르므로 callback 함수 이름은 요청마다 다르게 해주어야 하며 원격 서버는 callback 이름을 파라메터로 받아 그 함수이름으로 JSON을 파라메터로 넘기는 스크립트를 생성해주어야 합니다. 즉 callback 함수로 감싸면 됩니다.

http://www.xml.com/pub/a/2005/12/21/json-dynamic-script-tag.html  기사에 있는 예제 http://www.xml.com/2005/12/21/examples/jsr_class.zip 소스를 참고하시면 JSON을 이용한 자신만의 cross domain 호출 유틸리티를 만들 수 있을 겁니다.

다른 Cross domain Ajax 방법도 참조하세요.



4 Comments
  • 프로필사진 데꾸벅 2009.12.14 13:04 신고 요구응답형 자바스크립트 패턴이죠~~!! 비단 그 뿐만이 아니라 img src 에도 제약이 없습니다.
    그런원리로 CSS의 background 프로퍼티를 사용한 크로스-도메인 CSS도 가능합니다.
    일례로 웹메일 확인했는지 여부를 img 파일로 만들어서 사용했던것 처럼요...
    다만 apache설정에서 이러한 것들을 필터링 해준다면 cross-domain이 안될수도 있습니다.
  • 프로필사진 행복한아빠 2009.12.14 19:08 신고 답변 고맙습니다.
    트랙백 걸어서 cross domain 을 더 활용할 수 있는 경우 좀 달아주면 어떨까요 ^^
    지식은 나눌수록 커지는 것 같습니다.
  • 프로필사진 2010.04.29 13:20 자료 잘 봤습니다. 이 방식으로 만들었는데요.. 이상하게 firefox에서는 되는데(감사합니다!! ^^)... IE나 다른 브라우져에서는 안돌아가네요...왜그럴까요 ㅠㅠ
  • 프로필사진 비만타쿠미 2013.09.12 14:26 크로스도메인간 ajax요청처리를 JSONP로 해결하고는 원리가 궁금했는데, 행복한아빠님의 포스팅을 보고서야 제대로 이해가 갔습니다.
    좋은 자료 정말 감사합니다^^
댓글쓰기 폼