Ajax cross-domain : JSONP(JSON with Padding)

현재 프로젝트를 진행하다가 Ajax cross-domain request가 필요해 찾아본 내용을 좀 정리해 봅니다.

Ajax 호출은 기본적으로 동일한 도메인만 호출이 가능합니다.

하지만, 프로젝트를 진행하다보면 다른쪽 사이트에서 데이터를 받아올 필요가 꼭 생기게 되죠..

이때 사용할 수 있는 방법이 몇가지가 있는데 이번에 JSONP라는 걸 보게됐습니다.

JSONP라는 녀석은 도메인에 제한이 없는 script 태그의 src 속성을 이용한 ajax 호출 방법입니다.

예를 들어 lz.com 사이트의 페이지에 <script src="3sung.com"/> 이런식으로 사용이 가능하다는 얘기입니다.

JSONP는 jQuery 1.2부터 지원한다고 하며 사용 방법은 2가지로 아래와 같습니다.

1.

$.getJSON("http://3sung.com/jsp/test?id=111&callback=?", 
    function(data) {
        alert(data.result + ", " + data.msg);
    }
);

2.

$.ajax({
    url : "http://3sung.com/jsp/test",
    data : "id=111",
    dataType : "jsonp",
    jsonp : "callback",
    success: function(data) {
        if(data != null)    {
            alert(data.result + ", " +  data.msg);
        }
    }
});

이 코드를 처리하기 위해 서버쪽도 처리가 필요하며 아래 코드처럼 처리해주시면 됩니다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
         
    String id = request.getParameter("id");
    String callBack = request.getParameter("callback");
 
    JSONObject obj = new JSONObject();
    obj.put("result", id);
    obj.put("msg", "test");
         
    PrintWriter out = response.getWriter();
    out.write(callBack + "(" + obj.toString() + ")");
    System.out.println(callBack + "(" + obj.toString() + ")");
    out.flush();
    out.close();
}

우선 클라이언트 코드 두 가지는 동일한 동작을 하게 되며,

주의 깊게 보실 부분은 1번의 url에 ?callback=? 부분과 2번의 dataType : "json", jsonp : "callback" 부분입니다.

여기서 넘겨준 jQuery에서 임의로 생성한 callback명을 받아 서버쪽에서는 callback(json data); 형태로 만들어 반환을 해줍니다.

이게 스크립트 형태로 작성되어 callback 함수(getJSON, ajax에 기재한 function)에

인자로 json data를 넘겨주는 방식으로 처리가 되는거 같습니다.

(정확한 메커니즘은 파악이 안되 추측성으로 작성합니다. 혹시 정확히 아시는 분은 좀 알려주세요 ^^)

처리 방법을 보면 JSON with Padding의 의미를 이해할 수 있을거 같습니다.

저는 프로젝트에서 이슈가 된 사항은 https 페이지에서 http로 ajax 요청을 하는 부분이었는데,

이 부분을 cross-domain 문제라고 생각해서 이래저래 자료를 찾다보니 이 부분은 이미 JSONP로 적용이 되어 있었습니다.

프로토콜이 달라 보안상 요청 자체를 브라우저가 blocking 하는 현상이었던거 같고,

자바 CMD에서 해당 url을 요청해서 처리하려고 진행을 하다가 요청 url에 개인정보(e-mail 등)이 포함되어 있어

상대 시스템 측에 https 처리를 요청해둔 상태입니다.

참고 : 

http://warmz.tistory.com/739
http://warmz.tistory.com/735
http://en.wikipedia.org/wiki/JSONP
http://en.wikipedia.org/wiki/Same_origin_policy