오랫동안 에세이를 쓰지 않았고, 항상 시간이 없다고 느꼈지만, 사실 시간은... 그만 좀 해도 말도 안 되는 얘기를 그만하고, 며칠 전에는 새로운 요구사항이 생겼는데, 프론트엔드 웹페이지가 정보를 반환하기 위해 백엔드 Webservice 메서드를 비동기적으로 호출해야 한다는 내용이었습니다. 구현 방법은 여러 가지가 있는데, 이 예시에서는 jQuery+Ajax를 사용했는데, 완료 후에는 로컬에서 디버깅하는 데 문제가 없지만, 서버에 배포 후 문제가 발생하고 백그라운드 서비스 호출이 응답하지 않습니다. 무슨 일이 일어난 건가요? 코드는 크게 바뀌지 않았고, jQuery의 ajax 메서드에서 URL 주소만 바뀌었습니다. 여기서 문제는 점검과 디버깅 후에 상동 정책이 문제라는 점일 수도 있겠죠. 예를 들어 Javascrip{filtering}t 또는 jQuery가 웹 프론트엔드 개발에서 자주 사용되는 동적 스크립팅 기법이라는 것을 알고 있습니다. Javascrip{filtering}t에는 "동일 출처 정책(Same-Origin Policy)"이라는 중요한 보안 제한이 있습니다. 이 정책은 Javascrip{filter}t 코드가 접근할 수 있는 페이지 내용에 중요한 제한을 둡니다. 즉, Javascrip{filtering}t는 해당 문서나 스크립트와 동일한 도메인 이름으로만 접근할 수 있습니다. 서로 다른 도메인 아래 있는 스크립트들은 서로, 심지어 서브도메인 내에서도 접근할 수 없습니다. 동동 전략에 관해서는 독자들이 바이두에서 더 자세히 설명할 수 있으나, 여기서는 반복하지 않겠다.
하지만 때로는 도메인 간 연산을 수행하는 것이 불가피하고, '상동 정책'이 한계가 될 때도 있습니다. 우리는 무엇을 해야 할까요? 이제 JSONP 크로스 도메인이 어떻게 구현되는지 살펴보고 JSONP 크로스 도메인의 원리에 대해 논의해 보겠습니다.
여기서 JSONP가 언급되었고, 누군가 JSONP와 JSON의 차이점이 무엇인지 물었어요. Baidu 백과사전에서 다음과 같은 설명이 있습니다:
JSON(Javascrip{filtering}t 객체 표기법)은 경량 데이터 교환 형식입니다. 이 프로토콜은 Javascrip{filter}t(표준 ECMA-262 3판 - 1999년 12월)의 하위 집합을 기반으로 합니다. JSON은 완전히 언어 독립적인 텍스트 형식을 사용하지만, C, C++, C#, Java, Javascrip, Perl, Python 등 C 계열과 유사한 습관도 사용합니다. 이러한 기능들은 JSON을 데이터 교환에 이상적인 언어로 만듭니다. 사람이 읽고 쓰기 쉽지만, 기계가 해석하고 생성하기도 쉽다(빠른 네트워크 전송).
JSONP(패딩이 포함된 JSON)는 JSON의 "사용 패턴"으로, 주류 브라우저에서 도메인 간 데이터 접근 문제를 해결하는 데 사용될 수 있습니다. 동일 출처 정책으로 인해 일반적으로 server1.example.com 에 위치한 페이지는 server1.example.com 없는 서버와 통신할 수 없으며, HTML의 <scrip{filter}t> 요소를 제외하고는 예외입니다. <scrip{filter}t> 요소의 이 오픈 전략을 사용하면 웹페이지가 다른 출처로부터 동적으로 생성된 JSON 데이터를 얻을 수 있으며, 이 사용 패턴을 JSONP라고 합니다. JSONP로 캡처된 데이터는 JSON이 아니라 임의의 Javascrip{filter}t로, JSON 파서 대신 Javascrip{filter}t 변환기로 실행됩니다.
이 시점에서 JSON은 xml처럼 데이터 간 데이터를 설명하는 데 사용되는 경량 데이터 교환 형식임을 이해해야 합니다. JSONP는 JSON 데이터를 사용하는 방법으로, JSON 객체를 반환하는 대신 JSON 객체를 포함하는 javascrip{filtering}t 스크립트입니다.
그렇다면 JSONP는 어떻게 작동하는지, 동일 출처 정책의 한계로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)에서만 리소스 요청을 허용한다는 것을 알고 있습니다. 보안 문제로 교차 도메인 요청은 불가능하지만, 웹 페이지에서 js 파일이 호출될 때 교차 도메인의 영향을 받지 않으며, "src" 속성을 가진 태그는 <scrip{filter}t>, <img>, , 와 <iframe>같은 교차 도메인 기능을 갖추고 있음을 발견했습니다 도메인 간 요청을 원한다면, html의 scrip{filter}t 태그를 사용해 도메인 간 요청을 하고, 응답에서 실행할 scrip{filtering}t 코드를 반환하면 json을 사용해 javascrip{filter}t 객체를 직접 전달할 수 있습니다. 즉, 크로스 도메인 서버에서 JSON 데이터를 생성한 후 scrip{filtering}t 스크립트로 랩핑하여 동일 오리진 정책의 한계를 뚫고 크로스 도메인 접근 문제를 해결하는 것입니다.
어떻게 달성할지 살펴보겠습니다:
프론트엔드 코드:
|
게시됨 2015. 12. 28. 오후 2:22:00
|
|
|
