JSONP란?

이 글을 작성하게 된 이유

코드스피츠 스터디의 2회차 강의를 복습하던 중 수업 예제에서 발생한 에러를 해결하다가 공부하게된 내용을 정리하게되었습니다.

JSONP란?

• JSONP란 CORS가 활성화 되기 이전의 데이터 요청 방법으로, 다른 도메인으로부터 데이터를 가져오기 위해 사용하는 방법입니다.
• 자바스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한하는데, 이 정책은 Same-Origin Policy, SOP라고 합니다.
• SOP 정책으로 인해 생기는 이슈를 Cross-domain issue라고 하는데 JSONP는 이 이슈를 우회해서 데이터 공유를 가능하게 하였습니다.

JSONP 동작방식

• JSONP는 HTML 문서의 script 태그로 다른 도메인을 요청 할 시 SOP 정책이 적용되지 않는 방식을 이용하여 동작합니다.
• script 태그는 src 속성 값을 호출한 결과를 javascript로 불러와서 즉시 실행시키는 기능입니다.
• 바로 예를 들어 보겠습니다.
  * http://server.example.com/post/1 을 요청할 시 다음과 같은 json 데이터를 반환한다고 가정합니다.

  			{ 
  		"title" :  "JSONP란?" , 
  			    "author" :  "yesdoing", 
  			    "content" :  "쏼라쏼라" 
  			}

  	* 도메인에서 `script` 태그로 데이터를 호출해서 사용하려고하면 오류가 발생합니다.

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

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

  • JSON 데이터가 객체 리터럴로 해석된다 하더라도 브라우저에서 실행중인 Javascript에서는 변수에 값을 저장하지 않았으므로 접근을 할 수 없습니다.
  • 이 JSON데이터를 사용하기 위해서는 src 속성의 값 뒤에 ?callback=콜백함수명을 붙여서 요청을 합니다. 그럼 이 요청의 결과로 콜백함수의 인자에 객체를 전달하여 실행시켜 줍니다.
  • 즉, JSONP를 사용하기 위해서는 서버에서 데이터를 반환할때 콜백함수를 감싸주는 처리가 필요합니다.

    				callbackFunction(
          { 
    		"title" :  "JSONP란?" , 
    				    "author" :  "yesdoing", 
    				    "content" :  "쏼라쏼라" 
    				  }
         );
    			```
    

마치며..

JSONP는 여러 보안상 이슈로 인하여 W3C에서는 2009년 채택된 CORS 방식의 HTTP 통신을 권장하고 있습니다. 이제는 거의 사용되지 않는 기술이지만 이번 스터디 예제에서 나온 Github 파서 예제를 공부하면서 나온 JSONP 통신에 대한 내용을 요약하였습니다.