JSONP

자바스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한한다. 이 정책을 동일 출처 정책(Same-Origin Policy, SOP)이라고 하며, 이러한 정책으로 인해 생기는 이슈를 cross-domain-issue라고 한다. 

개발을 하다 보면 다른 도메인으로부터 데이터를 가져와야 하는 경우가 생기는데 이럴 때 JSONP(JSON with Padding)은 이 이슈를 우회해서 데이터 공유를 가능하게 하였다.

 

JSONP(JSON with Padding)

CORS가 활성화되기 이전의 데이터 요청 방법으로, 다른 도메인으로부터 데이터를 가져오기 위해 사용하는 방법

 

(*CORS: 교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제)

 

JSONP 동작 방식

• HTML 문서의 script 태그로 다른 도메인을 요청할 시 SOP가 적용되지 않는 방식을 이용하여 동작
• script 태그는 src 속성 값을 호출한 결과를 javascript로 불러와서 즉시 실행시키는 기능

http://server.com/1로 요청할 시 다음과 같은 json 데이터를 반환한다고 가정

{ 
    "sports" :  "baseball", 
    "team" :  "Twins"
}

 

도메인에서 script 태그로 위 데이터를 호출해서 사용하려고 하면,

<script> 파일을 다운로드하고 그 내용을 해석할 때 JSON 객체로 해석하지 않고  {}을 블록으로 해석하여 구문 오류를 발생시킨다.

<script src="http://server.com/1"></script>	 

 

 

해결 방법

JSON 데이터를 사용하기 위해서는 src 속성의 값 뒤에 ?callback=콜백함수명을 붙여서 요청을 한다. 그럼 이 요청의 결과로 콜백함수의 인자에 객체를 전달하여 실행시켜 준다.

 

즉, JSONP를 사용하기 위해서는 서버에서 데이터를 반환할때 콜백함수를 감싸주는 처리가 필요하다.

callbackFunction(
	{ 
          "sports" : "baseball", 
          "team" : "Twins"
	}
);

 

JSONP는 이제는 거의 사용되지 않는 기술이고 여러 보안상 이슈로 인하여 W3C에서는 2009년 채택된 CORS 방식의 HTTP 통신을 권장하고 있다.

 

 

출처: velog.io/@yesdoing/JSONP%EB%9E%80-jujowt4jy7