Colin's Blog
[jQuery] JSONP와 같은 비동기 통신 기술

웹 애플리케이션에서 서버와의 비동기 통신은 사용자 경험을 향상시키는 데 중요합니다. 이런 목적으로 JSONP(JSON with Padding)와 같은 방법이 사용됩니다. JSONP는 네임스페이스 충돌을 피하기 위해 JSON 데이터를 <script> 태그로 가져오는 방식입니다.

JSONP가 필요한 이유

웹 애플리케이션에서 동일 출처 정책(Same Origin Policy)이라는 보안 상의 이유로 XMLHttpRequest 객체를 사용해 다른 도메인에 있는 자원에 접근하는 것을 제한합니다. 따라서 다른 도메인에서 JSON 데이터를 가져와야 하는 경우, JSONP를 사용할 수 있습니다. 이를 통해 같은 도메인에 속하게 되는 것이므로 보안 정책에 어긋나지 않고 데이터를 가져올 수 있습니다.

JSONP의 동작 방식

JSONP는 <script> 태그를 이용하여 데이터를 가져오므로, 일반적인 XMLHttpRequest의 보안 정책에 적용되는 제약을 피할 수 있습니다. 일반적으로는 <script> 태그를 동적으로 생성하여 원격 서버에서 데이터를 가져와 콜백 함수를 호출하는 방식으로 동작합니다.

예를들어, 다음은 JSONP를 사용하여 서버에서 JSON 데이터를 가져오는 예제 코드입니다.

function handleData(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://example.com/data.json?callback=handleData';
document.body.appendChild(script);

위의 예제 코드에서, handleData 함수는 서버에서 JSON 데이터를 가져와서 처리하기 위해 사용됩니다.

JSONP는 네임스페이스 충돌을 피하기 위해 일반적으로 콜백 함수를 인자로 받아 데이터를 처리합니다.

JSONP의 한계

JSONP는 여러 가지 이점이 있지만, 보안 측면에서 취약합니다. 외부 스크립트를 통해 데이터를 가져오는 것이기 때문에 크로스 사이트 스크립팅(XSS) 공격에 노출될 수 있습니다. 따라서 적절한 보안 조치를 취해야 합니다.

또한 JSONP는 원본 서버에서 제공하는 콜백 함수를 호출하는 방식으로 동작하기 때문에 서버 단에서 콜백 함수에 대한 처리가 필요합니다. 이는 서버 측에서 그에 맞게 구현되어 있어야 한다는 것을 의미합니다.

JSONP는 CORS(Cross-Origin Resource Sharing)와 같은 보다 안전한 대안이 있으므로, 가능하다면 JSONP보다는 CORS를 사용하는 것이 좋습니다.

따라서 JSONP를 사용할 때는 보안 취약점과 서버 측에서의 요구사항을 고려하여 적절한 대책을 마련해야 합니다.

이상으로 JSONP와 같은 비동기 통신 기술에 대해 알아보았습니다.

참고 자료

© 2018 Colin. All rights reserved.