JSONP

• JSONP(JSON with Padding) 는 웹 브라우저의 동일 출처 정책(Same-Origin Policy) 을 우회하여 다른 도메인에서 데이터를 요청할 때 사용되는 기술
• 주로 CORS(Cross-Origin Resource Sharing)가 도입되기 이전에 활용되었음

JSONP 작동 방식

1. <script> 태그 사용

   • 브라우저는 <script> 태그를 통해 외부 도메인의 JavaScript 파일을 자유롭게 가져올 수 있습니다.
   • JSONP는 이 점을 활용하여 서버에서 데이터를 JavaScript 함수 형태로 반환합니다.

2. 콜백 함수 지정

   • 클라이언트는 요청 시 호출할 콜백 함수 이름을 전달합니다.
   • 서버는 데이터를 JSON 형식으로 반환하는 대신 지정된 콜백 함수로 감싸 반환합니다.

3. 응답 예시

   // 클라이언트 요청
   <script src="https://example.com/data?callback=myCallback"></script>
   
   // 서버 응답
   myCallback({
       "name": "Alice",
       "age": 30
   });

4. 브라우저 처리

   • 서버가 반환한 스크립트를 브라우저가 실행하며, 데이터는 myCallback 함수에 전달됩니다.

JSONP의 한계

• 보안 문제: 임의의 JavaScript 코드가 실행되므로 보안 취약점이 발생할 가능성이 있습니다.
• HTTP GET 방식만 지원: POST와 같은 다른 HTTP 메서드를 사용할 수 없습니다.
• 데이터 크기 제한: URL의 길이에 따라 요청 데이터 크기가 제한됩니다.

대안

JSONP는 CORS가 널리 사용되면서 점차 대체되었습니다. 현재는 보안과 유연성 면에서 CORS가 선호됩니다.

Reference

• https://hulint.tistory.com/39
• https://github.com/HomoEfficio/dev-tips/blob/master/JSONP%2C%20Content-Type%2C%20X-Content-Type-Options:nosniff.md
• https://okky.kr/article/171550
• https://centbin-dev.tistory.com/entry/%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-Jsonp%EA%B3%BC-CORS
• https://stackoverflow.com/questions/71388775/call-a-jsonp-api-with-react
• https://blog.kingbbode.com/26