Anmelden

Unter Cross-Domain-Ressourcen werden Inhalte verstanden, die clientseitig (Browser/JS) von einem Server nachgeladen werden, der nicht der Ursprungsserver der Seite ist. Cross-Domain-Ressourcen werden bislang oft für Werbezwecke verwendet (Bannerwerbung). Sie sind aber auch für soziale Netzwerke bzw. Befragungen (Liquid Democracy) von Bedeutung, wo es darum geht große Nutzerkreise zu erreichen und Personalisierung zu ermöglichen.

Für Cross-Domain-Ressourcen gibt es verschiedene Mögichkeiten:

IFRAME

Die klassische Variante

JSON with padding (JSONP)

JSONP stützt sich darauf, dass JS-Script-Einbindungen Cross-Domain auch ohne https:// möglich sind. 

http://en.wikipedia.org/wiki/JSONP

Bei JSONP wird ein JS-Funktionsaufruf über ein parametrisiertes  < script> Tag geladen und ausgeführt. In diesen Funktionsaufruf sind die eigentlichen Daten eingebettet, die über einen lokalen Funktionsaufruf auf das DOM umgeleitet werden. Die Daten in dem Funktionsaufruf sind üblicherweise JSON formatiert, wobei dies nicht relevant seins dürfte, als auch ein HTML-Objekt dürfte dynamisch Cross-Domain geladen werden können.

Das parametrisierte < script> Tag sieht etwa wie folgt aus.

< script type="text/javascript"
        src="http://server2.example.com/Users/1234?jsonp=parseResponse">
< /script>

Rückantwort des X-Ressource: 

parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

Damit die Parametrisierung des Script-Elementes (im Beispiel 1234) geändert werden werden kann, müssen Script-Elemente dynamisch über eine DOM-Manipulation geändert oder erstellt werden. Der Vorgang kann damit wiederholt ablaufen (Script element injection).

Basierend auf JSONP gibt es JQuery-Implementierungen (HttpRequest wird durch JSONP ersetzt) und die Programmierung mit dem JQuery-API zu ermäglichen. JQuery soll selbst eine solche Unterstützung beinhalten (wurde aber noch nicht bestätigt). JSONP hat aber im KERN nichts mit AJAX (HttpRequest) zu tun

Die Verfahrensweise ist zwar verbreitet, aber konzeptionell und sicherheitstechnsich kritisiert. Erkennbar ist, dass JSONP als Workarround entstanden ist. CORS gilt als Nachfolder

Cross-Origin Resource Sharing (CORS)

Mittels dieses jungen Standards werden echte AJAX-Request (auch JQuery) Cross-Domain erlaubt. Die Ressource muss aber per Header-Info den CORS-Aufruf erlauben. Ohne die Erlaubnis läuft der Request im Browser in einen Fehler. Das bedeutet die Web, die CORS einbetten müssen sich registrieren beim Anbieter der CORS-Ressource, oder der CORS-Anbieter muss generell alle CORS-Anfragen erlauben (siehe Beispiel unten. Von Haus aus dürfen Ressourcen nicht ohne deren Genehmigung von "fremden" Urscprungsseiten geladen werden.

http://www.w3.org/TR/access-control/

http://websitez.com/javascript-cross-domain-post-get/

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET");

Die meisten Browser in der aktuellen Version führen Cross-Requests aus, siehe http://caniuse.com/cors (Übersicht CORS-Unterstützung). Beim Internet-Explorer bis Version 9 funktioniert CORS nicht oder nur mit besonderen Vorkehrungen. Ein Umgehen von CORS erfolgt bislang auch mir dem Entwurfsmuster JSONP (siehe oben).

Extensiongerüst auf JQ-Basis

Die folgenden Codeauszüge zeigen den resultierenden HTML/JS-Code im Client. Diese Beispiel basiert auf Basis TYPO3, was aber für das gerüst keine Rolle spielt. Das Extensiongerüst ist ales nicht TYPO3-spezifisch. Daraus ergibtsich die direkte Möglichkeit, es auf beliebige CMS zu übertragen.

Header-Bereich

< script src="/typo3conf/ext/jquerycolorbox/res/js/jquery.js?1337786500" type="text/javascript">< /script>
< script src="/nsoft/pub/extensions/PubAhcy/lq2.js" type="text/javascript">< /script>
< link href="/nsoft/pub/extensions/PubAhcy/PubAhcy.css" rel=stylesheet type=text/css>

Ausgabebereich

< div class="tx-lq2-pi1">
< div id=lq2_268>laden ...< /div>
< script type=text/javascript>
Lq2Reload('lq2_268','PubAhcyProposals:username=someone',undefined,'');
< /script>
< /div>

Der Ladehinweis wird aber nicht sichtbar, da der JQ-Ladevorgang in den Seitenaufbau eingebaut ist, und außerdem synchron ablauft (ist einstellbar).

lq.js

function jqReload(canvas,argc,arge,argu,text1,text2,text3,text4,async)
{
var url = argc.split('?')[0];
var extension;
if (async == undefined) async = false;
if (argc.split('?')[1] == undefined)
{
url = '/nsoft/his/jquery.asp';
extension = argc.split(':')[0];
}
else
{
extension = argc.split('?')[1].split(':')[0];
}
var data = {
'extension' : extension,
'canvas' : canvas,
'argc' : argc,
'arge' : arge,
'argu' : argu,
'text1' : text1,
'text2' : text2,
'text3' : text3,
'text4' : text4,
'nocache' : new Date().getTime();
}
var result = undefined;
var options = {
type: 'POST',
url: url,
cache: false,
async: async,
data: data,
dataType: 'html',
error: function(xhr, textStatus, errorThrown)
{
alert('Es ist ein Fehler in jqReload aufgetreten! ' + textStatus);
},
success: function(html, textStatus)
{
$('#'+canvas).empty();
$('#'+canvas).append(html);
if (html[0] == '< ' && html[1] == '!')
{
result = html.split(' ')[1];
}
}
}
$.ajax(options);
return result;
}
   
Top

Wir arbeiten mit Software von http://www.campus21.de.

Verantwortlich für angezeigte Daten ist der Webdomain-Eigentümer laut Impressum.

Suche