jsonpCallback 은 무엇인가 - JSONP 대신 CORS를 사용 권장 (ChatGPT)

jsonpCallback 이란

jsonpCallback은 AJAX(Asynchronous JavaScript and XML) 요청 중에 JSONP(JSON with Padding) 방식을 사용할 때 콜백 함수의 이름을 지정하는 매개변수입니다. JSONP는 브라우저 보안 정책인 동일 출처 정책(Same-Origin Policy)을 우회하기 위해 사용되는 기술로, 다른 도메인에 있는 데이터를 요청하여 가져올 수 있게 해줍니다.

일반적으로 AJAX를 사용하여 서버에 데이터를 요청할 때, 동일한 도메인으로부터 응답을 받아야 합니다. 그러나 JSONP는 <script> 요소를 동적으로 생성하여 다른 도메인에 있는 스크립트 파일을 가져오는 방식으로 동작합니다. 서버는 요청된 데이터를 콜백 함수로 감싸서 응답합니다. 이 때, jsonpCallback 매개변수를 사용하여 콜백 함수의 이름을 지정할 수 있습니다.

예를 들어, 다음과 같은 AJAX 요청이 있다고 가정해봅시다:

$.ajax({
  url: 'https://api.example.com/data',
  dataType: 'jsonp',
  jsonpCallback: 'myCallback',
  success: function(data) {
    // 요청이 성공했을 때 실행되는 코드
    console.log(data);
  }
});

위의 코드에서 jsonpCallback: 'myCallback'는 서버에서 응답할 때 콜백 함수의 이름을 'myCallback'으로 지정한다는 의미입니다. 서버는 응답을 JSONP 형식으로 보내며, 예를 들어 다음과 같은 형태가 될 수 있습니다:

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

그리고 이 응답은 <script> 요소를 사용하여 동적으로 가져와 실행됩니다. 이를 통해 동일 출처 정책을 우회하여 데이터를 사용할 수 있습니다.

JSONP 의 취약점

JSONP는 보안 측면에서 일부 취약점이 있을 수 있으므로, 사용 시 주의해야 합니다. 대부분의 현대적인 API는 CORS(Cross-Origin Resource Sharing)를 지원하므로, JSONP 대신 CORS를 사용하는 것이 좋습니다.

---

CORS 란 무엇인가

CORS (Cross-Origin Resource Sharing)는 JSONP보다 더 현대적이고 안전한 대안입니다. CORS는 브라우저 보안 정책인 동일 출처 정책을 우회하지 않고도 다른 도메인으로부터 데이터를 가져올 수 있도록 허용합니다.

CORS를 사용하여 AJAX 요청 보내는 방법

CORS를 사용하여 AJAX 요청을 보내려면, 서버 측에서 CORS를 지원해야 합니다. 서버는 응답에 CORS 관련 헤더를 포함하여 클라이언트의 도메인에 대한 액세스를 허용하도록 설정해야 합니다.

클라이언트 측에서는 AJAX 요청을 보낼 때 다음과 같이 XMLHttpRequest 객체를 사용할 수 있습니다:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.withCredentials = true;  // 필요한 경우, 쿠키를 포함하기 위해 사용

xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();

위의 코드에서 xhr.open() 메서드를 사용하여 요청을 설정하고, xhr.withCredentials를 true로 설정하면 필요한 경우 쿠키를 요청에 포함할 수 있습니다. xhr.onload 이벤트 핸들러에서는 응답을 처리합니다.

CORS 요청을 보낼 때는, 서버에서 다음과 같은 헤더를 응답에 포함시켜야 합니다:

Access-Control-Allow-Origin: https://your-domain.com

위의 헤더에서 https://your-domain.com 부분은 클라이언트의 도메인을 나타내며, 요청을 허용할 도메인을 지정합니다. 만약 모든 도메인에서 요청을 허용하려면 Access-Control-Allow-Origin: *를 사용할 수도 있습니다. 그러나 이는 보안상 권장되지 않으며, 필요한 경우에만 사용해야 합니다.

서버 측 언어 및 프레임워크에 따라 CORS를 구성하는 방법은 다를 수 있습니다. 각 언어 또는 프레임워크의 공식 문서를 참조하여 CORS 설정 방법을 확인해야 합니다.

참고로, jQuery를 사용한다면 $.ajax() 대신 $.getJSON() 또는 $.get() 메서드를 사용하여 간단하게 CORS 요청을 보낼 수도 있습니다. 예를 들면 다음과 같습니다:

$.getJSON('https://api.example.com/data', function(data) {
  console.log(data);
});

이 방법은 내부적으로 AJAX 요청을 처리하고 CORS를 지원합니다.

출처 | ChatGPT