Co to jest JSONP i dlaczego został stworzony?
Rozumiem JSON, ale nie JSONP. Dokument Wikipedii na temat JSON jest (był) najlepszym wynikiem wyszukiwania dla JSONP. Mówi tak:
JSONP lub "JSON with padding" jest rozszerzeniem JSON, w którym prefiks jest określony jako argument wejściowy samego wywołania.
Huh? Jaki telefon? To nie ma dla mnie sensu. JSON jest formatem danych. Nie ma telefonu.
Drugi wynik wyszukiwania pochodzi od jakiegoś faceta o imieniu Remy , który pisze to o JSONP:
JSONP jest iniekcją znaczników skryptowych, przekazującą odpowiedź z serwera do określonej przez użytkownika funkcji.
Mogę to zrozumieć, ale to nadal nie ma sensu.
Czym jest JSONP? Dlaczego został stworzony (jaki problem rozwiązuje)? A po co miałbym go używać?
Dodatek : właśnie stworzyłem nową stronę dla JSONP Na Wikipedii; teraz ma jasny i dokładny opis JSONP, oparty w dniu[31]}jvenema 's odpowiedź.
10 answers
To nie jest zbyt skomplikowane...
Powiedz, że jesteś na domenie example.com, i chcesz złożyć wniosek do domeny example.net. Aby to zrobić, musisz przekroczyć granice domeny , a Nie-Nie w większości przeglądarek.
Jedynym elementem, który omija to ograniczenie, są <script> tagi. Gdy używasz znacznika script, ograniczenie domeny jest ignorowane, ale w normalnych okolicznościach, tak naprawdę nie możesz zrobić niczego z wynikami, skrypt po prostu jest oceniany.
Enter JSONP. Kiedy składasz żądanie na serwer, który jest włączony JSONP, przekazujesz specjalny parametr, który mówi serwerowi trochę o twojej stronie. W ten sposób serwer jest w stanie ładnie zawinąć swoją odpowiedź w sposób, który może obsłużyć Twoja strona.
Np. serwer oczekuje parametru o nazwie callback aby włączyć jego możliwości JSONP. Wtedy twoja prośba wyglądałaby następująco:
http://www.example.net/sample.aspx?callback=mycallback
Bez JSONP, to może powrócić niektóre podstawowe obiekty JavaScript, jak tak:
{ foo: 'bar' }
Jednak w przypadku JSONP, gdy serwer otrzyma parametr "callback", zawija wynik nieco inaczej, zwracając coś takiego:
mycallback({ foo: 'bar' });
Jak widzisz, wywoła teraz metodę, którą podałeś. Tak więc na swojej stronie definiujesz funkcję wywołania zwrotnego:
mycallback = function(data){
alert(data.foo);
};
A teraz, kiedy skrypt zostanie załadowany, zostanie on oceniony, a twoja funkcja zostanie wykonana. Voila, zapytania między domenami!
To warto również zwrócić uwagę na jeden poważny problem z JSONP: tracisz dużą kontrolę nad żądaniem. Na przykład nie ma "ładnego" sposobu na odzyskanie odpowiednich kodów awarii. W rezultacie korzystasz z timerów do monitorowania żądania itp., co zawsze jest nieco podejrzane. Propozycja dla JSONRequest jest świetnym rozwiązaniem pozwalającym na tworzenie skryptów między domenami, zachowanie bezpieczeństwa i właściwą kontrolę żądania.
These days (2015), CORS jest zalecany podejście vs. JSONRequest. JSONP jest nadal przydatny do obsługi starszych przeglądarek, ale biorąc pod uwagę konsekwencje dla bezpieczeństwa, chyba że nie masz wyboru CORS jest lepszym wyborem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-30 12:16:15
JSONP jest naprawdę prostą sztuczką, aby przezwyciężyć XMLHttpRequest samą politykę domenową. (Jak wiadomo nie można wysłać żądania AJAX (XMLHttpRequest) do innej domeny.)
Tak więc-zamiast używać XMLHttpRequestmusimy użyć script znaczników HTML, których zwykle używamy do ładowania plików js, aby js pobierał dane z innej domeny. Brzmi dziwnie?
Rzecz w tym-okazuje się skrypt znaczniki mogą być używane w sposób podobny do XMLHttpRequest ! Zobacz też:
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';
Skończysz zskrypt segment, który wygląda tak po załadowaniu danych:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
Jest to jednak nieco niewygodne, ponieważ musimy pobrać tę tablicę zscript tag. Więc JSONP twórcy zdecydowali, że to będzie działać lepiej (i tak jest):
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';
Zauważ funkcję my_callback tam? Więc - kiedy serwer JSONP otrzyma Twoją prośbę i znajdzie callback parametr-zamiast zwracać zwykłą tablicę js zwróci to:
my_callback({['some string 1', 'some data', 'whatever data']});
Zobacz, gdzie jest zysk: teraz otrzymujemy automatyczne wywołanie zwrotne (my_callback), które zostanie uruchomione po otrzymaniu danych.
To wszystko, co trzeba wiedzieć o JSONP : to wywołanie zwrotne i znaczniki skryptu.
UWAGA: są to proste przykłady użycia JSONP, nie są to Skrypty gotowe do produkcji.
Podstawowy przykład JavaScript (prosty kanał Twitter za pomocą JSONP)
<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>
Podstawowy przykład jQuery (simple Twitter feed using JSONP)
<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 oznacza JSON z wyściółką . (bardzo słabo nazwana technika, ponieważ tak naprawdę nie ma nic wspólnego z tym, co większość ludzi uważałaby za"wyściółkę".)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-15 07:57:19
JSONP działa poprzez konstruowanie elementu "script" (w znacznikach HTML lub wstawionego do DOM przez JavaScript), który żąda do zdalnej lokalizacji usługi danych. Odpowiedź jest javascript załadowany do przeglądarki z nazwą wstępnie zdefiniowanej funkcji wraz z przekazywanym parametrem, który jest THT dane JSON są wymagane. Gdy skrypt jest wykonywany, funkcja jest wywoływana wraz z danymi JSON, umożliwiając stronie żądającej odbiór i przetwarzanie danych.
Na Dalsze Wizyta czytelnicza: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/
Fragment kodu po stronie klienta
<!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>
Po stronie serwera fragment kodu 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 . ")";
?>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-22 14:20:30
Ponieważ możesz poprosić serwer o dodanie prefiksu do zwracanego obiektu JSON. E. g
function_prefix(json_object);
W celu, aby przeglądarka eval "inline" łańcuch JSON jako wyrażenie. Ta sztuczka umożliwia serwerowi "wstrzyknięcie" kodu javascript bezpośrednio w przeglądarce klienta, a to z pominięciem ograniczeń "tego samego pochodzenia".
Innymi słowy, można osiągnąć cross-domain data exchange.
Normalnie, XMLHttpRequest nie pozwala cross-domain data-exchange directly (trzeba przejść przez serwer w tej samej domenie) while:
<script src="some_other_domain/some_data.js&prefix=function_prefix>` można uzyskać dostęp do danych z domeny innej niż pochodzenie.
Warto również zauważyć: chociaż serwer powinien być uważany za" zaufany "przed podjęciem tego rodzaju "triku", skutki uboczne ewentualnej zmiany formatu obiektu itp. może być opanowany. Jeśli function_prefix (tj. Właściwa funkcja js) jest używana do odbioru obiektu JSON, wspomniana funkcja może wykonaj kontrole przed zaakceptowaniem / dalszym przetwarzaniem zwróconych danych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-14 11:15:05
JSONP to świetny sposób na obejście błędów skryptów między domenami. Możesz korzystać z usługi JSONP wyłącznie z JS bez konieczności implementacji Ajax proxy po stronie serwera.
Możesz użyć b1t.co serwis, aby zobaczyć, jak to działa. Jest to bezpłatna usługa JSONP, która pozwala na minifikację adresów URL. Oto adres URL do wykorzystania w usłudze:
Http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]
Dla przykład wywołania, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com
Zwróci
whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});
I tak, gdy get zostanie załadowany do twojego js jako src, automatycznie uruchomi whateverJavascriptName, który powinieneś zaimplementować jako funkcję callback:
function minifyResultsCallBack(data)
{
document.getElementById("results").innerHTML = JSON.stringify(data);
}
Aby wywołać JSONP, możesz to zrobić na kilka sposobów (w tym używając jQuery), ale oto czysty przykład 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);
}
Krok po kroku przykład i usługa internetowa jsonp do ćwiczeń jest dostępna pod adresem: ten post
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-05 15:20:37
Prosty przykład użycia JSONP.
Klient.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>
Serwer.php
<?php
$callback=$_GET["callback"];
echo $callback;
if($callback=='getCompany')
$response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";
else
$response="({\"position\":\"Development Intern\"})";
echo $response;
?>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-06 06:45:37
TL;DR
JSONP jest stara sztuczka wymyślona, aby ominąć ograniczenie bezpieczeństwa, które zabrania nam uzyskać dane JSON z innej strony internetowej (inny pochodzenie1) niż ten, w którym poruszamy się.
W tym celu należy użyć znacznika<script>, który pyta o JSON z tego miejsca, np.: { "user":"Smith" }, ale zawinięty w funkcję, rzeczywisty JSONP ("JSON with Padding"):
peopleDataJSONP({"user":"Smith"})
Otrzymanie go w tej formie umożliwia nam wykorzystanie danych w ramach naszej peopleDataJSONP funkcji. JSONP jest złą praktyką i nie jest już potrzebny, nie używaj go (czytaj poniżej)
Problem
Powiedzmy, że chcemy użyć na ourweb.com niektórych danych JSON (lub dowolnych surowych danych) hostowanych w anotherweb.com. Jeśli mamy użyć GET request (jak XMLHttpRequest, a fetch call, $.ajax, itd.), nasza przeglądarka powie nam, że nie jest dozwolone z tym brzydkim błędem:
Jak zdobyć dane, których chcemy? Cóż, <script> Tagi nie są poddawane tej całej ograniczenie serwera (pochodzenie*)! Dlatego możemy załadować bibliotekę jak jQuery lub Google Maps z dowolnego serwera, takiego jak CDN, bez żadnych błędów.
Oto ważny punkt: jeśli się nad tym zastanowić, te biblioteki to rzeczywisty, uruchamialny kod JS (Zwykle Ogromna funkcja z całą logiką w środku). Ale surowe dane? Dane JSON nie są kodem . Nie ma co biec, to tylko zwykły tekst.
Dlatego nie ma sposobu, aby obsłużyć lub manipulować naszym cenne dane. Przeglądarka pobierze dane wskazywane przez nasz tag <script> i podczas przetwarzania będzie słusznie narzekać:
Wtf czy to
{"user":"Smith"}gówno, które załadowaliśmy? To nie jest kod. Nie mogę obliczyć, błąd składni!
JSONP hack
Stary / hakerski sposób na wykorzystanie tych danych? Gdybyśmy mogli w jakiś sposób stworzyć zwykły tekst , który można uruchomić, moglibyśmy go pobrać w trybie runtime. Więc musimy anotherweb.com wysłać go z jakąś logiką, więc po załadowaniu kodu w przeglądarce będzie mógł korzystać z tych danych. Potrzebujemy dwóch rzeczy: 1) Aby uzyskać dane w taki sposób, aby można je było uruchomić, a 2) napisz jakiś kod w kliencie tak, że po uruchomieniu danych, ten kod jest wywoływany i możemy korzystać z danych.
Dla 1) prosimy serwer zagraniczny o przesłanie nam danych JSON wewnątrz funkcji JS. Same dane są ustawiane jako dane wejściowe tej funkcji. Wygląda to tak:
peopleDataJSONP({"user":"Smith"})
Co sprawia, że kod JS nasza przeglądarka przetworzy i uruchomi bez narzekania! Dokładnie tak jak to robi z biblioteką jQuery. Aby otrzymać dane w ten sposób, klient "prosi" o to serwer przyjazny dla JSONP, zwykle robi to tak:
<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>
Zgodnie z 2), ponieważ nasza przeglądarka otrzyma JSONP z tą nazwą funkcji, potrzebujemy funkcji o tej samej nazwie w naszym kodzie, jak to:]}
function peopleDataJSONP(data){
alert(data.user); // "Smith"
}
Przeglądarka pobierze JSONP i uruchomi go, który wywoła naszą funkcję, gdzie argumentem {[16] } będą dane JSON od anotherweb.com. Możemy teraz robić z naszymi danymi, co tylko chcemy.
Nie używaj JSONP, używaj CORS
JSONP jest hakerem między stronami z kilkoma wadami:]}- możemy wykonywać tylko żądania GET Ponieważ jest to żądanie GET wyzwalane przez prosty znacznik skryptu, nie otrzymujemy pomocnych błędów ani informacji o postępie Istnieją również pewne problemy związane z bezpieczeństwem, takie jak uruchamianie w klienckim kodzie JS, które może zostać zmienione na złośliwy ładunek.]}
- to tylko rozwiązuje problem z danymi JSON, ale polityka bezpieczeństwa tego samego pochodzenia dotyczy innych danych (Webfonty, obrazy/wideo rysowane za pomocą drawimage ()...) Nie jest zbyt elegancki ani czytelny.
Na wynos jest to, że nie ma potrzeby, aby go używać w dzisiejszych czasach.
Poczytaj o KORSIE tutaj, ale sedno sprawy brzmi:]}Cross-Origin Resource Sharing (CORS) jest mechanizmem wykorzystującym dodatkowe nagłówki HTTP mówiące przeglądarkom, aby dały www zastosowanie działa w jednym źródle, dostęp do wybranych zasobów z innego pochodzenie. Aplikacja internetowa wykonuje żądanie HTTP pochodzenia krzyżowego, gdy żąda zasobu, który ma inne pochodzenie (domena, protokół lub port) z własnego.
-
pochodzenie jest zdefiniowane przez 3 rzeczy: protokół, port I host . Tak więc, na przykład,
https://web.comjest innego pochodzenia niżhttp://web.com(inny protokół) ihttps://web.com:8081(inny port) i oczywiściehttps://thatotherweb.net(inny host)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-30 02:26:09
Zanim zrozumiesz JSONP, musisz znać format JSON i XML. Obecnie najczęściej używanym formatem danych w Internecie jest XML, ale XML jest bardzo skomplikowany. To sprawia, że użytkownicy niewygodne do przetwarzania osadzone na stronach internetowych.
Aby JavaScript mógł łatwo wymieniać dane, nawet jako program do przetwarzania danych, używamy sformułowań zgodnych z obiektami JavaScript i opracowaliśmy prosty format wymiany danych, jakim jest JSON. JSON może być używany jako dane lub jako program JavaScript.
JSON może być bezpośrednio osadzony w JavaScript, za ich pomocą można bezpośrednio wykonać określony program JSON, ale ze względu na ograniczenia bezpieczeństwa, Mechanizm piaskownicy przeglądarki wyłącza wykonywanie kodu JSON między domenami.
Aby JSON mógł być przekazywany po wykonaniu, stworzyliśmy JSONP. JSONP omija limity bezpieczeństwa przeglądarki za pomocą funkcji zwrotnej JavaScript i tagu .
W skrócie wyjaśnia czym jest JSONP, jaki problem rozwiązuje (kiedy użyj go).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-08 04:02:30
Świetne odpowiedzi już zostały podane, muszę tylko podać mój artykuł w postaci bloków kodu w javascript (dołączę również bardziej nowoczesne i lepsze rozwiązanie dla żądań cross-origin: CORS z nagłówkami HTTP):
JSONP:
1.klient_jsonp.js
$.ajax({
url: "http://api_test_server.proudlygeek.c9.io/?callback=?",
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
2.server_jsonp.js
var http = require("http"),
url = require("url");
var server = http.createServer(function(req, res) {
var callback = url.parse(req.url, true).query.callback || "myCallback";
console.log(url.parse(req.url, true).query.callback);
var data = {
'name': "Gianpiero",
'last': "Fiorelli",
'age': 37
};
data = callback + '(' + JSON.stringify(data) + ');';
res.writeHead(200, {'Content-Type': 'application/json'});
res.end(data);
});
server.listen(process.env.PORT, process.env.IP);
console.log('Server running at ' + process.env.PORT + ':' + process.env.IP);
CORS :
3.client_cors.js
$.ajax({
url: "http://api_test_server.proudlygeek.c9.io/",
success: function(data) {
console.log(data);
}
});
4.server_cors.js
var http = require("http"),
url = require("url");
var server = http.createServer(function(req, res) {
console.log(req.headers);
var data = {
'name': "Gianpiero",
'last': "Fiorelli",
'age': 37
};
res.writeHead(200, {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
});
res.end(JSON.stringify(data));
});
server.listen(process.env.PORT, process.env.IP);
console.log('Server running at ' + process.env.PORT + ':' + process.env.IP);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-04 02:39:44
Jsonp oznacza JSON z wyściółką .
Oto strona, z wspaniałymi przykładami, z wyjaśnieniem od najprostszego użycia tej techniki do najbardziej zaawansowanego w płaszczyźnie JavaScript:
Jedną z moich bardziej ulubionych technik opisanych powyżej jest Dynamic JSON Result , który pozwala wysłać JSON do pliku PHP w parametrze URL , i niech plik PHP zwraca również obiekt JSON na podstawie otrzymanych informacji.
Narzędzia takie jak jQuery mają również możliwości korzystania z JSONP :
jQuery.ajax({
url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
jsonp: "callbackName",
dataType: "jsonp"
}).done(
response => console.log(response)
);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-20 09:39:42