질문자 :Cheeso
JSON은 이해하지만 JSONP는 이해하지 못합니다. JSON에 대한 Wikipedia의 문서 는 JSONP에 대한 상위 검색 결과입니다. 다음과 같이 말합니다.
JSONP 또는 "JSON with padding"은 접두사가 호출 자체의 입력 인수로 지정되는 JSON 확장입니다.
뭐? 무슨 전화? 그것은 나에게 의미가 없습니다. JSON은 데이터 형식입니다. 전화가 없습니다.
두 번째 검색 결과 는 JSONP에 대해 다음과 같이 작성하는 Remy 라는 사람의 것입니다.
JSONP는 스크립트 태그 삽입으로 서버의 응답을 사용자가 지정한 함수로 전달합니다.
어느 정도 이해할 수는 있지만 여전히 의미가 없습니다.
그래서 JSONP는 무엇입니까? 왜 만들어졌습니까(어떤 문제를 해결합니까)? 그리고 왜 사용할까요?
부록 : Wikipedia 에서 JSONP용 새 페이지를 방금 만들었습니다. 이제 jveema 의 답변을 기반으로 JSONP에 대한 명확하고 철저한 설명이 있습니다.
사실 그렇게 복잡하지도 않고...
당신이 도메인에있어 말 example.com , 당신은 도메인에 대한 요청을 만들고 싶어 example.net . 그렇게 하려면 대부분의 브라우저 랜드에서 금지 되어 있는 도메인 경계를 넘어야 합니다.
이 제한을 우회하는 항목은 <script> 태그입니다. 당신은 스크립트 태그를 사용하는 경우, 도메인 제한이 무시되지만, 정상적인 상황에서, 당신이 정말로 결과에 아무것도 할 수 없어, 스크립트는 평가됩니다.
JSONP 입력합니다. JSONP가 활성화된 서버에 요청하면 서버에 페이지에 대해 약간 알려주는 특수 매개변수를 전달합니다. 그렇게 하면 서버가 페이지에서 처리할 수 있는 방식으로 응답을 멋지게 마무리할 수 있습니다.
예를 들어 서버가 JSONP 기능을 활성화하기 위해 callback 이라는 매개변수를 기대한다고 가정해 보겠습니다. 그러면 귀하의 요청은 다음과 같을 것입니다:
http://www.example.net/sample.aspx?callback=mycallbackJSONP가 없으면 다음과 같은 기본 JavaScript 객체를 반환할 수 있습니다.
{ foo: 'bar' }그러나 JSONP를 사용하면 서버가 "콜백" 매개변수를 수신할 때 결과를 약간 다르게 래핑하여 다음과 같은 결과를 반환합니다.
mycallback({ foo: 'bar' });보시다시피 이제 지정한 메서드를 호출합니다. 따라서 페이지에서 콜백 함수를 정의합니다.
mycallback = function(data){ alert(data.foo); };이제 스크립트가 로드되면 평가되고 함수가 실행됩니다. 짜잔, 도메인 간 요청!
또한 JSONP의 한 가지 주요 문제에 주목할 가치가 있습니다. 요청에 대한 많은 제어 권한을 잃는 것입니다. 예를 들어 적절한 오류 코드를 다시 가져오는 "좋은" 방법은 없습니다. 결과적으로 항상 약간 의심스러운 요청 등을 모니터링하기 위해 타이머를 사용하게 됩니다. JSONRequest에 대한 제안은 도메인 간 스크립팅을 허용하고 보안을 유지하며 요청을 적절하게 제어할 수 있는 훌륭한 솔루션입니다.
요즘(2015), CORS 는 JSONRequest에 비해 권장되는 접근 방식입니다. JSONP는 이전 브라우저 지원에 여전히 유용하지만 선택의 여지가 없다면 CORS가 더 나은 선택입니다.
JSONP 는 XMLHttpRequest 동일한 도메인 정책을 극복하기 위한 정말 간단한 트릭입니다. (아시다시피 AJAX(XMLHttpRequest) 요청을 다른 도메인으로 보낼 수 없습니다.)
따라서 XMLHttpRequest 를 사용하는 대신 js가 다른 도메인에서 데이터를 가져오기 위해 일반적으로 js 파일을 로드하는 데 사용하는 스크립트 HTML 태그를 사용해야 합니다. 이상한 소리?
문제는 스크립트 태그가 XMLHttpRequest 와 유사한 방식으로 사용될 수 있다는 것입니다! 이것 좀 봐:
script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://www.someWebApiServer.com/some-data';데이터를 로드한 후 다음과 같은 스크립트 세그먼트가 생성됩니다.
<script> {['some string 1', 'some data', 'whatever data']} </script>그러나 이것은 스크립트 태그에서 이 배열을 가져와야 하기 때문에 약간 불편합니다. 그래서 JSONP 제작자는 이것이 더 잘 작동할 것이라고 결정했습니다.
script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://www.someWebApiServer.com/some-data ?callback=my_callback ';저기 my_callback 함수가 보이시나요? 따라서 JSONP 서버가 요청을 수신하고 콜백 매개변수를 찾으면 일반 js 배열을 반환하는 대신 다음을 반환합니다.
my_callback({['some string 1', 'some data', 'whatever data']}); 이익이 어디에 있는지 확인하십시오. 이제 데이터를 가져오면 트리거될 자동 콜백(my_callback)을 얻습니다.
이것이 JSONP 에 대해 알아야 할 전부입니다. 콜백 및 스크립트 태그입니다.
참고: 이것은 JSONP 사용의 간단한 예이며 프로덕션 준비 스크립트가 아닙니다.
기본 JavaScript 예제(JSONP를 사용하는 간단한 Twitter 피드)
<html> <head> </head> <body> <div id = 'twitterFeed'></div> <script> function myCallback(dataWeGotViaJsonp){ var text = ''; var len = dataWeGotViaJsonp.length; for(var i=0;i<len;i++){ twitterEntry = dataWeGotViaJsonp[i]; text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>' } document.getElementById('twitterFeed').innerHTML = text; } </script> <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script> </body> </html>기본 jQuery 예제(JSONP를 사용하는 간단한 Twitter 피드)
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(document).ready(function(){ $.ajax({ url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10', dataType: 'jsonp', success: function(dataWeGotViaJsonp){ var text = ''; var len = dataWeGotViaJsonp.length; for(var i=0;i<len;i++){ twitterEntry = dataWeGotViaJsonp[i]; text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>' } $('#twitterFeed').html(text); } }); }) </script> </head> <body> <div id = 'twitterFeed'></div> </body> </html>
JSONP 는 패딩이 있는 JSON을 나타냅니다. (대부분의 사람들이 "패딩"이라고 생각하는 것과는 전혀 관련이 없기 때문에 이름이 매우 좋지 않은 기술입니다.)
JSONP는 원격 데이터 서비스 위치에 요청하는 "스크립트" 요소(HTML 마크업 또는 JavaScript를 통해 DOM에 삽입)를 구성하여 작동합니다. 응답은 요청되는 JSON 데이터인 전달되는 매개변수와 함께 사전 정의된 함수의 이름으로 브라우저에 로드된 자바스크립트입니다. 스크립트가 실행되면 JSON 데이터와 함께 함수가 호출되어 요청 페이지에서 데이터를 수신하고 처리할 수 있습니다.
추가 읽기: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/
클라이언트 측 코드 스니펫
<!DOCTYPE html> <html lang="en"> <head> <title>AvLabz - CORS : The Secrets Behind JSONP </title> <meta charset="UTF-8" /> </head> <body> <input type="text" id="username" placeholder="Enter Your Name"/> <button type="submit" onclick="sendRequest()"> Send Request to Server </button> <script> "use strict"; //Construct the script tag at Runtime function requestServerCall(url) { var head = document.head; var script = document.createElement("script"); script.setAttribute("src", url); head.appendChild(script); head.removeChild(script); } //Predefined callback function function jsonpCallback(data) { alert(data.message); // Response data from the server } //Reference to the input field var username = document.getElementById("username"); //Send Request to Server function sendRequest() { // Edit with your Web Service URL requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+""); } </script> </body> </html>PHP 코드의 서버 측 부분
<?php header("Content-Type: application/javascript"); $callback = $_GET["callback"]; $message = $_GET["message"]." you got a response from server yipeee!!!"; $jsonResponse = "{\"message\":\"" . $message . "\"}"; echo $callback . "(" . $jsonResponse . ")"; ?>서버에 반환된 JSON 객체에 접두사를 추가하도록 요청할 수 있기 때문입니다. 예
function_prefix(json_object);
브라우저가 JSON 문자열을 표현식으로 "인라인" eval 이 트릭을 사용하면 서버가 "동일한 출처" 제한을 우회하여 클라이언트 브라우저에 직접 자바스크립트 코드를 "주입"할 수 있습니다.
즉, 도메인 간 데이터 교환을 달성할 수 있습니다.
일반적으로 XMLHttpRequest 는 도메인 간 데이터 교환을 직접 허용하지 않지만(같은 도메인의 서버를 거쳐야 함) 다음과 같습니다.
<script src="some_other_domain/some_data.js&prefix=function_prefix >` 원본과 다른 도메인의 데이터에 접근할 수 있습니다.
또한 주목할 가치가 있습니다. 이러한 종류의 "트릭"을 시도하기 전에 서버를 "신뢰할 수 있는" 것으로 간주해야 하지만 개체 형식 등의 가능한 변경으로 인한 부작용이 포함될 수 있습니다. function_prefix (예: 적절한 js 함수)를 사용하여 JSON 객체를 수신하는 경우 해당 함수는 반환된 데이터를 수락/추가 처리하기 전에 검사를 수행할 수 있습니다.
JSONP는 우리가 탐색 중인 웹사이트와 다른 웹사이트(다른 출처 1 )에 있는 JSON 데이터를 가져오는 것을 금지하는 보안 제한을 우회하기 위해 발명 된 오래된 트릭입니다.
트릭은 해당 위치에서 JSON을 요청 <script> { "user":"Smith" } )를 사용하여 작동하지만 실제 JSONP ("JSON with Padding") 함수로 래핑됩니다.
peopleDataJSONP({"user":"Smith"}) peopleDataJSONP 함수 내에서 데이터를 사용할 수 있습니다. JSONP는 나쁜 습관 이며 더 이상 필요하지 않습니다. 사용하지 마십시오(아래 참조).
우리가 사용하고자하는 말 ourweb.com 에서 호스팅 일부 JSON 데이터 (또는 원시 데이터 정말) anotherweb.com . GET 요청( XMLHttpRequest 또는 fetch 호출, $.ajax 등)을 사용하는 경우 브라우저는 다음과 같은 추악한 오류와 함께 허용되지 않는다고 알려줍니다.
우리가 원하는 데이터를 얻는 방법? 글쎄, <script> 태그는 이 전체 서버(origin 1 ) 제한을 받지 않습니다! 이것이 우리가 오류 없이 CDN과 같은 모든 서버에서 jQuery 또는 Google Maps와 같은 라이브러리를 로드할 수 있는 이유입니다.
여기 중요한 포인트 가 있습니다. 생각해보면 이러한 라이브러리는 실제로 실행 가능한 JS 코드입니다 (일반적으로 내부에 모든 논리가 포함된 방대한 기능). 하지만 원시 데이터? JSON 데이터 는 코드가 아닙니다 . 실행할 것이 없습니다. 그냥 일반 텍스트입니다.
따라서 우리의 소중한 데이터를 처리하거나 조작할 방법이 없습니다. <script> 태그가 가리키는 데이터를 다운로드하고 처리할 때 정당하게 불평할 것입니다.
wtf는 우리가 로드한
{"user":"Smith"}코드가 아닙니다. 계산할 수 없습니다. 구문 오류입니다!
해당 데이터를 활용하는 오래된/해키 방법? 일반 텍스트를 어떻게든 실행 가능 하게 만들 수 있다면 런타임에 가져올 수 있습니다. anotherweb.com 이 필요합니다. 따라서 로드되면 브라우저의 코드에서 해당 데이터를 사용할 수 있습니다. 우리는 두 가지가 필요합니다. 1) 데이터를 실행할 수 있는 방식으로 가져오고 2) 데이터가 실행될 때 이 코드가 호출되고 데이터를 사용할 수 있도록 클라이언트에 일부 코드를 작성합니다.
1) 외부 서버에 JS 함수 내에서 JSON 데이터를 보내달라고 요청합니다. 데이터 자체는 해당 함수의 입력으로 설정됩니다. 다음과 같습니다.
peopleDataJSONP({"user":"Smith"})그것은 JS 코드로 만들어 우리 브라우저가 불평하지 않고 구문 분석하고 실행할 것입니다! jQuery 라이브러리에서 하는 것과 정확히 같습니다. 이와 같은 데이터를 수신하기 위해 클라이언트는 일반적으로 다음과 같이 JSONP 친화적인 서버에 "요청"합니다.
<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>2)에 따라 브라우저는 해당 함수 이름으로 JSONP를 수신하므로 다음과 같이 코드에서 동일한 이름을 가진 함수가 필요합니다.
function peopleDataJSONP(data){ alert(data.user); // "Smith" } 브라우저는 JSONP를 다운로드하고 실행하여 함수를 호출합니다 . 여기서 인수 data anotherweb.com 의 JSON 데이터가 됩니다. 이제 데이터로 원하는 모든 작업을 수행할 수 있습니다.
JSONP는 몇 가지 단점이 있는 사이트 간 해킹입니다.
요점은 요즘에는 사용할 필요가 없다는 것 입니다.
여기에서 CORS에 대해 읽어야 하지만 요지는 다음과 같습니다.
CORS(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 브라우저에 한 출처에서 실행되는 웹 애플리케이션에 다른 출처의 선택된 리소스에 대한 액세스 권한을 부여하는 메커니즘입니다. 웹 응용 프로그램은 원본(도메인, 프로토콜 또는 포트)이 다른 리소스를 요청할 때 원본 간 HTTP 요청을 실행합니다.
https://web.com 은 http://web.com (다른 프로토콜) 및 https://web.com:8081 (다른 포트) 및 분명히 https://thatotherweb.net (다른 호스트)JSONP는 도메인 간 스크립팅 오류를 해결하는 데 유용합니다. 서버 측에서 AJAX 프록시를 구현할 필요 없이 순수하게 JS로 JSONP 서비스를 사용할 수 있습니다.
b1t.co 서비스를 사용하여 작동 방식을 확인할 수 있습니다. 이것은 URL을 축소할 수 있는 무료 JSONP 서비스입니다. 서비스에 사용할 URL은 다음과 같습니다.
http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]
예를 들어 http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com 호출
돌아올 것이다
whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});따라서 해당 get이 src로 js에 로드되면 콜백 함수로 구현해야 하는 모든JavascriptName이 자동으로 실행됩니다.
function minifyResultsCallBack(data) { document.getElementById("results").innerHTML = JSON.stringify(data); }실제로 JSONP 호출을 수행하려면 여러 가지 방법(jQuery 사용 포함)을 수행할 수 있지만 다음은 순수한 JS 예제입니다.
function minify(urlToMinify) { url = escape(urlToMinify); var s = document.createElement('script'); s.id = 'dynScript'; s.type='text/javascript'; s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url; document.getElementsByTagName('head')[0].appendChild(s); }단계별 예제와 연습할 jsonp 웹 서비스는 이 게시물에서 사용할 수 있습니다.
JSONP 사용에 대한 간단한 예입니다.
클라이언트.html
<html> <head> </head> body> <input type="button" id="001" onclick=gO("getCompany") value="Company" /> <input type="button" id="002" onclick=gO("getPosition") value="Position"/> <h3> <div id="101"> </div> </h3> <script type="text/javascript"> var elem=document.getElementById("101"); function gO(callback){ script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://localhost/test/server.php?callback='+callback; elem.appendChild(script); elem.removeChild(script); } function getCompany(data){ var message="The company you work for is "+data.company +"<img src='"+data.image+"'/ >"; elem.innerHTML=message; } function getPosition(data){ var message="The position you are offered is "+data.position; elem.innerHTML=message; } </script> </body> </html>서버.php
<?php $callback=$_GET["callback"]; echo $callback; if($callback=='getCompany') $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})"; else $response="({\"position\":\"Development Intern\"})"; echo $response; ?>JSONP를 이해하기 전에 JSON 형식과 XML을 알아야 합니다. 현재 웹에서 가장 많이 사용되는 데이터 형식은 XML이지만 XML은 매우 복잡합니다. 그것은 사용자가 웹 페이지에 내장된 처리를 불편하게 만듭니다.
JavaScript가 데이터를 쉽게 교환할 수 있도록 데이터 처리 프로그램에서도 JavaScript 객체에 따른 단어를 사용하고 JSON이라는 간단한 데이터 교환 형식을 개발했습니다. JSON은 데이터 또는 JavaScript 프로그램으로 사용할 수 있습니다.
JSON은 JavaScript에 직접 포함될 수 있으며 이를 사용하여 특정 JSON 프로그램을 직접 실행할 수 있지만 보안 제약으로 인해 브라우저 샌드박스 메커니즘은 도메인 간 JSON 코드 실행을 비활성화합니다.
실행 후 JSON을 전달할 수 있도록 JSONP를 개발했습니다. JSONP는 JavaScript 콜백 기능과 < script > 태그를 사용하여 브라우저의 보안 제한을 우회합니다.
간단히 말해서 JSONP가 무엇인지, 어떤 문제를 해결하는지(사용 시기) 설명합니다.
JSONP 는 패딩이 있는 JSON 을 나타냅니다.
다음은 이 기술 의 가장 간단한 사용부터 가장 발전된 평면 JavaScript에 대한 설명과 함께 훌륭한 예제 가 있는 사이트입니다.
위에서 설명한 내가 가장 좋아하는 기술 중 하나는 URL 매개변수의 PHP 파일에 JSON을 보내고 PHP 파일이 얻은 정보를 기반으로 JSON 개체를 반환 하도록 하는 Dynamic JSON Result 입니다.
jQuery와 같은 도구 에는 JSONP를 사용할 수 있는 기능도 있습니다 .
jQuery.ajax({ url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley", jsonp: "callbackName", dataType: "jsonp" }).done( response => console.log(response) );나는 쉽게 설명하려고 노력한다.
사용 이유:
다른 도메인에서 파일을 요청하면 도메인 간 정책으로 인해 문제가 발생할 수 있습니다.
다른 도메인에서 외부 스크립트를 요청하면 이 문제가 발생하지 않습니다.
JSONP는 이러한 이점을 이용하여 XMLHttpRequest 객체 대신 스크립트 태그를 사용하여 파일을 요청합니다.
서버 파일용 코드:
<?php $myJSON = '{ "name":"John", "age":30, "city":"New York" }'; echo "myFunc(".$myJSON.");"; ?>데이터를 처리할 함수:
function myFunc(myObj) { document.getElementById("demo").innerHTML = myObj.name; }출처 : http:www.stackoverflow.com/questions/2067472/what-is-jsonp-and-why-was-it-created
| Pandas에서 열 이름 바꾸기 (0) | 2021.11.25 |
|---|---|
| Git 브랜치를 마스터에 병합하는 가장 좋은(가장 안전한) 방법은 무엇입니까? (0) | 2021.11.25 |
| JavaScript에서 임의의 문자열/문자 생성 (0) | 2021.11.25 |
| 두 개정 간에 변경된 파일 표시 (0) | 2021.11.25 |
| 링크처럼 작동하는 HTML 버튼을 만드는 방법 (0) | 2021.11.25 |