Moyens de contourner la politique de la même origine

La même politique d'origine

Je voulais faire un wiki de communauté concernant les politiques de même origine HTML / JS pour aider les personnes qui recherchent ce sujet. C'est l'un des sujets les plus recherchés sur SO et il n'y a pas de wiki consolidé, alors je vais 🙂

La même politique d'origine empêche un document ou un script chargé d'une origine d'obtenir ou de définir des propriétés d'un document à partir d'une autre origine. Cette politique remonte à Netscape Navigator 2.0.

  • Comment débarrasser les appels JJAY AJAX?
  • Comment configurer UpdatePanel afin qu'il devienne vide la première fois et plus tard, après la mise à jour du rendu de la page et l'obtention de données de manière asynchrone
  • Quand est-il sécuritaire d'utiliser $ scope. $ Apply ()?
  • Comment charger le fichier PHP dans DIV par jQuery?
  • Utilisation de fichiers HTML5 avec AJAX et jQuery
  • Javascript: Lire le fichier texte à l'aide de AJAX
  • Quels sont vos moyens préférés d'appliquer les mêmes politiques d'origine?

    Veuillez conserver les exemples détaillés et, de préférence, associer vos sources.

  • Que fait le navigateur lorsque la source de l'iframe est javascript
  • Comment gérer les chaînes contenant du HTML en utilisant Angular-Translate?
  • Highcharts: comment changer la couleur de ligne lorsque survolent une série de scatterplot
  • Fonction d'exécution javascript après chargement complet de l'image
  • Ouverture d'un fichier dans le système de fichiers local en javascript
  • Comment utiliser des liens d'ancrage normaux avec le routeur réactif
  • 11 Solutions collect form web for “Moyens de contourner la politique de la même origine”

    La méthode document.domain

    • Type de méthode: iframe .

    Notez qu'il s'agit d'une méthode iframe qui définit la valeur de document.domain dans un suffixe du domaine actuel. Si tel est le cas, le domaine plus court est utilisé pour les vérifications d'origine ultérieures. Par exemple, supposons qu'un script dans le document http://store.company.com/dir/other.html exécute la déclaration suivante:

     document.domain = "company.com"; 

    Une fois cette instruction exécutée, la page passerait la vérification d'origine avec http://company.com/dir/page.html . Cependant, selon le même raisonnement, company.com n'a pas pu définir document.domain à othercompany.com .

    Avec cette méthode, vous pouvez autoriser JavaScript à partir d'un iframe provenant d'un sous-domaine sur une page provenant du domaine principal. Cette méthode n'est pas adaptée aux ressources entre domaines, car les navigateurs comme Firefox ne vous permettront pas de modifier le document.domain dans un domaine complètement étranger.

    Source: https://developer.mozilla.org/fr/Same_origin_policy_for_JavaScript

    La méthode de partage des ressources Cross-Origin

    • Type de méthode: AJAX .

    Cross-Origin Resource Sharing (CORS) est un brouillon de travail du W3C qui définit comment le navigateur et le serveur doivent communiquer lors de l'accès aux sources sur les origines. L'idée de base derrière CORS consiste à utiliser des en-têtes HTTP personnalisés pour permettre au navigateur et au serveur de connaître suffisamment l'un de l'autre pour déterminer si la requête ou la réponse doit réussir ou échouer.

    Pour une requête simple, qui utilise GET ou POST sans en-têtes personnalisés et dont le corps est text/plain , la demande est envoyée avec un en-tête supplémentaire appelé Origin . L'en-tête Origine contient l'origine (protocole, nom de domaine et port) de la page requise pour que le serveur puisse facilement déterminer si elle doit ou non répondre. Un exemple d'en-tête d' Origin pourrait ressembler à ceci:

     Origin: http://www.stackoverflow.com 

    Si le serveur décide que la demande doit être autorisée, elle envoie un en Access-Control-Allow-Origin tête Access-Control-Allow-Origin en faisant écho à la même origine qui a été envoyée ou * s'il s'agit d'une ressource publique. Par exemple:

     Access-Control-Allow-Origin: http://www.stackoverflow.com 

    Si cet en-tête manque ou si les origines ne correspondent pas, le navigateur refuse la demande. Si tout va bien, le navigateur traite la demande. Notez que ni les demandes ni les réponses ne contiennent des informations sur les cookies.

    L'équipe Mozilla suggère dans leur publication sur CORS que vous devriez vérifier l'existence de la propriété withCredentials pour déterminer si le navigateur prend en charge CORS via XHR. Vous pouvez ensuite coupler avec l'existence de l'objet XDomainRequest pour couvrir tous les navigateurs:

     function createCORSRequest(method, url){ var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr){ xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined"){ xhr = new XDomainRequest(); xhr.open(method, url); } else { xhr = null; } return xhr; } var request = createCORSRequest("get", "http://www.stackoverflow.com/"); if (request){ request.onload = function() { // ... }; request.onreadystatechange = handler; request.send(); } 

    Notez que pour que la méthode CORS fonctionne, vous devez avoir accès à n'importe quel type de mécanique d'en-tête de serveur et ne peut pas simplement accéder à une ressource tierce.

    Source: http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

    La méthode window.postMessage

    • Type de méthode: iframe .

    window.postMessage , lorsqu'il est appelé, provoque l' MessageEvent un MessageEvent à la fenêtre cible lorsque tout script en attente qui doit être exécuté est complet (p. Ex. Les gestionnaires d'événements restants si window.postMessage est appelé à partir d'un gestionnaire d'événements, des délais d'attente précédemment fixés, etc. ). Le MessageEvent a le message de type, une propriété de data qui est définie sur la valeur de chaîne du premier argument fourni à window.postMessage , une propriété d' origin correspondant à l'origine du document principal dans la fenetre d'appel de window.postMessage à la window.postMessage l'heure window.postMessage été appelé, et une propriété source qui est la fenêtre à partir de laquelle window.postMessage s'appelle.

    Pour utiliser window.postMessage , un auditeur d'événement doit être joint:

      // Internet Explorer window.attachEvent('onmessage',receiveMessage); // Opera/Mozilla/Webkit window.addEventListener("message", receiveMessage, false); 

    Et une fonction receiveMessage doit être déclarée:

     function receiveMessage(event) { // do something with event.data; } 

    L'iframe hors site doit également envoyer des événements correctement via postMessage :

     <script>window.parent.postMessage('foo','*')</script> 

    Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, quelle que soit l'emplacement du document dans la fenêtre, pour lui envoyer un message. Par conséquent, tout auditeur d'événement utilisé pour recevoir des messages doit d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés d'origine et éventuellement source. Cela ne peut pas être sous- estimé : le défaut de vérifier l' origin et éventuellement les propriétés source permet des attaques de script entre sites.

    Source: https://developer.mozilla.org/fr/DOM/window.postMessage

    La méthode Reverse Proxy

    • Type de méthode: Ajax

    La configuration d'un proxy inversé simple sur le serveur permettra au navigateur d'utiliser des chemins relatifs pour les requêtes Ajax, alors que le serveur agirait en tant que proxy dans n'importe quel emplacement distant.

    Si vous utilisez mod_proxy dans Apache, la directive de configuration fondamentale pour configurer un proxy inverse est le ProxyPass . Il est généralement utilisé comme suit:

     ProxyPass /ajax/ http://other-domain.com/ajax/ 

    Dans ce cas, le navigateur pourrait demander /ajax/web_service.xml comme URL relative, mais le serveur le servirait en agissant comme proxy vers http://other-domain.com/ajax/web_service.xml .

    Une caractéristique intéressante de cette méthode est que le proxy inverse peut facilement distribuer des requêtes vers plusieurs back-ends, agissant ainsi comme équilibreur de charge .

    J'utilise JSONP.

    En gros, vous ajoutez

     <script src="http://..../someData.js?callback=some_func"/> 

    sur ta page.

    Some_func () devrait être appelé afin que vous soyez informé que les données sont en cours.

    AnyOrigin n'a pas bien fonctionné avec certains sites https, alors je viens d'écrire une alternative open source appelée whateverorigin.org qui semble fonctionner bien avec https.

    Code sur github .

    La façon la plus récente de surmonter la même politique d'origine que j'ai trouvée est http://anyorigin.com/

    Le site est créé de sorte que vous lui donnez n'importe quel url et qu'il génère un code javascript / jquery pour vous qui vous permet d'obtenir le html / data, quel que soit son origine. En d'autres termes, il rend toute url ou page Web une demande JSONP.

    Je l'ai trouvé très utile 🙂

    Voici un exemple de code javascript de n'importe quelle origine:

     $.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){ $('#output').html(data.contents); }); 

    Je ne peux pas demander de crédit pour cette image, mais elle correspond à tout ce que je connais sur ce sujet et offre un peu d'humour en même temps.

    http://www.flickr.com/photos/iluvrhinestones/5889370258/

    Le JSONP vient à l'esprit:

    JSONP ou "JSON avec rembourrage" est un complément au format de base de données JSON, un modèle d'utilisation qui permet à une page de demander et utilise plus significativement JSON à partir d'un serveur autre que le serveur principal. JSONP est une alternative à une méthode plus récente appelée Cross-Origin Resource Sharing.

    Personnellement, window.postMessage est la manière la plus fiable que j'ai trouvée pour les navigateurs modernes. Vous devez faire un peu plus de travail pour vous assurer que vous ne vous laissez pas ouvert aux attaques XSS, mais c'est un compromis raisonnable.

    Il existe également plusieurs plugins pour les kits d'outils populaires de Javascript qui enveloppent window.postMessage qui fournissent des fonctionnalités similaires aux navigateurs plus anciens en utilisant les autres méthodes décrites ci-dessus.

    Eh bien, j'ai utilisé curl en PHP pour contourner cela. J'ai un service Web fonctionnant dans le port 82.

     <?php $curl = curl_init(); $timeout = 30; $ret = ""; $url="http://localhost:82/put_val?val=".$_GET["val"]; curl_setopt ($curl, CURLOPT_URL, $url); curl_setopt ($curl, CURLOPT_FOLLOWLOCATION, 1); curl_setopt ($curl, CURLOPT_MAXREDIRS, 20); curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5"); curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, $timeout); $text = curl_exec($curl); echo $text; ?> 

    Voici le javascript qui appelle le fichier PHP

     function getdata(obj1, obj2) { var xmlhttp; if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","phpURLFile.php?eqp="+obj1+"&val="+obj2,true); xmlhttp.send(); } 

    Mon HTML fonctionne sur WAMP dans le port 80. Alors, nous allons, la même politique d'origine a été contournée 🙂

    Voici quelques solutions et explications de la même politique d'origine:
    Thiru's Blog – La même politique d'origine du navigateur contourne

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.