Was ist die Same-Origin-Policy?
In kurzen Worten: Die Same-Origin-Policy (SOP) ist eine Eigenschaft der Webbrowser, welche verhindert, dass Webseiten (bzw. deren Scripte) auf Inhalte zugreifen können, die aus einer anderen Quelle (Origin) stammen.
Was das genau bedeutet, werden wir weiter unten sehen - machen wir zuerst ein kleines Experiment:
Ausprobieren:
AJAX-Abruf vom 'eigenen' Server:
Antwort:
Im nebenstehenden Beispiel veranlasst der Klick auf den Button eine AJAX-Abfrage an einen Webservice, der die IP-Adresse des Client-PCs ermittelt und an den Browser zurücksendet. Das Ergebnis wird dann im Feld "Antwort" dargestellt. Wenn alles richtig funktioniert, und das ist in diesem Beispiel durchaus anzunehmen, sollte ein kurzer Text erscheinen, der die IP-Adresse des aufrufenden PCs angibt sowie das Datum und die Uhrzeit der Abfrage.
Wichtig ist die Anmerkung, dass in diesem ersten Beispiel der Webservice ein PHP-Programm ist, das auf demselben Webserver läuft, von dem diese HTML-Seite zuvor geladen wurde. Hier also "jsonp.eu".
Ausprobieren:
AJAX-Abruf von einem 'fremden' Server:
Antwort:
Was wäre nun, wenn wir einen Webservice aufrufen wollen, der auf einem anderen Server läuft? Genau dies macht das zweite Experiment. Die Anwendung entspricht vollständig dem ersten Beispiel. Der Button löst wieder eine AJAX-Abfrage im Hintergrund aus, die diesmal allerdings einen fremden Server anspricht ("webservice.helmutkarger.de").
Interessanterweise funktioniert, je nach Browser, diese Abfrage entweder überhaupt nicht oder der Anwender wird nach einer Freigabe gefragt.
Sehen wir uns dazu untenstehende Aufzeichnung des Datenverkehrs (mit Wireshark erstellt) an. In Frame 11 - das ist die oberste grün hinterlegte Zeile - fragt der Client per "GET"-Kommando beim Webservice (/php/webservice.php) an. Nun verweigert nicht etwa der Webservice die Antwort - im Gegenteil, der Server antwortet ganz ordungsgemäß mit "200", was einem OK entspricht.
Exkurs: Was ist eigentlich ...
AJAX?
"Asynchronous JavaScript and XML" - ist ein Datenübertragungsverfahren, das es einer bereits im Browser geladenen Webseite ermöglicht, Daten mit dem Server auszutauschen. Dabei erfolgt die Datenübertragung im Hintergrund, also ohne dass die Webseite neu geladen werden muss. Das ermöglicht die Realisierung von Web-Anwendungen, die typischen Windowsprogrammen in ihrer Funktionalität und im "Look and Feel" sehr nahekommen.
Die Akteure bei AJAX sind in der Regel JavaScript mit Hilfe des XMLHttpRequest-Objekts auf der Seite des Browsers und PHP auf der Serverseite. XML kann dabei das Format der übertragenen Daten sein, muss aber nicht. Zunehmend wird auch JSON verwendet.
Asynchron bedeutet in diesem Zusammenhang, dass das JavaScript-Programm mit der weiteren Ausführung nicht wartet, bis die Serverantwort zurückkommt. Die Programmverarbeitung wird unmittelbar nach Absenden des Requests fortgesetzt. Für die Antwort wird eine Callback-Funktion bereitgestellt, die dann aufgerufen wird, wenn die Serverantwort eingeht.
Zu sehen ist das in der übernächsten Zeile zu Frame 13 und in dessen Detaildarstellung, die direkt darunter folgt. In der gelb hinterlegten Passage ganz unten sehen wir auch den Dateninhalt ("Ihre IP-Adrese lautet ..."), den wir von unserem Versuch mit dem eigenen Server kennen. Die Schlussfolgerung lautet: Der Webservice liefert die Daten aus, sie kommen beim Client-PC auch an, der Browser verweigert jedoch den Zugriff darauf. Hier wirkt die Same-Origin-Policy, die dem Browser vorschreibt, Zugriffe auf Daten aus einer anderen Quelle als dem Ursprung der Webseite generell abzublocken.
Was genau meint der Begriff "Same-Origin"?
HTML-Seite und Daten, auf die per AJAX zugegriffen werden soll, müssen also "denselben Ursprung" haben. Dabei meint "Same Origin" die Übereinstimmung der folgenden Punkte:
- Protokoll (also http oder https),
- Domäne (z.B. jsonp.eu) und
- Port (z.B. 80 für http oder 443 für https)
Sobald einer der drei Punkte zwischen der geladenen Webseite und dem AJAX-Aufruf abweicht, wird die SOP den Zugriff auf die AJAX-Daten verweigern.
Wozu dient die SOP?
Die Same-Origin-Policy ist ein Sicherheitskonzept im Browser, das verhindern soll, dass Scriptsprachen auf Daten zugreifen und/oder diese manipulieren können, wenn die Daten aus einer anderen Quelle stammen. Ohne die SOP könnte ein Javascript-Programm, das mit einer Webseite von Server A geladen wurde, auch Inhalte einer gleichzeitig geöffneten Webseite von Server B lesen und verändern.