[jQuery] JSONP와 CORS의 차이

22 Dec 2023

jQuery

웹 개발에서 API 연동을 할 때, 서로 다른 도메인 간에 데이터를 주고받는 상황이 많이 발생합니다. 이 때, JSONP와 CORS는 이러한 도메인 간 통신 문제를 해결하기 위한 방법으로 사용됩니다. 이 두 가지 방법은 각각의 특징을 가지고 있으며, 간단히 정리하여 비교해보겠습니다.

JSONP (JSON with Padding)

JSONP는 HTML <script> 태그를 이용하여 다른 도메인의 데이터를 불러오는 방법입니다. 이 방법은 서버 측에서 콜백 함수를 호출하는 스크립트를 반환하여, 이를 통해 데이터에 접근할 수 있도록 합니다.

예를 들어, 다음은 JSONP를 사용하여 외부 서버에서 데이터를 가져오는 예시입니다:

function handleData(data) {
  // 외부 서버에서 가져온 데이터 처리
}

var script = document.createElement('script');
script.src = 'https://externalsite.com/api/data?callback=handleData';
document.body.appendChild(script);

위의 예시에서 handleData 함수는 외부 서버에서 반환한 데이터를 다루는데 활용됩니다.

장점:

간단하고, 구현이 용이하다.
모든 브라우저에서 지원된다.

단점:

보안상의 이슈가 존재한다.
오직 GET 요청만 가능하다.

CORS는 서로 다른 도메인 간의 자원 공유를 위한 표준 방법입니다. 이를 통해 서버 측에서 다른 출처의 요청을 허용할 수 있도록 합니다.

다음은 CORS를 통해 서버 측에서 어떻게 다른 도메인의 요청을 허용하는지에 대한 예시입니다:

// 서버 응답 헤더 설정 예시
Access-Control-Allow-Origin: https://externalsite.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

위의 예시에서, Access-Control-Allow-Origin 헤더는 외부 도메인 https://externalsite.com에서의 요청을 허용하도록하는 역할을 하게 됩니다.

장점:

보안적인 측면에서 더 안전하다.
모든 요청(POST, GET 등)에 대해 적용 가능하다.

단점:

구형 브라우저에서는 호환성 문제가 발생하거나 제대로 동작하지 않을 수 있다.

결론

JSONP는 간편하지만 보안상의 이슈와 GET 방식 요청만 가능하다는 한계가 존재하고, CORS는 보안적인 측면에서 더 안전하지만 구형 브라우저와의 호환성 문제가 있을 수 있습니다. 이에 따라 프로젝트의 요구사항과 보안 상의 고려 사항을 고려하여 적절한 방법을 선택할 필요가 있습니다.

이 문서는 Mozilla Developer Network의 CORS와 JSONP 관련 문서를 참고하여 작성되었습니다.

JSONP (JSON with Padding)

CORS (Cross-Origin Resource Sharing)

결론