CORS와 JSONP
- 자바 스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한합니다. 이 정책을 동일근원정책(Same-Origin Policy, SOP) 정책이라고 하며, 이러한 정책으로 인해 생기는 이슈를 'Cross-Domain'문제 라고 합니다.
- 서로 다른 도메인에게 요청을 주고 받으려면 CORS와 JSONP를 사용합니다.
JSONP
- JSONP : CORS가 활성화 되기 이전의 데이터 요청 방법으로, 다른 도메인으로부터 데이터를 가져오기 위해 사용하는 방법입니다.
- JSONP는 SOP문제를 우회해서 데이터 공유를 가능하게 하였습니다.
- JSONP는 HTML 문서의 script 태그로 다른 도메인을 요청할 시 SOP 정책이 적용되지 않는 방식을 이용하여 동작합니다.
- JSONP는 SOP문제를 회피하기 위해 'script'요소를 이용합니다. 본래 자바스크립에서는 Ajax를 비롯한 어떠한 방법으로도 직접 다른 도메인의 웹페이지로 데이터를 요청할 수 없습니다. 그러나 'script' 요소는 도메인이 다른 스크립트 파일이라 하더라도 임베드할 수 있기 때문에, 이 성질을 이용하는 것입니다.
- JSONP의 기본원리
- 데이터를 요청할 페이지에 데이터를 받아 처리할 콜백 함수를 준비해놓습니다. 그 후에 'script' 요소를 생성하여, 데이터 요청을 합니다.
- 데이터 요청을 받은 페이지에서는 콜백 함수를 실행하는 스크립트를 출력합니다. 이 때 callback 함수의 인자에는 요청받은 데이터가 들어가게 됩니다.
Ajax와 JSONP 비교
- Ajax와 비교해보면, 단지 콜백함수를 실행하는 타이밍이 달라졌을 뿐입니다.
- Ajax는 데이터만을 일단 response Text 속성으로 가져온 후, XMLHttpRequest 객체에서 onreadystatechange 속성에 담긴 콜백함수를 실행합니다.
- 반면에 JSONP는 서버측에서 이미 콜백함수를 실행하는 코드를 반환하는 점이 다를 뿐입니다.
- 이처럼 Ajax와 동일한 효과를 가지면서도 SOP를 회피할 수 있는 것이 JSONP가 가진 효용성이라고 할 수 있습니다.
- 단점도 있는데, 바로 GET Method만을 사용할 수 있다는 점입니다.
- 이것은 JSONP가 'script'요소를 사용하기 때문에 가지는 숙명적인 한계라고 할 수 있습니다.
CORS
- CORS는 타 도메인 간에 자원을 공유할 수 있게 해주는 것입니다. Cross-Origin Resource Sharing 표준은 웹 브라우저가 사용하는 정보를 읽을 수 있도록 허가된 출처 집합을 서버에게 할려주도록 허용하는 특정 HTTP 헤더를 추가함으로써 동작합니다.
데이터데이터데이터!!