JSONP 크로스 도메인 원리 심층 분석_기본 지식

JavaScript는 웹 개발에 자주 사용되는 프런트엔드 동적 스크립팅 기술입니다. JavaScript에는 "Same-Origin Policy"라는 매우 중요한 보안 제한 사항이 있습니다. 이 정책은 JavaScript 코드가 액세스할 수 있는 페이지 콘텐츠에 중요한 제한을 둡니다. 즉, JavaScript는 해당 콘텐츠가 포함된 문서와 동일한 도메인의 콘텐츠에만 액세스할 수 있습니다.

JavaScript 보안 전략은 Ajax 프로그래밍뿐만 아니라 다중 iframe 또는 다중 창 프로그래밍을 수행할 때 특히 중요합니다. 이 정책에 따르면 baidu.com 아래의 페이지에 포함된 JavaScript 코드는 google.com 도메인 이름 아래의 페이지 콘텐츠에 액세스할 수 없습니다. 심지어 서로 다른 하위 도메인 사이의 페이지도 JavaScript 코드를 통해 서로 액세스할 수 없습니다. Ajax에 미치는 영향은 XMLHttpRequest를 통해 구현된 Ajax 요청이 다른 도메인에 요청을 제출할 수 없다는 것입니다. 예를 들어 abc.example.com 아래의 페이지는 def.example.com 등에 Ajax 요청을 제출할 수 없습니다.

그러나 심층적인 프런트엔드 프로그래밍을 할 때는 필연적으로 크로스 도메인 작업이 필요합니다. 이때 '동일 출처 정책'은 너무 가혹한 것으로 보입니다. JSONP 교차 도메인 GET 요청은 일반적인 솔루션입니다. JSONP 교차 도메인이 어떻게 구현되는지 살펴보고 JSONP 교차 도메인의 원칙을 논의해 보겠습니다.

페이지에 <script> 노드를 생성하여 다른 도메인에 HTTP 요청을 제출하는 방법을 JSONP라고 합니다. 이 기술은 도메인 간에 Ajax 요청을 제출하는 문제를 해결할 수 있습니다. JSONP는 아래 설명과 같이 작동합니다. </p> <p>GET 요청이 <a href="http://example1.com/index.php">http://example1.com/index.php</a> 페이지의 <a href="http://example2.com">http://example2.com</a>/getinfo.php에 제출되었다고 가정해 보겠습니다. 다음 JavaScript 코드는 <a href="http://example1.com/index.php">http://example1.com/index.php</a> 페이지에 배치되어 구현됩니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="12864" class="copybut" id="copybut12864" onclick="doCopy('code12864')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code12864"> <br> var eleScript= document.createElement("script");<br> eleScript.type = "텍스트/자바스크립트";<br> eleScript.src = "<a href="http://example2.com/getinfo.php">http://example2.com/getinfo.php</a>";<br> document.getElementsByTagName("HEAD")[0].appendChild(eleScript);<br> </div> <p>GET 요청이 <a href="http://example2.com/getinfo.php">http://example2.com/getinfo.php</a>에서 반환되면 JavaScript 코드가 반환될 수 있습니다. 이 코드는 자동으로 실행되어 http: //example1.com/index.php<a href="http://example1.com/index.php">페이지의 콜백 함수입니다. </a> </p> <p><strong>JSONP의 단점은 </strong>입니다. GET 요청만 지원하고 POST와 같은 다른 유형의 HTTP 요청은 지원하지 않습니다. 교차 도메인 HTTP 요청만 지원하며 서로 다른 도메인에 있는 두 페이지의 문제를 해결할 수 없습니다. . 사이에 JavaScript 호출을 수행하는 방법. </p> <p>또 다른 예: <strong> </strong></p> <p></p> <p>코드 복사</p> <div class="codetitle"><span><a style="CURSOR: pointer" data="4578" class="copybut" id="copybut4578" onclick="doCopy('code4578')"> 코드는 다음과 같습니다.<u><div class="codebody" id="code4578"> <br> var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':<br> $("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};<br> $.ajax({ <br> 비동기:거짓, <br> URL: http://cross-domain dns/document!searchJSONResult.action, <br> 유형: "GET", <br> 데이터 유형: 'jsonp', <br> jsonp: 'jsoncallback', <br> 데이터: qsData, <br> 시간 초과: 5000, <br> beforeSend: 함수(){ <br> //이 메소드는 jsonp 모드에서 트리거되지 않습니다. 이유는 dataType이 jsonp로 지정되면 더 이상 ajax 이벤트가 아니기 때문일 수 있습니다 <br> }, <br> 성공: 함수(json) {//클라이언트 측에서 jquery가 미리 정의한 콜백 함수입니다. 크로스 도메인 서버에서 json 데이터를 성공적으로 얻은 후 이 콜백 함수가 동적으로 실행됩니다. <br> If(json.actionErrors.length!=0){ <br> 경고(json.actionErrors) <br>           } <br> ​​​​ genDynamicContent(qsData,type,json) <br> }, <br> 완료: 함수(XMLHttpRequest, textStatus){ <br>           $.unblockUI({ fadeOut: 10 }) <br> }, <br> 오류: 함수(xhr){ <br> //이 메소드는 jsonp 모드에서 트리거되지 않습니다. 이유는 dataType이 jsonp로 지정되면 더 이상 ajax 이벤트가 아니기 때문일 수 있습니다. <br> //오류 처리 요청 <br> Alert("요청 오류(관련 네트워크 상태를 확인하세요.)") <br> } <br> });<br> </div> </u><p><strong>가끔 다음과 같이 쓰여 있는 것을 볼 수 있습니다: </strong></p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="82552" class="copybut" id="copybut82552" onclick="doCopy('code82552')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code82552"> <br> $.getJSON("http://cross-domain dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?", <br> 함수(json){ <br> If(json.속성 이름==값){ <br> // 코드 실행 <br> } <br> }) <br> </div> <p>이 방법은 실제로 위 예에서 $.ajax({..}) API의 고급 캡슐화입니다. $.ajax API의 기본 매개변수 중 일부는 캡슐화되어 표시되지 않습니다. </p> <p>이런 방식으로 jquery는 다음 URL 가져오기 요청으로 구성됩니다. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="22073" class="copybut" id="copybut22073" onclick="doCopy('code22073')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code22073"> <br> http://cross-domain dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=<br> 사용 사례&currentUserId=5351&conditionBean.pageSize=15<br> </div> <p>응답 측(http://cross-domain dns/document!searchJSONResult.action)에서 jsoncallback = request.getParameter("jsoncallback")을 사용하여 나중에 jquery 측에서 다시 호출할 js 함수 이름을 가져옵니다. : jsonp1236827957501 및 스크립트 태그의 경우: "jsonp1236827957501(" 요청 매개변수에 따라 생성된 json 배열")"; jquery는 콜백 메서드를 통해 이 js 태그를 동적으로 로드하고 호출합니다. jsonp1236827957501(json array); 도메인 간 데이터 교환 목적을 달성합니다. </p> <p><strong>JSONP 원칙</strong></p> <p>JSONP의 가장 기본적인 원칙은 <script> 태그를 동적으로 추가하는 것이며, 스크립트 태그의 src 속성에는 도메인 간 제한이 없습니다. 이러한 방식으로 이 크로스 도메인 방법은 ajax XmlHttpRequest 프로토콜과 아무 관련이 없습니다. </p> <p>이런 식으로 "jQuery AJAX 크로스 도메인 문제"는 잘못된 제안이 되었습니다. jquery $.ajax 메서드 이름은 오해의 소지가 있습니다. </p> <p>dataType: 'jsonp'로 설정된 경우 이 $.ajax 메서드는 ajax XmlHttpRequest와 아무 관련이 없으며 JSONP 프로토콜로 대체됩니다. JSONP는 서버 측에서 스크립트 태그를 통합하고 이를 클라이언트에 반환하여 자바스크립트 콜백 형태로 도메인 간 액세스를 가능하게 하는 비공식 프로토콜입니다. </p> <p>JSONP는 패딩이 포함된 JSON입니다. 동일 출처 정책의 제한으로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)에서만 리소스를 요청할 수 있습니다. 도메인 간 요청을 하려면 html의 스크립트 태그를 사용하여 도메인 간 요청을 하고 응답에서 실행할 스크립트 코드를 반환하면 JSON을 사용하여 javascript 개체를 직접 전달할 수 있습니다. 이 도메인 간 통신 방법을 JSONP라고 합니다. </p> <p>jsonCallback 함수 jsonp1236827957501(....): 브라우저 클라이언트에 의해 등록됩니다. 크로스 도메인 서버에서 json 데이터를 얻은 후 콜백 함수 </p> <p>Jsonp의 실행 과정은 다음과 같습니다. </p> <p>먼저 클라이언트에 콜백(예: 'jsoncallback')을 등록한 다음 콜백 이름(예: jsonp1236827957501)을 서버에 전달합니다. 참고: 서버가 콜백 값을 얻은 후 jsonp1236827957501(...)을 사용하여 출력할 json 콘텐츠를 포함해야 합니다. 이때 서버에서 생성된 json 데이터를 클라이언트가 올바르게 수신할 수 있습니다. </p> <p>그런 다음 자바스크립트 구문을 사용하여 함수를 생성합니다. 함수 이름은 전달된 매개변수 'jsoncallback' jsonp1236827957501의 값입니다.</p> <p>마지막으로 json 데이터가 함수에 매개변수로 직접 배치되어 js 구문 문서가 생성되어 클라이언트에 반환됩니다. </p> <p>클라이언트 브라우저는 스크립트 태그를 파싱하고 반환된 자바스크립트 문서를 실행합니다. 이때 자바스크립트 문서 데이터는 클라이언트가 미리 정의한 콜백 함수(예: jquery $.ajax() 메소드)에 매개변수로 전달됩니다. 위의 예) 캡슐화된 성공: 함수(json)). </p> <p>jsonp 방식은 <script src="http://cross-domain/...xx.js"></script>와 원칙적으로 일치한다고 할 수 있습니다(qq space에서는 이 방식을 사용합니다). 도메인 간 데이터 교환을 달성하기 위해 광범위하게). JSONP는 스크립트 주입(ScriptInjection) 동작이므로 특정 보안 위험이 있습니다.

그럼jquery는 왜 도메인 간 게시물을 지원하지 않나요?

post를 사용하여 iframe을 동적으로 생성하면 post 교차 도메인의 목적을 달성할 수 있지만(js 전문가가 jquery1.2.5를 패치한 방법임) 이는 상대적으로 극단적인 방법이므로 권장되지 않습니다.

또한 get의 크로스 도메인 방식은 합법적이라고 할 수 있으며, post 방식은 보안 측면에서 불법으로 간주되므로 최후의 수단으로 잘못된 접근 방식을 취하지 않는 것이 가장 좋습니다.

클라이언트 측의 도메인 간 액세스에 대한 요구가 w3c의 관심을 끌었던 것 같습니다. 정보에 따르면 html5 WebSocket 표준은 도메인 간 데이터 교환을 지원하며 도메인 간 데이터 교환을 위한 선택적 솔루션이어야 합니다. 미래에.

아주 간단한 예를 들어보겠습니다.