JSONP
JSONP란?
- JSON with Padding
- same-origin policy를 우회하기 위해 쓰이는 기술
<script>element는 cross-origin이 가능하나 ajax는 가능하지 않다. 이를 이용해서<script>를 이용해 data를 요청하는 우회 기술이다.- JSONP는 이제 과거의 유산이 돼버린 기술이라고 할 수 있다. 그리고 제한점이나 여러 보안이슈 때문에 사용하지 않는것도 권한다고 한다. 그렇지만 jQuery처럼 여전히 여기저기서 쓰이고 있기 때문에 어느정도 이해가 필요하다고 생각한다.
사용법
- 기본적으로는 client측에서
<script>의 src로 요청 주소와 callback의 이름을 명시해주고 서버측에서는 데이터를 callback의 이름으로 감싸서 text로 응답을 보낸다. - 해당 callback은 client측에 존재해야하고, window에 바인드되어 있다.
const script = document.createElement('script');
script.src = 'https://jsonplaceholder.typicode.com/todos/1?callback=mycallback'
document.querySelector('div').appendChild(script);
// 응답은 아래와 같이 오게 된다.
// "mycallback(원하는data)" 즉,
// "mycallback({value: 3})" 등등..
function mycallback(data){
console.log(data);
}- 정해진 형식은 없지만 보통 쿼리요청을 보낼 때 callback이라는 parameter로 함수이름을 보낸다고 한다.
보안 이슈
- wikipedia에 따르면
Unstrusted third-party code,Whitespace differences,Callback name manipulation and reflected file download attack,Rosetta Flash등의 보안 이슈들이 있다고 한다. 자세한 내용은 링크를 참조
참고
- https://en.wikipedia.org/wiki/JSONP#Security_concerns
- https://dev.to/bnevilleoneill/jsonp-demystified-what-it-is-and-why-it-exists-34ej
- https://kingbbode.tistory.com/26
생각들
- jQuery와 함께 많이 사용된 방법인듯 하다. jQuery를 이용하면 일반적인 request처럼 사용할 수 있어 보인다.
- 공부한 내용에 따르면
<script src="https://jsonplaceholder.typicode.com/todos/1"></script>와 같이 요청하면 SyntaxError가 나야 하는데Cross-Origin Read Blocking (CORB) blocked cross-origin response ...경고메세지가 출력됐다. 왜 이런일이 발생하는지 궁금하다. - jsonplaceholder 사이트에서는 jsonp 형식 요청을 지원한다.
- 읽고 이해하는 것보다 다시 쓰는데 시간이 많이 걸리고 에너지가 많이 소모된다. 이해를 제대로 했으면 쉽게 설명할수도 있겠지만 글로 쓰려다보니 고민이 든다. 말로 설명하듯이 글을 쓸수는 없고 적절한 예제와 단어들을 신경써야한다.
FE Developer @Medistream