Comment utiliser JSONP pour résoudre le problème XSS?

Question

J'ai une partie de javascript s'exécutant sur un serveur de jetée qui envoie un XMLHTTPRequest à un scoket sur un autre serveur (serveur de wamp). La requête est envoyée à la socket, mais la réponse XHR semble être bloquée.

J'ai entendu dire que je peux utiliser JSONP pour surmonter ce problème. Cependant, comme je suis nouveau à la fois javascript et je n'ai jamais utilisé la technique JSONP avant d'apprécier grandement toute aide dans la façon d'utiliser cette technique?

function sendPost(url, postdata, callback) { 

xmlHttp=GetXmlHttpObject() 

if (xmlHttp==null) { 
    alert ("Browser does not support HTTP Request") 
    return 
} 

xmlHttp.onreadystatechange=callback 
xmlHttp.open("POST",url,true) 
xmlHttp.send(postdata); 

} 

function sendInitRQ(width, height) { 

var post = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><command  type=\"init\"><width>" + width + "</width><height>" + height + "</height></command>"; 

sendPost("http://localhost:80/socket.php", post, initReturned); 

} 

Je sais que la prise php est RECEVOIR le poste quand je vérifie le journal du serveur je reçois un 200 sur la demande get. Je veux juste savoir comment puis-je utiliser l'approche JSONP? J'ai vu des examens de l'approche mais je ne suis toujours pas sûr de la façon de le faire.

Answer 1

La technique JSONP utilise un mécanisme complètement différent pour émettre des requêtes HTTP à un serveur et agir sur la réponse. Il nécessite un code de coopération dans la page du client et sur le serveur. Le serveur doit avoir une URL qui répond aux requêtes HTTP "GET" avec un bloc de JSON enveloppé dans un appel de fonction. Ainsi, vous ne pouvez pas simplement faire des transactions JSONP à un ancien serveur; ce doit être un serveur qui fournit explicitement la fonctionnalité.

L'idée est que votre code côté client crée un bloc <script> dynamiquement, avec l'attribut "src" défini sur l'URL du serveur JSONP. L'URL doit contenir un paramètre indiquant au serveur le nom de la fonction Javascript que vous prévoyez appeler avec les données JSON. (Le nom exact du paramètre à utiliser dépend du serveur, en général c'est "callback", mais j'en ai vu d'autres qui utilisent "jsonp".) Le client doit bien sûr avoir cette fonction dans la portée globale. En d'autres termes, si vous avez une fonction comme

function handleJSON(json) { 
    var something = json.something; 
    // ... whatever ... 
} 

alors votre URL indique au serveur d'appeler « handleJSON », et la réponse du serveur devrait ressembler à ceci:

handleJSON({"id": 102, "something": { "more": "data", "random": true }}); 

Ainsi, lorsque le bloc <script> est chargé à partir de l'URL "src" que vous avez donné, le navigateur va interpréter le contenu (la réponse du serveur) et votre fonction sera appelée. Il devrait être clair que vous ne devriez faire des requêtes JSONP qu'aux serveurs de confiance, puisqu'ils envoient du code à exécuter dans votre client, avec un accès à toutes les sessions actives que votre client a avec d'autres sites sécurisés.

modifier — Voici un bel article: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/