JavaScript Façons de contourner la politique de la même origine


Exemple

En ce qui concerne les moteurs JavaScript côté client (exécutés dans un navigateur), il n’existe pas de solution simple pour demander du contenu provenant de sources autres que le domaine actuel. (Par ailleurs, cette limitation n'existe pas dans les outils de serveur JavaScript tels que Node JS.)

Cependant, il est (dans certaines situations) possible de récupérer des données d’autres sources en utilisant les méthodes suivantes. Veuillez noter que certaines d’entre elles peuvent présenter des solutions de contournement ou des solutions de contournement au lieu de faire appel à des systèmes de production de solutions.

Méthode 1: CORS

Aujourd'hui, la plupart des API publiques permettent aux développeurs d'envoyer des données de manière bidirectionnelle entre le client et le serveur en activant une fonctionnalité appelée CORS (Cross-Origin Resource Sharing). Le navigateur vérifie si un en-tête HTTP ( Access-Control-Allow-Origin ) est défini et que le domaine du site demandeur est répertorié dans la valeur de l'en-tête. Si c'est le cas, le navigateur autorisera l'établissement de connexions AJAX.

Cependant, comme les développeurs ne peuvent pas modifier les en-têtes de réponse des autres serveurs, cette méthode ne peut pas toujours être utilisée.

Méthode 2: JSONP

JSON avec ajout de P est généralement considéré comme une solution de contournement. Ce n'est pas la méthode la plus simple, mais le travail est toujours fait. Cette méthode tire parti du fait que les fichiers de script peuvent être chargés à partir de n'importe quel domaine. Cependant, il est essentiel de mentionner que la demande de code JavaScript provenant de sources externes constitue toujours un risque potentiel pour la sécurité, ce qui devrait généralement être évité si une solution plus efficace est disponible.

Les données demandées à l'aide de JSONP sont généralement JSON , ce qui correspond à la syntaxe utilisée pour la définition d'objet en JavaScript, ce qui rend cette méthode de transport très simple. Une façon courante de laisser les sites Web utiliser les données externes obtenues via JSONP consiste à les encapsuler dans une fonction de rappel, définie via un paramètre GET dans l’URL. Une fois le fichier de script externe chargé, la fonction sera appelée avec les données comme premier paramètre.

<script>
function myfunc(obj){
    console.log(obj.example_field);
}
</script>
<script src="http://example.com/api/endpoint.js?callback=myfunc"></script>

Le contenu de http://example.com/api/endpoint.js?callback=myfunc peut ressembler à ceci:

myfunc({"example_field":true})

La fonction doit toujours être définie en premier, sinon elle ne sera pas définie lors du chargement du script externe.