JSONP

• 이제는 보안성 때문에 사용하지 않은 예전 기술이다. 상속 비보안 문제로 인해 JSONP는 CORS로 대체되고 있다.

• JSONP는 클라이언트가 아닌, 각기 다른 도메인에 상주하는 서버로부터 데이터를 요청하기 위해 사용된다.

• CORS가 막혔을 때 정당한 REST API req 대신 JSONP를 사용하면 <script>로 감싸서 가져오기 떄문에 동일-출처 정책을 우회하는 데이터의 공유를 가능하게 한다.
  이 정책은 페이지의 출처 밖에서 가져온 미디어 DOM 요소나 XHR 데이터를 읽기 위해 자바스크립트를 실행하는 것을 허용하지 않는다.

• 사이트의 scheme, 포트 번호, 호스트 이름의 집합은 출처로 식별된다.

동작원리

• 아까도 말했든 웹 브라우저에서 실행되는 JavaScript는 동일 출처 정책(CORS)에 따라 XMLHttpRequest 등의 직접적인 HTTP 통신을 이용해 외부 출처에서 데이터를 받아오는 것이 불가능하지만, HTML <script> 요소는 외부 출처로부터 조회된 내용을 실행하는 것이 허용되어 있다.

사용법

• JSONP는 웹 브라우저의 특성을 이용해, JSON 데이터를 클라이언트가 지정한 콜백 함수를 호출하는 유효한 JavaScript 문법으로 감싸 클라이언트에 전송한다.
  클라이언트가 'parseResponse'라는 함수를 JSONP 요청의 콜백 함수로 지정하였다고 하면, 다음과 같은 HTML 태그가 문서에 삽입된다.

<script type="application/javascript"
        src="http://server.example.com/Users/1234?callback=parseResponse">
</script>

• 외부 서비스 server.example.com은 다음과 같이 JSON 데이터를 패딩하여 클라이언트에 보낸다.

parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

• 웹 브라우저는 이 데이터를 유효한 JavaScript 프로그램으로 받아들여 실행하고, 콜백 함수인 parseResponse가 실행되며 받아온 데이터를 처리할 수 있게 된다.
  당연히 그에 따라 해당 callback 함수를 서버에서 지원해줘야한다.

• 또한 응답 데이터는 Text형 이다.

즉, 정리하면 REST 요청이 아닌 <script> 호출 방식으로 뒤에 callback함수를 붙여서 요청한다.

예제코드

// 콜백 함수 이름을 생성하는 함수
function generateCallbackName() {
  return 'jsonp_callback_' + Math.floor(Math.random() * 100000);
}

// JSONP 요청을 보내고 처리하는 함수
function jsonpRequest(url, callback) {
  const callbackName = generateCallbackName();
  window[callbackName] = function(data) {
    delete window[callbackName]; // 콜백 함수 제거
    callback(data);
  };

  const script = document.createElement('script');
  script.src = `${url}&callback=${callbackName}`;
  document.body.appendChild(script);
}

// 사용 예시
const url = 'https://example.com/api/data?param=value';

jsonpRequest(url, function(data) {
  console.log('Response Data:', data);
  // 여기서 data를 원하는 방식으로 처리하면 된다.
});

jsonp()