Cross Domain
Die Same-Origin-Policy (SOP) stellt einen Sicherheitsmechanismus dar, der verhindert, dass www.a.de auf Ressourcen von www.b.de (z.B. über ein Script im Client) zugreifen kann. Grundsätzlich ist das eine gute Sache. Was aber wenn www.a.de und www.b.de mir gehören und ich bewusst einen Austausch herstellen will?
In diesem Fall gibt es einige Möglichkeiten, wobei aber die eine oder andere Einschränkung zu beachten ist.
Zugriff über Subdomains
Bevor ich auf das Beispiel von oben eingehe, folgender Fall vorweg: a.beispiel.de will auf b.beispiel.de (oder beispiel.de) zugreifen. Standardmäßig ist das nicht möglich, da die Herkunft (Origin) folgendermaßen definiert ist:
- identisches Protokoll (z.B. http)
- identischer Port (Standard 80)
- Und identischer Host (alles zwischen Protokoll und Port; z.B. a.beispiel.de)
Der Host ist also unterschiedlich. Für den Fall von Subdomain kann man aber auf beiden Seiten über JavaScript die Herkunft der Seite im HEAD ändern:
document.domain = " beispiel.de";
Nun kann man in a.beispiel.de ein iFrame von b.beispiel.de einfügen und über das DOM von a aus auf Inhalte von b zugreifen. Ein Zugriff per Ajax von a auf b ist allerdings nicht möglich.
Zugriff über unterschiedliche Hosts
Für den Fall dass die beiden Seiten nicht Subdomains voneinander sind, wird es etwas komplizierter, aber nicht unlösbar.
Einen guten Einstieg bietet Alex Sexton mit seinen Folien.
Beispiele speziell für Ajax finden sich bei David Müller.
Grundsätzlich sind folgende Lösungen praktikabel:
JSONP
Diese Technik wird schon länger für den Datenaustausch per Ajax eingesetzt. Hierbei wird der Umstand genutzt, dass der Script-Tag nicht unter die Domainbeschränkungen fällt. Im Script-Tag wird die Url eines JSONP Dienstes angegeben. Die JSON Daten werden vom Dienst in einem Funktionsaufruf eingepackt. Am Client kann über die gleichnamige Funktion auf die Daten zugegriffen werden. JQuery hilft hier bei ajax() mit dem Parameter jsonp Eine genaue Beschreibung findet sich hier: JSONP Beispiel.
CORS
Cross-Origin Resource Sharing (CORS) ist eine W3C Spezifikation und stellt eine Alternative zu JSONP dar, indem nicht nur GET Anfragen möglich sind und die Umsetzung standardisiert ist.
HTML5Rocks bietet ein gutes Beispiel für einen JavaScript Client, das auch einen Fallback für IE9 über XDomainRequest statt XMLHttpRequest für den Ajaxrequest bietet. Auf der Serverseite muss man als Gegenstück einen Header mitsenden, der den Zugriff erlaubt.
header('Access-Control-Allow-Origin: http://www.anfragendedomain.de');
Das wars eigentlich schon. Wäre da nicht ein paar „Aber“. Z.B.: Der Browsersupport sieht zwar gut aus. Aber die Alternative für IE9 (XDomainRequest) bietet keine Möglichkeit zur Authentifizierung. Das heißt: Unter IE9 kann man nicht auf geschützte Inhalte von einer anderen Domain zugreifen. In vielen Fällen mag das aber nicht nötig sein.
Weitere Einschränkungen bei MSDN.
PostMessage
Mit HTML5 ist es möglich Daten von einem Fenster zu einem anderen zu schicken (Beispiel).
Für JQuery gibt es ein einfaches Plugin.
Mit diesem Plugin geht das “Nachrichtenschicken” recht einfach. Angenommen B enthält ein iFrame von B. Und B will eine Nachricht an A schicken:
A:
$( document ).ready(function() {
$.receiveMessage(
function(e){
alert( e.data );
},
'http://www.b.de'
);
});
Und B:
$( document ).ready(function() {
$.postMessage(
'hello from B',
'http://www.a.de',
parent
);
});
Browsersupport sieht gut aus, allerdings mit Einschränkungen bei – wer hätte es gedacht IE. Hier können nur zwischen iFrames Daten ausgetauscht werden – nicht zwischen Fenstern oder Tabs. Dies sollte für viele Fälle aber ausreichend sein.
Proxy
Eine weitere oft genutzte Möglichkeit ist ein Proxy, der die Daten von www.b.de abruft und für www.a.de bereitstellt. Unter PHP gibt es einige Möglichkeiten: fopen, file_get_contents oder cURL. Aber was auf den ersten Blick einfach erscheint wird bei Cookies, Headern und Authentifizierung wieder kompliziert.
Einige Proxies für PHP:
https://github.com/softius/php-cross-domain-proxy
https://github.com/katzgrau/ajax-proxy
https://github.com/cowboy/php-simple-proxy
Gute Zusammenfassung mit Codebeispielen auch hier.
Update 22.06.2016: gutes Tutorial: bei Sitepoint
Als erster einen Kommentar schreiben.
Schreibe einen Kommentar