JSONP 작동 방식

JSONP 요청은 다음과 같은 순서로 작동한다.

1. 클라이언트는 JSONP 요청을 위해 URL에 콜백 함수명을 포함한 쿼리 스트링을 포함한 <script> 태그를 동적으로 생성한다.

    function doJsonpRequest() {
      var script = document.createElement('script');
      script.src = 'https://example.com/api/data?callback=handleData';
      document.body.appendChild(script);
    }
   
    function handleData(data) {
      console.log(data);
    }
   

2. 서버는 콜백 함수명과 함께 JSON 데이터를 포함한 응답을 반환한다.

    handleData({ "name": "John", "age": 30 });
   

3. 클라이언트에서는 콜백 함수가 실행되어 JSON 데이터를 처리한다.

장단점

장점

• 다른 도메인 간 데이터 교환을 용이하게 함
• 크로스 도메인 AJAX 요청을 지원하지 않는 브라우저에서도 작동함

단점

• 보안 측면에서 취약함
• 오직 GET 요청만 지원함

JSONP는 오래된 방식이지만, 여전히 일부 API에서 사용되고 있다. 하지만, 보안 및 기능 측면에서 제약 사항이 많기 때문에 최신 기술인 CORS와 같은 대안이 권장된다.

참고 문헌:
MDN Web Docs - JSONP