SOP, JSONP란?

SOP란?

자바스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한하는데, 이 정책을 Same-Origin Policy, 즉 SOP라고 합니다. SOP 정책으로 인해 생기는 이슈를 크로스 도메인 이슈(Cross-domain issue)라고 하는데 JSONP는 이 이슈를 우회해서 데이터 공유를 가능하게끔 합니다.

JSONP(JSON with Padding 또는 JSON-P)란?

JSONP란 CORS가 활성화 되기 이전의 데이터 요청 방법으로, 다른 도메인으로부터 데이터를 가져오기 위해 사용하는 방법입니다. SOP에 따라 다른 도메인 간의 request를 제한하지만 <script/> 태그는 SOP 정책에 속하지 않는다는 것을 사용하여 서로 다른 도메인 간의 javascript 호출가능하게 합니다. JSONP를 사용하기 위해서는 필수적으로 서버에서 JSON의 포맷을 따라야 합니다.

동작방식

http://main.com 에서 http://test.com/result.json를 ajax로 요청한다고 하면 SOP에 의해 오류가 발생합니다. 따라서 <script> 태그를 사용하여 호출해야 합니다. <script> 태그는 src 속성 값을 호출한 결과를 javascript로 불러와서 바로 실행시킵니다.

<script type="text/javascript" src="http://test.com/result.json"/>

위의 코드를 html에 선언하면 정상적으로 json URL을 호출 하지만 result.json 안에 있는 코드는 어떠한 객체를 정의해 놓은 코드이지 실행 코드가 아닙니다. 다시 말해, result.json을 실행 코드로 바꾸면 <script> 태그를 사용해 다른 도메인의 데이터를 호출할 수 있습니다. 이를 위해서 result.json 코드를 이제 아래처럼 변경합니다.

// http://test.com/result.json 파일 callback({ name: "JSONP", discription: "test" })

callback()은 함수를 실행시키는 구문이므로, result.jsoon이 호출되면 callback() 안의 json이 반환됩니다. 이제 result.json을 호출하는 html파일을 아래와 같이 추가 수정해줍니다.

// http://main.com <script type="text/javascript" src="http://test.com/result.json"></script> <script> function callback( data ) { // data는 result.json에서 선언한 데이터가 반환됨 } </script>

JSONP는 보안상 이슈로 인하여 현재는 거의 사용하지 않는 기술입니다. W3C에서 채택된 CORS 방식의 HTTP 통신을 사용하여 크로스 도메인 이슈를 해결하는 것이 좋습니다.