Recherche…
Introduction
La politique de même origine est utilisée par les navigateurs Web pour empêcher les scripts d'accéder au contenu distant si l'adresse distante n'a pas la même origine que le script. Cela empêche les scripts malveillants d'exécuter des requêtes sur d'autres sites Web pour obtenir des données sensibles.
L' origine de deux adresses est considérée comme identique si les deux URL ont le même protocole , le même nom d'hôte et le même port .
Façons de contourner la politique de la même origine
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.
Communication croisée d'origine sécurisée avec les messages
La méthode window.postMessage() et son gestionnaire d'événement relatif window.onmessage peuvent être utilisés en toute sécurité pour activer la communication entre les origines.
La méthode postMessage() de la window cible peut être appelée pour envoyer un message à une autre window , qui pourra l'intercepter avec son onmessage événement onmessage , l'élaborer et, si nécessaire, envoyer une réponse à la fenêtre de l'expéditeur en utilisant postMessage() nouveau.
Exemple de fenêtre communiquant avec un cadre enfant
Contenu de
http://main-site.com/index.html:<!-- ... --> <iframe id="frame-id" src="http://other-site.com/index.html"></iframe> <script src="main_site_script.js"></script> <!-- ... -->Contenu de
http://other-site.com/index.html:<!-- ... --> <script src="other_site_script.js"></src> <!-- ... -->Contenu de
main_site_script.js:// Get the <iframe>'s window var frameWindow = document.getElementById('frame-id').contentWindow; // Add a listener for a response window.addEventListener('message', function(evt) { // IMPORTANT: Check the origin of the data! if (event.origin.indexOf('http://other-site.com') == 0) { // Check the response console.log(evt.data); /* ... */ } }); // Send a message to the frame's window frameWindow.postMessage(/* any obj or var */, '*');Contenu de
other_site_script.js:window.addEventListener('message', function(evt) { // IMPORTANT: Check the origin of the data! if (event.origin.indexOf('http://main-site.com') == 0) { // Read and elaborate the received data console.log(evt.data); /* ... */ // Send a response back to the main window window.parent.postMessage(/* any obj or var */, '*'); } });
