Analyse approfondie des principes des connaissances JSONP cross-domain

JavaScript est une technologie de script dynamique frontale souvent utilisée dans le développement Web. En JavaScript, il existe une restriction de sécurité très importante appelée « Same-Origin Policy ». Cette politique impose des restrictions importantes sur le contenu de la page auquel le code JavaScript peut accéder, c'est-à-dire que JavaScript ne peut accéder qu'au contenu du même domaine que le document qui le contient.

La stratégie de sécurité JavaScript est particulièrement importante lors de la programmation multi-iframe ou multi-fenêtres, ainsi que de la programmation Ajax. Selon cette politique, le code JavaScript contenu dans la page sous baidu.com ne peut pas accéder au contenu de la page sous le nom de domaine google.com ; même les pages situées entre différents sous-domaines ne peuvent pas accéder entre elles via le code JavaScript. L'impact sur Ajax est que les requêtes Ajax implémentées via XMLHttpRequest ne peuvent pas soumettre de requêtes à différents domaines. Par exemple, les pages sous abc.example.com ne peuvent pas soumettre de requêtes Ajax à def.example.com, etc.

Cependant, lors de la programmation frontale approfondie, des opérations inter-domaines sont inévitablement nécessaires. À l'heure actuelle, la « même politique d'origine » semble trop stricte. La requête GET inter-domaines JSONP est une solution courante. Examinons comment l'inter-domaine JSONP est implémenté et discutons du principe de l'inter-domaine JSONP.

La méthode de soumission de requêtes HTTP à différents domaines en créant des nœuds <script> dans la page est appelée JSONP. Cette technologie peut résoudre le problème de la soumission de requêtes Ajax entre domaines. JSONP fonctionne comme décrit ci-dessous : Supposons qu'une requête GET soit soumise à <a href="http://example1.com/index.php">http://example2.com</a>/getinfo.php dans la page <a href="http://example2.com">http://example1.com/index.php</a>, nous pouvons Le code JavaScript suivant est placé dans la page <a href="http://example1.com/index.php">http://example1.com/index.php</a> à implémenter : <div class="codetitle"> <a style="CURSOR: pointer" data="12864" class="copybut" id="copybut12864" onclick="doCopy('code12864')">Copier le code</a> Le code est le suivant :</div> <div class="codebody" id="code12864"> var eleScript= document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = "<a href="http://example2.com/getinfo.php">http://example2.com/getinfo.php</a>"; document.getElementsByTagName("HEAD")[0].appendChild(eleScript); </div> Lorsque la requête GET revient depuis <a href="http://example2.com/getinfo.php">http://example2.com/getinfo.php</a>, un morceau de code JavaScript peut être renvoyé. Ce code sera automatiquement exécuté et pourra être utilisé pour appeler http: //example1.com/index.php<a href="http://example1.com/index.php">Une fonction de rappel dans la page. </a> L'avantage de JSONP est : il n'est pas limité par la politique de même origine comme la requête Ajax implémentée par l'objet XMLHttpRequest ; il a une meilleure compatibilité et peut s'exécuter dans les anciens navigateurs XMLHttpRequest ou ActiveX. est requis et une fois la demande terminée, le résultat peut être renvoyé en appelant le rappel. L'inconvénient de JSONP est : il ne prend en charge que les requêtes GET mais pas les autres types de requêtes HTTP telles que POST, il ne prend en charge que les requêtes HTTP inter-domaines et ne peut pas résoudre le problème de deux pages dans des domaines différents ; . Comment effectuer des appels JavaScript entre . Autre exemple : <div class="codetitle"> <a style="CURSOR: pointer" data="4578" class="copybut" id="copybut4578" onclick="doCopy('code4578')">Copier le code</a> Le code est le suivant :<div class="codebody" id="code4578"> var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId': $("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")}; $.ajax({ async: faux, URL : http://cross-domain dns/document!searchJSONResult.action, Tapez : "OBTENIR", Type de données : 'jsonp', jsonp : 'jsoncallback', Données : qsData, Délai d'expiration : 5000, avantEnvoyer : function(){ //Cette méthode n'est pas déclenchée en mode jsonp. La raison peut être que si dataType est spécifié comme jsonp, ce n'est plus un événement ajax . }, Succès : function (json) {//La fonction de rappel prédéfinie par jquery côté client. Après avoir obtenu avec succès les données json sur le serveur cross-domain, cette fonction de rappel sera exécutée dynamiquement . Si(json.actionErrors.length!=0){ alert(json.actionErrors); } genDynamicContent(qsData,type,json); }, Complet : function(XMLHttpRequest, textStatus){ $.unblockUI({ fadeOut: 10 } ); }, erreur : fonction (xhr) { //Cette méthode n'est pas déclenchée en mode jsonp. La raison peut être que si dataType est spécifié comme jsonp, ce n'est plus un événement ajax . //Gestion des erreurs de demande alert("Erreur de demande (veuillez vérifier l'état du réseau pertinent.)"); } }); </div> Parfois vous le verrez écrit comme ceci : <div class="codetitle"><a style="CURSOR: pointer" data="82552" class="copybut" id="copybut82552" onclick="doCopy('code82552')">Copier le code</a> Le code est le suivant :</div> <div class="codebody" id="code82552"> $.getJSON("http://cross-domain dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?", Fonction(json){ If(json.Attribute name==value){ // Exécuter le code } }); </div> Cette méthode est en fait une encapsulation avancée de l'API $.ajax({..}) dans l'exemple ci-dessus. Certains des paramètres sous-jacents de l'API $.ajax sont encapsulés et non visibles. De cette façon, jquery sera assemblé dans la requête d'obtention d'url suivante : <div class="codetitle"><a style="CURSOR: pointer" data="22073" class="copybut" id="copybut22073" onclick="doCopy('code22073')">Copier le code</a> Le code est le suivant :</div> <div class="codebody" id="code22073"> http://cross-domain dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord= Utiliser le cas&currentUserId=5351&conditionBean.pageSize=15 Côté réponse (http://cross-domain dns/document!searchJSONResult.action), utilisez jsoncallback = request.getParameter("jsoncallback") pour obtenir le nom de la fonction js à rappeler ultérieurement côté jquery : jsonp1236827957501 puis le contenu de la réponse Pour une balise de script : "jsonp1236827957501(" tableau json généré en fonction des paramètres de la requête " " ; jquery chargera et appellera dynamiquement cette balise js via la méthode de rappel : jsonp1236827957501 (tableau json) ; atteint l’objectif d’échange de données entre domaines. Principe JSONP Le principe le plus fondamental de JSONP est d'ajouter dynamiquement une balise <script>, et l'attribut src de la balise script n'a aucune restriction inter-domaines. De cette façon, cette méthode cross-domain n'a rien à voir avec le protocole ajax XmlHttpRequest. De cette façon, le "problème inter-domaines jQuery AJAX" est devenu une fausse proposition. Le nom de la méthode jquery $.ajax est trompeur. Si définie sur dataType : 'jsonp', cette méthode $.ajax n'a rien à voir avec ajax XmlHttpRequest, et sera remplacée par le protocole JSONP. JSONP est un protocole non officiel qui permet d'intégrer des balises Script côté serveur et de les renvoyer au client, permettant un accès inter-domaines sous forme de rappels javascript. JSONP est JSON avec remplissage. En raison des restrictions de la politique de même origine, XmlHttpRequest est uniquement autorisé à demander des ressources à la source actuelle (nom de domaine, protocole, port). Si nous voulons faire une requête inter-domaine, nous pouvons faire une requête inter-domaine en utilisant la balise script de HTML et renvoyer le code de script à exécuter dans la réponse, où l'objet javascript peut être transmis directement en utilisant JSON. Cette méthode de communication inter-domaines est appelée JSONP. Fonction jsonCallback jsonp1236827957501(....) : Elle est enregistrée par le client du navigateur Après avoir obtenu les données json sur le serveur cross-domain, la fonction de rappel Le processus d'exécution de Jsonp est le suivant : Enregistrez d'abord un rappel (tel que : 'jsoncallback') sur le client, puis transmettez le nom du rappel (tel que : jsonp1236827957501) au serveur. Remarque : Une fois que le serveur a obtenu la valeur de rappel, il doit utiliser jsonp1236827957501(...) pour inclure le contenu json à afficher. À ce stade, les données json générées par le serveur peuvent être correctement reçues par le client. Utilisez ensuite la syntaxe javascript pour générer une fonction. Le nom de la fonction est la valeur du paramètre transmis 'jsoncallback' jsonp1236827957501. Enfin, les données json sont placées directement dans la fonction en tant que paramètre, générant ainsi un document de syntaxe js et le renvoyant au client. Le navigateur client analyse la balise de script et exécute le document javascript renvoyé. À ce stade, les données du document javascript sont transmises en tant que paramètre à la fonction de rappel prédéfinie par le client (telle que la méthode jquery $.ajax() dans. l'exemple ci-dessus) Succès encapsulé : fonction (json)). On peut dire que la méthode jsonp est en principe cohérente avec <script src="http://cross-domain/...xx.js"></script> largement pour réaliser un échange de données entre domaines). JSONP est un comportement d'injection de script (Script Injection), il présente donc certains risques de sécurité.

Alorspourquoi jquery ne prend-il pas en charge la publication inter-domaines ?

Bien que l'utilisation de post pour générer dynamiquement une iframe puisse atteindre l'objectif de publication inter-domaines (c'est ainsi qu'un expert en js a corrigé jquery1.2.5), il s'agit d'une méthode relativement extrême et n'est pas recommandée.

On peut également dire que la méthode get inter-domaines est légale et que la méthode post est considérée comme illégale du point de vue de la sécurité. Il est préférable de ne pas adopter la mauvaise approche en dernier recours.

La demande d'accès inter-domaines côté client semble avoir attiré l'attention du w3c. Selon les informations, la norme html5 WebSocket prend en charge l'échange de données entre domaines et devrait être une solution facultative pour l'échange de données entre domaines. à l'avenir.

Prenons un exemple super simple :

Copier le code Le code est le suivant :

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml" >
Jsonp をテスト <スクリプトタイプ="text/javascript"> 関数 jsonpCallback(result)
アラート(結果.msg);

Derniers articles par auteur