jquery ' s jsonp는 예제를 설명했습니다

키 포인트 요약

JSONP (Padding with Padding)는 크로스 도메인 Ajax 호출을 허용하여 스크립트가 다른 소스의 데이터에 액세스하는 것을 제한하는 상 동성 정책을 우회합니다. 이는 브라우저가 해석 할 수있는 함수 호출이 포함 된 서버를 반환하여 수행됩니다.

JSONP는 다른 소스의 데이터를 가져오고 다양한 서비스의 컨텐츠에 액세스하는 데 유용하지만 몇 가지 제한 사항도 있습니다. JSONP는 크로스 도메인 GET 요청 만 수행 할 수 있으며 서버에서 명시 적으로 지원해야합니다. 또한 XSS (Cross-Site Scripting) 공격의 가능성을 열어 잠재적 인 보안 문제가 있습니다.

상 동체 정책에 대한 다른 솔루션에는 대리의 사용 또는 CORS (Cross-Origin Resource Sharing)의 구현이 포함됩니다. 프록시는 서버 측 코드가 크로스 오리핀 요청을 수행 할 수있게하는 반면, CORS를 사용하면 응답에 새로운 액세스-제어-홀로-오리핀 HTTP 헤더를 포함하여 브라우저가 도메인간에 통신 할 수 있습니다. 그러나 각 방법에는 고유 한 단점과 한계가 있습니다.

• 이 기사는 2016 년 6 월 23 일에 품질 문제를 해결하기 위해 업데이트되었습니다. 오래된 기사와 관련된 의견이 삭제되었습니다. 웹 기반 애플리케이션을 개발하고 통제하지 않은 도메인에서 데이터를로드하려는 경우 브라우저의 콘솔에서 다음 메시지를 볼 수 있습니다. XMLHTTPREQUEST
https : //www.php. .CN/LINK/0DF0DBFC4725C2259DC0BB045E9BF6D2
• 는 'Access-Control-Origin'헤더가 요청 된 자원에 있습니다 ' 그러므로 액세스가 허용되지 않습니다.
이 기사에서는 jQuery 및 JSONP를 사용 하여이 오류의 원인 과이 문제를 해결하는 방법을 살펴 봅니다.
동일한 원산지 정책

일반 웹 페이지는 XMLHTTPREQUEST 객체를 사용하여 원격 서버로 데이터를 보내고 수신 할 수 있지만 동일한 원인 정책은 수행 할 수있는 내용을 제한합니다. 이는 브라우저 보안 모델에서 중요한 개념으로, 웹 브라우저가 페이지 A의 스크립트가 두 페이지에 동일한 소스가있는 경우 B 페이지의 데이터에 액세스 할 수 있도록 할 수 있음을 규정합니다. 페이지의 소스는 프로토콜 , 및 포트 번호 에 의해 정의됩니다. 예를 들어이 페이지의 출처는 "https", "www.sitepoint.com", "80"입니다. 균질 정책은 보안 메커니즘입니다. 스크립트가 도메인에서 데이터를 읽고 서버로 전송하는 것을 방지합니다. 이 없으면 악의적 인 웹 사이트가 세션 정보를 다른 사이트 (예 : Gmail 또는 Twitter)로 기어 다니고 귀하를 대신하여 작업을 수행하기가 쉽습니다. 불행히도, 위에서 볼 수있는 오류가 발생하고 종종 합법적 인 작업을 완료하려는 개발자에게 문제가 발생합니다. 실패의 예 작동하지 않는 것이 무엇인지 봅시다. 이것은 다른 도메인에 위치한 JSON 파일이며 jQuery의 getjson 메소드를 사용하여로드하려고합니다.

브라우저에서 콘솔을 열고 시도해 보면 위에서 언급 한 메시지와 유사한 메시지가 표시됩니다. 그래서 우리는 무엇을 할 수 있습니까?

$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);

가능한 솔루션

운 좋게도, 모든 것이 상 동성 정책의 영향을받는 것은 아닙니다. 예를 들어, 다른 도메인에서 이미지 나 스크립트를 페이지에로드 할 수 있습니다. 예를 들어 CDN에서 jQuery를 포함시킬 때이 작업을 수행합니다. 즉, 태그를 생성하고

속성을 ​​JSON 파일로 설정하고 페이지에 주입 할 수 있습니다. 이것이 작동하는 동안, 우리는 포함 된 데이터에 액세스 할 수 없기 때문에 우리에게는 많은 도움이되지 않습니다.

JSONP의 초보자

JSONP (패딩이있는 JSON을 대신하여)는이 기술을 기반으로하며 반환 된 데이터에 액세스 할 수있는 방법을 제공합니다. 브라우저가 해석 할 수있는 함수 호출 ( "대중")이 포함 된 서버를 반환하여 구현됩니다. 이 기능은 JSONP 응답을 평가하는 페이지에 정의되어야합니다. <script></script> 이전 예가 어떻게 보이는지 봅시다. 이것은 원래 JSON 데이터를 함수로 랩핑하는 업데이트 된 JSON 파일입니다. src

이것은 예상 결과를 콘솔에 기록합니다. 우리는 이제 (상당히 제한적이지만) 크로스 도메인 Ajax를 가지고 있습니다.

var script = $("<script>", {
    src: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
    type: "application/json"
  }
);

$("head").append(script);

타사 api

일부 타사 API를 사용하면 요청이 반환 될 때 실행 해야하는 콜백 함수의 이름을 지정할 수 있습니다. 그러한 API 중 하나는 Github API입니다. 다음 예에서는 John Resig (jQuery Creator)의 사용자 정보를 얻고 콜백 함수를 사용하여 콘솔에 응답을 기록합니다.

이것은 또한 다음과 같이 쓸 수 있습니다

URL의 끝에서 는 jQuery에게 JSON 대신 JSONP 요청을 처리한다고 알려줍니다. 그런 다음 jQuery는 콜백 함수를 자동으로 등록하며 요청이 반환 될 때 호출됩니다. jsonCallback jQuery의 getjson 메소드에 대해 자세히 알아 보려면 : ajax/jquery.getjson 간단한 예

를 확인하십시오. 예방 조치

function jsonCallback(json){
  console.log(json);
}

$.ajax({
  url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
  dataType: "jsonp"
});

그러나 지금까지 실현 했듯이이 접근법에는 몇 가지 단점이 있습니다.

예를 들어 JSONP는 크로스 도메인 GET 요청 만 수행 할 수 있으며 서버는 명시 적으로 지원해야합니다. JSONP에는 보안 문제가 없으므로 다른 솔루션을 간단히 소개하겠습니다.

에이전트 사용 > 서버 측 코드는 동일한 원인 정책의 적용을받지 않으며 문제없이 크로스 오리핀 요청을 실행할 수 있습니다. 따라서 어떤 종류의 프록시를 만들어 사용하여 필요한 데이터를 검색 할 수 있습니다. 첫 번째 예를 참조하십시오 : 클라이언트에서 <:> :

그러나이 방법에는 단점이 있습니다. 예를 들어, 타사 사이트가 인증을 위해 쿠키를 사용하는 경우이 방법은 작동하지 않습니다.

cors

logResults CORS (Cross-Origin Resource Sharing)는 브라우저가 도메인간에 통신 할 수있는 W3C 사양입니다. 이것은 응답에 새로운 액세스-제어-홀로-오리핀 HTTP 헤더를 포함시킴으로써 이루어집니다.

첫 번째 예제를 참조하면, 다른 소스의 요청을 허용하기 위해 .htaccess 파일 (아파치 가정)에 다음을 추가 할 수 있습니다.

(Apache가 아닌 서버를 실행하는 경우 여기에서 확인하십시오 : https://www.php.cn/link/819e55be8ef0957b56ea94356bfb79 최근 튜토리얼 중 하나에서 CORS에 대해 더 많이 배울 수 있습니다. CORS 에 대해 자세히 알아보십시오. 결론

$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);

JSONP를 사용하면 상 동성 정책을 우회 할 수 있으며 어느 정도까지 도메인 크로스 도메인 ajax 전화를 걸 수 있습니다. 마법의 알약은 아니며 물론 문제가 있지만 경우에 따라 데이터가 다른 소스에서 가져 오면 귀중한 것으로 판명 될 수 있습니다.

JSONP를 사용하면 다양한 서비스에서 다양한 컨텐츠를 추출 할 수 있습니다. 잘 알려진 많은 웹 사이트는 사전 정의 된 API를 통해 컨텐츠에 액세스 할 수있는 JSONP 서비스 (예 : FLICKR)를 제공합니다. ProgrammableWeb API 디렉토리에서 전체 목록을 찾을 수 있습니다. (중복 정보를 피하기 위해 원본 텍스트에 따라 조정 및 단순화 된 FAQ 부품입니다) JSONP에 대한 FAQS (FAQ)

JSON과 JSONP의 주요 차이점은 무엇입니까? JSON과 JSONP는 서버와 웹 애플리케이션 간의 데이터를 처리하는 데 사용되는 형식입니다. 주요 차이점은 그들이 도메인 크로스 요청을 처리하는 방법입니다. JSON은 상 동성 정책 (웹 브라우저에서 구현 된 보안 조치)으로 인해 크로스 도메인 요청을 지원할 수 없습니다. 반면에 JSONP는 채워진 방법을 사용 하여이 정책을 우회하여 클라이언트와 다른 도메인이 다른 서버에서 데이터를 요청할 수 있습니다.

JSONP는 어떻게 동일한 원래 정책을 우회합니까? JSONP는 패딩 또는 "채우기 요청"메소드를 사용하여 상동 정책을 우회합니다. 이 방법에서 클라이언트는 콜백 함수를 URL에 추가하여 다른 도메인의 서버에서 데이터를 요청합니다. 그런 다음 서버는이 기능에서 요청 된 데이터를 랩핑하여 클라이언트로 다시 보냅니다. 클라이언트는이 기능을 실행하여 데이터에 액세스합니다. 이 방법을 통해 JSONP는 상 동성 정책에 의해 부과 된 교차 도메인 제한을 극복 할 수 있습니다.

JSONP는 안전합니까?

JSONP는 상 동체 정책을위한 솔루션을 제공하지만 자체 보안 위험이 있습니다. JSONP에는 서버에서 수신 된 스크립트를 실행하는 것이 포함되기 때문에 서버가 손상된 경우 XSS (Cross-Site Scripting) 공격의 가능성을 열어줍니다. 따라서 신뢰할 수있는 출처에서만 JSONP를 사용하십시오.

JSONP는 오류 응답을 처리 할 수 ​​있습니까? JSON과 달리 JSONP에는 내장 오류 처리가 없습니다. JSONP 요청이 실패하면 브라우저에 오류가 발생하지 않고 콜백 함수가 실행되지 않습니다. JSONP에서 오류를 처리하려면 콜백 함수가 지정된 시간 내에 실행되지 않으면 오류를 트리거하는 타임 아웃 메커니즘을 구현할 수 있습니다.

jQuery를 사용하여 JSONP 요청을하는 방법은 무엇입니까? jQuery는 $ .ajax () 메소드를 사용하여 JSONP 요청을 쉬운 방법을 제공합니다. $ .ajax () 설정에서 데이터 타입을 "jsonp"로 지정해야합니다.

JSONP의 한계는 무엇입니까? JSONP에는 몇 가지 제한 사항이 있습니다. GET 요청 만 지원하며 게시물 또는 기타 HTTP 방법을 지원하지 않습니다. 또한 오류 처리 기능이 부족합니다. 또한 JSONP는 상동 정책을 우회하기위한 접근으로 인해 보안 위험을 제기합니다.

JSONP는 지금 아직도 사용됩니까?

JSONP는 과거에 도메인 크로스 도메인 요청에 대한 인기있는 솔루션이지만 CORS는 이제 CORS (크로스 오리핀 자원 공유)의 출현으로 인해 사용 빈도가 낮으며, 더 안전하고 강력한 크로스 도메인을 제공합니다. 요청.

위 내용은 jquery ' s jsonp는 예제를 설명했습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!