jQuery의 JSONP을 사용한 크로스도메인간 통신

웹은 Same origin policy이 동일한 도메인상의 요청만 가능하도록 제한하였지만,
도메인간 데이터 통신으로부터 다이나믹한 웹구현을 위한 방법으로 JSONP가 나오게 된것이다.

jQuery의 ajax를 이용한 두가지 jsonp 요청 방법을 지금부터 소개 하겠습니다.

첫번째, 요청 URL뒤에 ?callback=? 추가하여 jsonp 요청 구현하기

jQuery 1.2부터는 JSONP 호출에 대한 네이티브 지원이 제공되고 있다. JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 있으며 JSON 콜백은 url?callback=? 라는 구문을 사용하여 지정할 수 있다.

$.getJSON() 방식을 살펴보면 url 맨 끝에 callback=이라는 문자열과 함께 실제 함수 이름 대신 ? 기호를 콜백 함수 이름으로 입력하는 것을 볼 수 있다.

이는 jQuery가 ? 기호를 인라인 함수를 호출하는 생성된 함수 이름(예:jsonp1234568416)으로 바꾸기 때문이다. 굳이 ? 을 적을 필요는 없고 따로 처리하는 콜백 함수가 있다면 해당 함수의 이름을 적어줘도 무방하다. (익명 메소드로 바로 처리할 경우 반드시 ? 를 써줄 것)

Client

$.getJSON("https://codejs.mycafe24.com/jsonp.json?callback=?",
  function(data) {
    console.log('성공 - ', data);
  }
);

Server (jquery에서 생성한 익명의 callback함수명을 받아 감싸서 응답 준비를 합니다.)

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("go", "테스트");
         
    PrintWriter out = response.getWriter();
    out.write(callBack + "(" + obj.toString() + ")");
    System.out.println(callBack + "(" + obj.toString() + ")");
    out.flush();
    out.close();
}

두번째, 응답 json에 callback함수로 한번 감싸서 jsonp 구현하기

Client

$('a').click(function() {
  $.ajax({
    url: "https://codejs.mycafe24.com/jsonp.json",
    dataType: 'jsonp',
    jsonpCallback: "myCallback",
    success: function(data) {
      console.log('성공 - ', data);
    },
    error: function(xhr) {
      console.log('실패 - ', xhr);
    }
  });
});

Server

myCallback({"message":"You got an AJAX response via JSONP from another site!"});

JSONP로 ajax 호출을 하기 위해선 위와같이 함수안에 json 문자열이 들어간 형식으로 서버에서 리턴을 해줘야 가능하다.

서버에서 파라메터로 응답 JSON함수명을 생성하여 보안을 강화하는 방법도 있으니,
그부분은 http://stove99.tistory.com/10 이곳을 참고 하면됩니다.

세번째, jsonpCallback 옵션없이 사용하기.

Client

$('a').click(function() {
  $.ajax({
    url: "https://codejs.mycafe24.com/jsonp.json",
    dataType: 'jsonp',
    success: function(data) {
      console.log('성공 - ', data);
    },
    error: function(xhr) {
      console.log('실패 - ', xhr);
    }
  });
});

Server

jQuery18305806868467951786_1366340807385({"key":"value"});

jQuery18305806868467951786_1366340807385(요청시 마다 바뀜)은 jsonpCallback을 지정하지 않으면 jQuery에서 자동으로 callback 요청 매개변수를 자동 생성해서 요청한다.
요청을 받은 서버에서는 callback 매개변수값을 함수 호출 하듯 감싸서 응답하면 된다.

참고 : http://warmz.tistory.com/739

“jQuery의 JSONP을 사용한 크로스도메인간 통신”에 대한 4개의 생각

  1. 안녕하세요.. 글 읽고 댓글 남깁니다..
    3번째 방법을 해보고있는데..
    “요청을 받은 서버에서는 callback 매개변수값을 함수명으로 사용해서 응답하면 된다.”
    이 말에 잘 이해가 가지 않아서요..
    jQuery****이라는 함수명으로 생성이 되는건 이해했는데..그걸 어떻게 쓰느지 잘 모르겠습니다..

    1. 클라이언트에서는 예제 코드와 같은 형태로 json를 요청할때 jQuery*** 과 같은 파라메터명과 함께 서버로 요청한다는 뜻입니다.
      1. 서버에서 클라이언트에서 전달된 매개변수명으로 감싼 json을 응답 합니다.
      2. 서버로부터 응답이 오면 jQuery ajax 메서드는 함수 형태의 응답에서 json만을 반환 합니다.
      3. 사용자는 기존의 json 응답 처리하듯이 구현하면 됩니다.

      즉, jQuery*** 함수를 어떻게 쓰는지는 클라이언트 개발자는 깊이 몰라도 됩니다.
      크로스도메인간 처리를 구현하기 위한 방법으로 jQuery ajax 메서드 내부에서 처리하게 됩니다.

    1. 기본적으로는 외부 도메인의 요청을 허용하지 않은 경우는 보안상 안됩니다.
      하지만 타 도메인의 웹서버에서 CORS(Cross-Origin Resource Sharing) 설정을 해주면 됩니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다