Möglichkeiten zur Umgehung der Same-Origin-Policy

Dieselbe Ursprungspolitik

Ich wollte ein Community-Wiki zu HTML/JS erstellen Same-Origin-Richtlinien um hoffentlich allen zu helfen, die nach diesem Thema suchen. Dies ist eines der meistgesuchten Themen auf SO und es gibt kein konsolidiertes Wiki dafür, also los geht’s 🙂

Die Richtlinie für denselben Ursprung verhindert, dass ein Dokument oder Skript, das von einem Ursprung geladen wird, Eigenschaften eines Dokuments von einem anderen Ursprung erhält oder festlegt. Diese Richtlinie geht bis auf Netscape Navigator 2.0 zurück.

Was sind einige Ihrer bevorzugten Methoden, um Same-Origin-Richtlinien zu umgehen?

Bitte halten Sie die Beispiele ausführlich und verlinken Sie vorzugsweise auch Ihre Quellen.

Die document.domain Methode

• Methodentyp: iframe.

Beachten Sie, dass dies eine Iframe-Methode ist, die den Wert von document.domain auf ein Suffix der aktuellen Domäne setzt. Wenn dies der Fall ist, wird die kürzere Domain für nachfolgende Herkunftsprüfungen verwendet. Nehmen Sie beispielsweise ein Skript im Dokument an http://store.company.com/dir/other.html führt die folgende Anweisung aus:

document.domain = "company.com";

Nachdem diese Anweisung ausgeführt wurde, würde die Seite die Ursprungsprüfung mit bestehen http://company.com/dir/page.html. Aus der gleichen Begründung konnte company.com jedoch nicht gesetzt werden document.domain zu othercompany.com.

Mit dieser Methode wäre es Ihnen erlaubt, Javascript von einem iFrame aus einer Subdomain auf einer Seite aus der Hauptdomain auszuführen. Diese Methode ist nicht für domänenübergreifende Ressourcen geeignet, da Browser wie Firefox es Ihnen nicht erlauben, die zu ändern document.domain zu einer völlig fremden Domäne.

Quelle: https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript

Die Cross-Origin Resource Sharing-Methode

• Methodentyp: AJAX.

Cross-Origin-Ressourcenfreigabe (CORS) ist ein W3C-Arbeitsentwurf, der definiert, wie Browser und Server kommunizieren müssen, wenn auf Quellen über mehrere Ursprünge hinweg zugegriffen wird. Die Grundidee hinter CORS besteht darin, benutzerdefinierte HTTP-Header zu verwenden, damit sowohl der Browser als auch der Server genug voneinander wissen, um zu bestimmen, ob die Anfrage oder Antwort erfolgreich sein soll oder fehlschlägt.

Für eine einfache Anfrage eine, die beides verwendet GET oder POST ohne benutzerdefinierte Header und dessen Körper ist text/plainwird die Anfrage mit einem zusätzlichen Header namens gesendet Origin. Der Origin-Header enthält den Ursprung (Protokoll, Domänenname und Port) der anfordernden Seite, sodass der Server leicht feststellen kann, ob er eine Antwort liefern soll oder nicht. Ein Beispiel Origin Header könnte so aussehen:

Origin: http://www.stackoverflow.com

Wenn der Server entscheidet, dass die Anfrage zugelassen werden soll, sendet er a Access-Control-Allow-Origin Header, der denselben Ursprung zurückgibt, der gesendet wurde, oder * wenn es sich um eine öffentliche Ressource handelt. Zum Beispiel:

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

Wenn dieser Header fehlt oder die Ursprünge nicht übereinstimmen, verweigert der Browser die Anfrage. Wenn alles in Ordnung ist, verarbeitet der Browser die Anfrage. Beachten Sie, dass weder die Anfragen noch die Antworten Cookie-Informationen enthalten.

Das Mozilla-Team schlägt vor ihren Beitrag über CORS dass Sie die Existenz der überprüfen sollten withCredentials -Eigenschaft, um festzustellen, ob der Browser CORS über XHR unterstützt. Sie können dann mit der Existenz der koppeln XDomainRequest Objekt, um alle Browser abzudecken:

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();
}

Beachten Sie, dass Sie, damit die CORS-Methode funktioniert, Zugriff auf jede Art von Server-Header-Mechanik haben müssen und nicht einfach auf Ressourcen von Drittanbietern zugreifen können.

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

Die window.postMessage Methode

• Methodentyp: iframe.

window.postMessagewenn aufgerufen, verursacht a MessageEvent im Zielfenster versendet werden, wenn ein ausstehendes Skript, das ausgeführt werden muss, abgeschlossen ist (z. B. verbleibende Event-Handler if window.postMessage wird von einem Event-Handler aufgerufen, zuvor festgelegte ausstehende Timeouts usw.). Die MessageEvent hat den Typ Nachricht, a data -Eigenschaft, die auf den Zeichenfolgenwert des ersten bereitgestellten Arguments festgelegt wird window.postMessageein origin Eigenschaft, die dem Ursprung des Hauptdokuments im aufrufenden Fenster entspricht window.postMessage damals window.postMessage gerufen wurde, und a source Eigenschaft, die das Fenster von dem ist window.postMessage wird genannt.

Benutzen window.postMessagemuss ein Ereignis-Listener angehängt werden:

    // Internet Explorer
    window.attachEvent('onmessage',receiveMessage);

    // Opera/Mozilla/Webkit
    window.addEventListener("message", receiveMessage, false);

Und ein receiveMessage Funktion muss deklariert werden:

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

Der Offsite-Iframe muss auch Ereignisse ordnungsgemäß per senden postMessage:

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

Jedes Fenster kann jederzeit auf diese Methode in jedem anderen Fenster zugreifen, unabhängig von der Position des Dokuments im Fenster, um ihm eine Nachricht zu senden. Folglich muss jeder Ereignis-Listener, der zum Empfangen von Nachrichten verwendet wird, zuerst die Identität des Absenders der Nachricht überprüfen, indem er die Ursprungs- und möglicherweise Quelleigenschaften verwendet. Das ist nicht zu unterschätzen: Fehler bei der Überprüfung origin und möglicherweise source properties ermöglicht Cross-Site-Scripting-Angriffe.

Quelle: https://developer.mozilla.org/en/DOM/window.postMessage

Die Reverse-Proxy-Methode

• Methodentyp: Ajax

Einfach einrichten Reverse-Proxy auf dem Server erlaubt es dem Browser, relative Pfade für die Ajax-Anfragen zu verwenden, während der Server als Proxy für jeden entfernten Standort fungiert.

Bei Verwendung mod_proxy in Apache ist die grundlegende Konfigurationsdirektive zum Einrichten eines Reverse-Proxy die ProxyPass. Es wird normalerweise wie folgt verwendet:

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

In diesem Fall wäre der Browser in der Lage, eine Anfrage zu stellen /ajax/web_service.xml als relative URL, aber der Server würde dies dienen, indem er als Proxy fungiert http://other-domain.com/ajax/web_service.xml.

Ein interessantes Merkmal dieser Methode ist, dass der Reverse-Proxy Anfragen problemlos an mehrere Back-Ends verteilen kann und somit als Lastenausgleicher.

Ich verwende JSONP.

Im Grunde fügen Sie hinzu

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

Auf deiner Seite.

some_func() sollte aufgerufen werden, damit Sie benachrichtigt werden, dass die Daten vorhanden sind.

AnyOrigin funktionierte mit einigen https-Sites nicht gut, also habe ich einfach eine Open-Source-Alternative namens geschrieben whatorigin.org das scheint mit https gut zu funktionieren.

Code auf github.

Der jüngste Weg zur Überwindung der Same-Origin-Policy, den ich gefunden habe, ist http://anyorigin.com/

Die Site ist so aufgebaut, dass Sie ihr einfach eine beliebige URL geben und Javascript/Jquery-Code für Sie generieren, mit dem Sie die HTML/Daten abrufen können, unabhängig von ihrer Herkunft. Mit anderen Worten, es macht jede URL oder Webseite zu einer JSONP-Anfrage.

Ich fand es ziemlich nützlich 🙂

Hier ist ein Beispiel-Javascript-Code von anyorigin:

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

Ich kann keine Anerkennung für dieses Bild beanspruchen, aber es passt zu allem, was ich zu diesem Thema weiß, und bietet gleichzeitig ein bisschen Humor.

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

Die JSONP kommt in den Sinn:

JSONP oder „JSON mit Auffüllung“ ist eine Ergänzung zum Basis-JSON-Datenformat, ein Verwendungsmuster, das es einer Seite ermöglicht, JSON von einem anderen Server als dem primären Server anzufordern und sinnvoller zu verwenden. JSONP ist eine Alternative zu einer neueren Methode namens Cross-Origin Resource Sharing.