YQL과 JSONP를 사용한 Cross Domain Ajax Request

웹브라우저들은 보안을 위해 자바스크립트로 다른 도메인을 가진 웹페이지에 접근하는 것을 못하도록 막아놓았습니다. 이것을 Same Origin Policy(SOP, http://en.wikipedia.org/wiki/Same_origin_policy)라고 합니다.

예를 들어 http://www.abc.com/a.html 에서 http://www.abc.com/b.html 또는 http://www.abc.com/sub/b.html 과 같이 도메인이 같은 웹페이지로는 Ajax request를 할 수 있습니다. 그러나 http://home.abc.com/b.html 이나 http://www.abcd.com/b.html 과 같이 도메인이 다르거나 http://www.abc.com:8080/b.html 과 같이 도메인은 같지만 포트번호가 다른 경우, https://www.abc.com/b.html 처럼 프로토콜이 다른 경우에는 Ajax request를 할 수가 없습니다.

여러 다른 도메인을 가진 웹사이트의 리소스를 활용해서 다양한 매시업을 만들고 싶은 경우 이러한 제약은 큰 어려움으로 다가옵니다. PHP와 같은 서버사이드 스크립트를 사용할 때에는 이런 제약이 없지만 자바스크립트만으로 작업할 때는 문제가 됩니다.

네이버나 다음, 구글에서 제공하는 Open API를 사용해서 통합검색 프로그램을 만들고 싶을때 자바스크립트만 사용할 수 있는 환경이라면 어떻게 해야할까요? 내 웹사이트의 도메인은 http://codefactory.kr 인데 API를 제공하는 곳의 도메인은 http://openapi.naver.com 등과 같이 내 웹사이트와는 도메인이 다릅니다. 따라서 SOP 제약에 따라 자바스크립트로 Ajax request를 날리면 해당 URL에서 제공하는 XML이나 JSON 데이터를 받아올 수가 없습니다.

이 것을 해결할 수 있는 방법이 두 가지(제가 알고 있는 방법은..)가 있습니다. 첫 번째는 YQL을 사용하는 방법이고 두 번째는 JSONP를 사용하는 방법입니다.

두 방법 모두 SOP 제약을 넘어 Cross Domain Ajax Request를 할 수 있게 해주는 신기하면서도 편리한 방법입니다. 다만, YQL은 직접 해당 도메인에 request를 하는 것이 아니라 야후! 의 서버를 거쳐서 가는 방법이라 혹시 야후! 의 YQL 서버에 문제가 생기거나 서비스가 종료된다면 사용을 못한다는점, JSONP는 ajax request의 결과물이 JSON 일때만 사용할 수 있다는 점을 감안하셔야 합니다.

두 방법의 구체적인 사용법은 아래를 참고해 주십시오

  1. YQL 사용법 – http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/
  2. JSONP 사용법 – http://api.jquery.com/jQuery.getJSON/ (이 문서에서 jsonp 검색)

 

 

  • http://www.yahoo.com/ Marlien

    People normally pay me for this and you are gvniig it away!