JS로 AJAX처럼 하기 - Cross Domain 문제해결하기 - 1

나날이 그 명성을 더해가고 있는 AJAX..
엄청나게 많은 책들과 Script API가 ajax의 사용을 점점 더 편하게 만들고 있지만 신입 프로그래머가 만나는 '서로 다른 도메인간의 ajax를 이용한 프로그램'은 힘든 과제일 거라고 생각합니다.

아주 오래전에는 JavaScript가 더 많은 일들을 해냈지만 브라우저가 업데이트되면서 보안상의 문제로 JavaScript가 할 수 있는 조금 좁아지게 됩니다. 그런 이유로 AJAX라는 멋진 기술을 사용해 보고 싶지만 다른 도메인를 가진 웹 사이트에서 제공하는 XML, JSON, RSS를 AJAX를 통해서 이용하기란 쉬운 일은 아닙니다.

우선 이러한 문제를 처리하는 가장 고전적인 방법은 프록시 페이지를 만들어서 이용하는 방법입니다.

AJAX를 통해서 '구글, 네이버, 다음'등과 같은 사이트에 직접 접근하는 것이 아니라 Proxy페이지로 접근하는 방법입니다. 가령 geminidream.net/test.html이 AJAX로 네이버가 아닌 geminidream.net/proxy.php를 접근하는 형식입니다.

proxy.php는 다른 사이트에 접근하여 fopen(http://naver.com)과 같은 코드들을 통하여 사이트에 접근하고 가져온 결과값 (XML, JSON, RSS)를 그냥 echo합니다. (다른 언어들도 방법은 똑같습니다.)
그럼 test.html은 결과적으로 외부사이트에서 제공하는 값을 AJAX를 사용해서 접근한 것과 동일한 결과값을 가져올 수 있습니다. 하지만 이러한 접근은 proxy page를 통하여 이루어 지기 때문에 자원을 사용해야 하는 아픔이 있습니다. 이런 페이지를 만들기 귀찮으시다면 서버에 설정을 하실수도 있습니다. resin같은 경우 아래와 같이 설정을 하시면 ajax코드로 외부 도메인을 넘나 드실 수 있습니다.

<web-app id="/" document-directory="/xxx/ttt/zzz">
<error-page>
  <error-code>404</error-code>
   <location>/404.html</location>
  </error-page>
  <servlet>
   <servlet-name>http-proxy</servlet-name>
   <servlet-class>com.caucho.servlets.HttpProxyServlet</servlet-class>
    <init>
     <host>http://openapi.naver.com</host>
    </init>
   </servlet>
  <servlet-mapping url-pattern="/naveropenapi/*" servlet-name="http-proxy"/>
</web-app>

역시 작동 원리는 동일합니다.

만약 원하시는 서비스가 외부데이터를 가져와서 화면에 보여주는것 이라면 위에 방법처럼 간단하게 해결하시면 됩니다. 하지만 구글에드센스와 같이 우리가 제공하는 js를 웹페이지에 포함시기키만 한다면 우리가 원하는 무언가가 서비스되는 형태를 원하신다면 다른 방법으로 접근하셔야 합니다.

수많은 도메인을 가진 사용자들이 원하는 페이지에
<script language="JavaScript" src="geminidream.net/kk.js"></script>
라고 적기만 하면 무언가가 진행되는 거죠. proxy 설정을 할 수 없는 수많은 사이트들이 존재하기 때문에 이러한 방식으로 서비스하는 것은 제법 괜찮은 방법입니다.

이런 형태의 서비스를 제공하기 위한 많은 방법이 있습니다.
가장 편안한 방법은
<script language="JavaScript" src="geminidream.net/kk.php"></script>
라는 형태입니다.
보이시나요? .js가 아니라 .php입니다.
kk.php를 아래와 같이 만드시면 됩니다.

<?
 //무언가를 하고
?>
document.write('js service')

이런 형태가 정상적으로 작동하는 것에 대해서 전 많이 놀랐던 기억이 납니다.
확장자는 아무상관 없습니다. 그 내용이 JavaScript구문이면 정상적으로 작동합니다. (야후의 블로그 랭킹은 이런 방식으로 서비스 됩니다.)
이런 방법을 이용해서 document.write("<iframe src='....'></iframe");
이라는 형태로도 서비스를 제공할 수도 있습니다. 알라딘의 TTB2가 이와 비슷하게 서비스 되고 있습니다.

이런 형태가 나쁘지는 않지만 웬지 아쉬움이 있습니다. 기능상 문제가 없으니 그냥도 괜찮지만 웬지 떨떠름합니다. 그냥 좀 더 멋있어 보이는(^^) 코드로 만들고 싶습니다.
<script language="JavaScript" src="geminidream.net/kk.js"></script>
쓰고 kk.js는 ajax를 통해서 geminidream.net에서 이미 제공하는 openapi에 접근해서 값을 가져오고 화면에 보여주는 형태로 만드는 거죠. kk.js가 geminidream.net에 있기는 하지만 실행은 kk.js를 포함하는 도메인에서 이루어 지기 때문에 kk.js에서 ajax로 geminidream.net에 바로 접근하는 것은 보안에러를 발생시킵니다. 이제부터 우리가 할 일은 이러한 보안에러를 살짝 피해가는 방법을 고민해 보는 것입니다.

ps)
글이 생각보다 길어져서 다음 포스트에 집중적으로 corss doamin을 벗어나서 구글 에드센서처럼 서비스 할 수있는 방법을 설명하겠습니다.
이 글의 아래쪽에는 샘플 소스가 있습니다. 실제로 이 포스트에서 소스보기를 하시면
<script language="JavaScript"  src="http://geminidream.net/gemini/sample/ajax/extern_json/makeJson/geminidream.js"></script>
라고 적은 부분이 있습니다. 이 js는 포스트에서 title에 있는 값을 naver에서 검색한 값을 화면에 보여주는 js입니다.

head > title에 있는 내용으로 naver에서 검색된 결과값을 보여줍니다.