JSONP a expliqué JQUery & # x27;

Résumé des points clés

• JSONP (JSON avec rembourrage) permet des appels Ajax interdomains, contournant les politiques homologues qui empêchent les scripts d'accéder aux données à partir de différentes sources. Cela se fait en faisant renvoyer le serveur des données JSON contenant l'appel de fonction, que le navigateur peut interpréter.
• Bien que JSONP soit utile pour obtenir des données à partir de différentes sources et accéder au contenu pour divers services, il a également certaines limites. JSONP ne peut effectuer que des demandes de GET inter-domaine et doit être explicitement pris en charge par le serveur. Il a également des problèmes de sécurité potentiels car il ouvre des possibilités pour les attaques de scripts croisés (XSS).
• Les autres solutions aux politiques homologues comprennent l'utilisation de la procuration ou la mise en œuvre du partage de ressources croisées (COR). Le proxy permet au code côté serveur d'effectuer des demandes d'origine croisée, tandis que COR permet aux navigateurs de communiquer entre les domaines en incluant un nouvel en-tête HTTP à l'origine ACCESS-Control-Allow-Origin dans la réponse. Cependant, chaque méthode a ses propres lacunes et limitations.

Cet article a été mis à jour le 23 juin 2016 pour résoudre les problèmes de qualité. Les commentaires liés aux anciens articles ont été supprimés. Si vous développez une application Web et que vous essayez de charger des données à partir d'un domaine qui n'est pas sous votre contrôle, vous verrez probablement le message suivant dans la console du navigateur: XMLHTTPREQUEST INCORD INCORTE .Cn / link / 0df0dbfc4725c2259dc0bb045e9bf6d2 . 1 ' n'est donc pas autorisé à accéder. Dans cet article, nous explorerons les causes de cette erreur et comment résoudre ce problème en utilisant jQuery et JSONP.

même politique d'origine

Les pages Web générales peuvent utiliser des objets XMLHTTPRequest pour envoyer et recevoir des données aux serveurs distants, mais la politique d'origine homosexuelle limite ce qu'ils peuvent effectuer. Il s'agit d'un concept important dans le modèle de sécurité du navigateur, qui stipule que les navigateurs Web ne peuvent permettre que les scripts de la page A pour accéder aux données de la page B si les deux pages ont la même source. La source de la page est définie par ses protocoles

, hôte et numéro de port . Par exemple, la source de cette page est "https", "www.sitepoint.com", "80". La politique de l'homogène est un mécanisme de sécurité. Il empêche les scripts de lire les données de votre domaine et de les envoyer à leurs serveurs. Sans cela, il est facile pour un site Web malveillant d'explorer vos informations de session sur un autre site (comme Gmail ou Twitter) et d'effectuer des actions en votre nom. Malheureusement, cela provoque également les erreurs que nous voyons ci-dessus et cause souvent des problèmes aux développeurs essayant de terminer les tâches légitimes.

Exemple d'échec

Voyons ce qui ne fonctionne pas. Il s'agit d'un fichier JSON situé sur un domaine différent et nous voulons le charger à l'aide de la méthode Getjson de JQuery.

<code class="language-javascript">$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);</code>

Si vous ouvrez la console dans votre navigateur et l'essayez, vous verrez un message similaire à celui mentionné ci-dessus. Alors, que pouvons-nous faire?

Solutions possibles

Heureusement, tout n'est pas affecté par les politiques homologues. Par exemple, il est tout à fait possible de charger une image ou un script dans votre page à partir d'un domaine différent - vous le faites lorsque vous incluez jQuery à partir d'un CDN (par exemple). Cela signifie que nous pouvons créer une balise <script></script>, définir son attribut src à notre fichier JSON et l'injecter dans la page.

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

$("head").append(script);</script></code>

Bien que cela fonctionne, cela ne nous aide pas beaucoup, car nous ne pouvons pas accéder aux données qu'il contient.

débutant de JSONP

JSONP (au nom de JSON avec padding) est basé sur cette technique et nous fournit un moyen d'accéder aux données retournées. Il est implémenté en faisant renvoyer le serveur des données JSON contenant un appel de fonction ("populaire") que le navigateur peut alors interpréter. Cette fonction doit être définie dans la page qui évalue la réponse JSONP.

Voyons à quoi ressemble l'exemple précédent. Il s'agit d'un fichier JSON mis à jour qui enveloppe les données JSON d'origine dans une fonction jsonCallback.

<code class="language-javascript">function jsonCallback(json){
  console.log(json);
}

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

Cela enregistre les résultats attendus de la console. Nous avons maintenant Ajax (bien que assez limité) (bien que assez limité).

API tiers

Certaines API tierces vous permettent de spécifier le nom d'une fonction de rappel qui doit être exécutée lorsque la demande revient. Une telle API est l'API GitHub.

Dans l'exemple suivant, nous obtenons les informations utilisateur de John ReSig (JQuery Creator) et enregistrons la réponse à la console à l'aide de la fonction de rappel logResults.

<code class="language-javascript">function logResults(json){
  console.log(json);
}

$.ajax({
  url: "https://api.github.com/users/jeresig",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});</code>

Cela peut également être écrit comme:

<code class="language-javascript">$.getJSON("https://api.github.com/users/jeresig?callback=?",function(json){
  console.log(json);
});</code>

Le ? à la fin de l'URL dit à JQuery qu'il traite une demande JSONP au lieu de JSON. JQuery enregistre ensuite automatiquement la fonction de rappel, ce qu'elle appelle lorsque la demande revient.

Si vous souhaitez en savoir plus sur la méthode Getjson de JQuery, veuillez consulter: ajax / jQuery.getjson Exemple simple

Précautions

Mais comme vous l'avez peut-être réalisé maintenant, cette approche présente certains inconvénients.

Par exemple, JSONP ne peut effectuer que des demandes de GET du domaine croisé, et le serveur doit explicitement le prendre en charge. JSONP n'est pas sans problèmes de sécurité, alors introduisons brièvement d'autres solutions.

en utilisant l'agent

Le code côté serveur n'est pas soumis à la stratégie d'origine même et peut exécuter des demandes d'origine transversale sans aucun problème. Vous pouvez donc créer une sorte de proxy et l'utiliser pour récupérer toutes les données dont vous avez besoin. Reportez-vous à notre premier exemple:

<code class="language-php">/* proxy.php */
$url = "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec ($ch);
curl_close ($ch);
echo $result;</code>

dans le client:

<code class="language-javascript">$.getJSON("https://www.php.cn/link/28db3b5e7bfadf38b792da7192530ac1.com/proxy.php", function(json) {
  console.log(json);
})</code>

mais cette méthode a également ses inconvénients. Par exemple, si un site tiers utilise des cookies pour l'authentification, cette méthode ne fonctionnera pas.

CORS

Le partage de ressources croisées (CORS) est une spécification W3C qui permet aux navigateurs de communiquer entre les domaines. Cela se fait en incluant le nouvel en-tête HTTP d'accès à l'origine-Control-Allow-Origin dans la réponse.

En référence à notre premier exemple, vous pouvez ajouter ce qui suit au fichier .htaccess (en supposant Apache) pour permettre les demandes de différentes sources:

<code class="language-javascript">$.getJSON(
  "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
  function(json) { console.log(json); }
);</code>

(Si vous exécutez un serveur qui n'est pas apache, veuillez le vérifier ici: https://www.php.cn/link/819e2e55be8ef0957b56ea94356bfb79 )

Vous pouvez en savoir plus sur les COR dans l'un de nos tutoriels récents: en savoir plus sur CORS

Conclusion

JSONP vous permet de contourner les politiques homologues et, dans une certaine mesure, passer des appels Ajax interdomains. Ce n'est pas une pilule magique, et bien sûr, il a ses problèmes, mais dans certains cas, il peut s'avérer inestimable lorsque les données proviennent de différentes sources.

JSONP vous permet également d'extraire une variété de contenus à partir de différents services. De nombreux sites Web bien connus offrent des services JSONP (tels que Flickr) qui vous permettent d'accéder à leur contenu via des API prédéfinies. Vous pouvez en trouver une liste complète dans le répertoire API programmable.

(Ce qui suit est la partie FAQ, qui a été ajustée et simplifiée en fonction du texte d'origine pour éviter les informations en double)

FAQ sur JSONP (FAQ)

• Quelle est la principale différence entre JSON et JSONP? JSON et JSONP sont des formats utilisés pour traiter les données entre les serveurs et les applications Web. La principale différence est de savoir comment ils gèrent les demandes de domaine croisé. JSON ne peut pas prendre en charge les demandes de domaine croisé en raison de politiques homologues (mesures de sécurité implémentées dans les navigateurs Web). D'un autre côté, JSONP contourne cette politique en utilisant une méthode de remplissage, permettant aux données d'être demandées à des serveurs avec différents domaines de celle du client.

• Comment JSONP contourne-t-il la politique d'origine homosexuelle? JSONP contourne les politiques homologues en utilisant la méthode de rembourrage ou de "demande de remplissage". Dans cette méthode, le client demande des données de serveurs dans différents domaines en ajoutant la fonction de rappel à l'URL. Le serveur enveloppe ensuite les données demandées dans cette fonction et la renvoie au client. Le client exécute cette fonction pour accéder aux données. Cette méthode permet à JSONP de surmonter les limites du domaine croisé imposées par les politiques homologues.

• JSONP est-il sûr? Bien que JSONP fournisse une solution pour les politiques homologues, elle présente ses propres risques de sécurité. Étant donné que JSONP implique l'exécution de scripts reçus du serveur, si le serveur est corrompu, il ouvre la possibilité d'une attaque de script de site croisé (XSS). Par conséquent, assurez-vous d'utiliser JSONP uniquement avec des sources de confiance.

• JSONP peut-il gérer les réponses d'erreur? Contrairement à JSON, JSONP n'a pas de traitement d'erreur intégré. Si la demande JSONP échoue, le navigateur ne lance pas d'erreur et la fonction de rappel n'est pas exécutée. Pour gérer les erreurs dans JSONP, vous pouvez implémenter un mécanisme de délai d'expiration qui déclenche une erreur si la fonction de rappel n'est pas exécutée dans un délai spécifié.

• Comment faire une demande JSONP en utilisant jQuery? jQuery fournit un moyen facile de faire des demandes JSONP en utilisant la méthode $ .ajax (). Vous devez spécifier le type de données en tant que "JSONP" dans le paramètre $ .ajax ().

• Quelles sont les limites de JSONP? JSONP a certaines limites. Il ne prend en charge que les demandes GET et ne prend pas en charge les méthodes Post ou d'autres méthodes HTTP. Il manque également de capacités de gestion des erreurs. De plus, JSONP présente des risques de sécurité en raison de son approche de contournement des politiques homologues.

• JSONP est-il toujours utilisé maintenant? Bien que JSONP était une solution populaire pour les demandes de domaine croisé dans le passé, CORS a désormais une basse fréquence d'utilisation en raison de l'émergence de CORS (partage de ressources croisées), CORS fournit un domaine transversal plus sûr et plus puissant et plus puissant Demandes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!