---

jsonp 간단 정리
출처 : https://ngio.co.kr/9615, https://dreamhack.io/learn/1/18#28

JSONP?

SOP를 우회하여 '다른 출처'로부터 데이터를 주고 받는 방식.
결국에 JSON 형태의 데이터를 받는 것이 목적임.

서버 측에 '여기에 담아 주세요'라는 callback 함수를 지정해 주는 것이 특징.
카페에서 음료 시킬 때 개인 텀블러 준비해가는 느낌?

사용 방법

1. <script></script> 방식

CORS는 몇몇 태그에서는 제외되는데, img src나 link rel, script src 등에서는 제외된다.
여기에서 script src에서 제외되는 것을 이용하여 CORS를 우회한 것이 jsonp 방법이다
<script src="...."> 태그는 src 아래의 내용을 단순히 불러오는 것이 아니라, 실행하는 것이기 때문이다.

<script src="https://api.test/request.jsonp?id=123&callback=onAPIResponse">와 같이 사용하면,
서버에서는 onAPIResponse(사용자가 원하는 JSON 결과) 형태로 response를 준다.
그러면 해당 response가 script로 실행이 되는 것이다.

물론 서버 측에서 구현이 필요하다. 결과값 JSON을 ?callback= 이후에 주어지는 함수 이름에 포장해서 보내주어야 한다.
서버 측에서의 구현이 필요하다는 점에서 CORS 헤더 설정하는 것과 유사하다.
물론 Origin Check도 서버측 개발자의 몫이다.

2. AJAX 방식

아래와 같이 JSON ajax와 크게 다르지 않은 방식으로 사용할 수 있다(편리한듯..)
다른 점은 SOP를 우회할 수 있다는 것이고, 서버측의 구현이 필요하다는 것이다.

//-- JSON
$.ajax({ 
    url: url, 
    dataType: 'json', 
    data: data, 
    success: callback 
}); 
$.getJSON(url, data, callback);

//-- JSONP
$.ajax({ 
    url: url, 
    dataType: 'jsonp', 
    jsonpCallback: "myCallback", 
    success: callback 
}); 
$.getJSON(url + "?callback=?", data, callback);

공격

SOP를 우회하는 것이다 보니까, URL을 공격자의 서버로 돌릴 경우에는,
외부 공격자의 서버에서 받은 response로 처리가 이루어질 수 있음.

GET 방식으로 데이터를 주고 받는 것이다 보니, CSRF 공격이 가능함.

콜백 함수 이름을 GET 파라미터로 변경(지정)할 수 있기 때문에, 콜백 함수 이름에서의 XSS가 가능함.
서버 측에서 콜백 함수 이름에 대한 필터링 필요함.

(계속 추가 예정)