Tutorials

Cross Domain Scripting

Door Niels -17-11-2006 23:21 -6.541 views

Het mogelijk maken scripts te bouwen op meerdere Domeinen

Pagina 1

Inleiding

Cross Domain Scripting, een steeds vaker voorkomend begrip in deze wereld. Ik ben op dit onderwerp gekomen doordat ik voor een klant de mogelijkheden moest onderzoeken. Aangezien de mogelijkheden redelijk potentieeel zijn vond ik het nodig de rest van de wereld, in iedere geval jullie een idée te geven hoe het in elkaar steekt en wat de mogelijkheden zijn.

In deze tutorial zal ik uitleggen aan de hand van een paar voorbeelden wat de mogelijkheden zijn. Alles wat ik hier ga vertellen zijn gebaseerd op mijn bevindingen en mijn gedachtes. Op of aanmerkingen zijn meer dan welkom.

Mijn bevindingen heb ik gedaan met behulp van:

Sites:
google analytics.
xml.com

Methodes:
xmlDoc.
AJAX / xmlHtttpRequest.
Plain Javascript.

Pagina 2

Cross Domain Scripting, wat nu weer?

De mogelijkheden van deze methodes kunnen zeer ver rijken. Stel, je hebt een klant die kosten wat het kost op de server wil blijven werken waar hij op zit. Maar die kan geen server side scripts aan en toch wil hij graag een gastenboek, dat zelf geschreven wordt. Voorheen was dit een lastige opgave, sterker nog. Dit kon wel eens niet mogelijk zijn. (klopt dit?).
Je kon het doen op een andere server doormiddel van een iframe. Of een gewone frame.
In principe kan dit. Alleen ik ben geen iframe en wil ze het liefst ook niet op mijn site plaatsen.
Aangezien ik meer over dit onderwerp wou gaan weten ben ik gaan zoeken naar de mogelijkheden van AJAX en XMLDOC. Al gauw kwam ik er achter dat het (nog) onmogelijk was om met AJAX server side scripts te benaderen van een andere server. Dit is een beveiliging tegen het stelen van andermans scripts. Maar ook voor het behoud van je website. Zou het wel kunnen zou men overall makkelijker binnen kunnen komen.

Ik had ook gehoord van XMLDOC. Dit is een parser voor XML die je in javascript aanroept. Ik heb me laten vertellen dat hiermee mogelijk was om XML bestanden van andere servers weg te trekken. Leuk dacht ik. Dan roep ik een PHP bestand op met daarin een header met content-type: text/xml. Alleen het werkte niet.
Nadat ik het vele malen geprobeerd had en op verschillende manieren. Ben ik het script van google analytics doorgaan spitten.

Even kort: Wat is google Analytics (voor de gene die het nog niet weten).
GA is een script dat je middels een klein javascriptje op je pagina zet. Daarmee gaat het scriptje gegevens uitwisselen vna jouw pagina’s met GA. Hier wordt geregistreerd: je bezoekers, hun afkomst etc.
Er wordt op een zeer geavanceerde manier gekeken naar je website. Aangezien hun dit via javascript doen, kan de informatie niet rechtstreeks opgeslagen worden (klopt dit ook?).

dus naar mijn mening moet er ergens een server side script worden geopend die het script verder afhandelt. Dit wordt ook gedaan. Ergens in het script wordt gedaan:



// er wordt in javascript een plaatje aangemaakt.
Var img1 = new Image (1,1);
// deze krijgt een src attribuut.
Img1.src = “http://yourserver.com/yourfile.php”;
// en een onload function
Img1.onload = voidA();

// de onload functie gebruik je om de xml te laden die gemaakt gaat worden nadat het plaatje is uitgeladen.

Stel je je voor dat er in die server side script een xml file wordt gemaakt en klaargezet zodat je die later met javascript kan ophalen. Dan is het mogelijk interactief met een andere database te communiceren op een andere server.
Het enige dat (nog) niet mogelijk is, om direct php output te geven via de image.
Dit is wel een voordeel van een iframe. Die kan het wel.

Pagina 3

JSON mogelijkheden

Na de mogelijkheden met de Image, wat ook niet echt zeer praktisch is is er nog een mogelijk heid om JSON te gebruiken. JSON is een soort van XML, zelfde principe, maar dan met javascript. Voorbeeld volgen.

Het voorbeeld heb ik van:
http://borkweb.com/story/look-ma-cross-domain-scripting

Gebruik deze "classe" voor het dynamisch aanmaken van JSON requesters:
http://theurer.cc/code/jsonSamples/jsr_class.js

Aangezien de bovenstaande klasse een foutje bevat moet je achter elke url een ?a=b of iets dergelijks zetten anders gebeurt er niks!.

dan hier het script zoals ik het heb gebruikt:


<html>
<head><title>Test</title></head>
	<script src="http://theurer.cc/code/jsonSamples/jsr_class.js" type="text/javascript"></script>
	<script type="text/javascript">
	
	
	
		function addScript() {
			// gebruik van ?a=b achter de url zorgt ervoor dat de classe werkt
			// je zou ook de klasse kunnen herschrijven, of downloaden en includen van eigen server.
			var obj=new JSONscriptRequest('http://yourserver.com/yourjsonfile.php?a=b');
			obj.buildScriptTag(); // Build the script tag    
			obj.addScriptTag(); // Execute (add) the script tag
		}//end addScript
		
function bork(data) {
	var text='';
	
	if(data==null) {
		alert('error');
	} else {
		text='Image Title: ' + data.Image.Title + '<br />';
		text+='Width: ' + data.Image.Width + '<br />';
		text+='Height: ' + data.Image.Height + '<br />';
		text+='Thumbnail Data: ' + data.Image.Thumbnail.Url;
		text+=' (' + data.Image.Thumbnail.Width + 'x' + data.Image.Thumbnail.Height + ')<br />';
	}
	
	alert (text);
	document.getElementById('output').innerHTML=text;
}//end bork
	</script>
<body>
	<a href="#" onClick="addScript(); return false;">Click to Get Stuff</a>
	<div id="output"></div>
</body>
</html>

En natuurlijk het json bestandje aanmaken:


<?php

// bork is the callback functie die wordt aangeroepen zodra je dit script execute.
// vandaar dat je een functie: bork aan moest maken
echo '
bork({
	"Image": { 
		"Width":500, 
		"Height":250, 
		"Title":"Giant Cow", 
		"Thumbnail": {
			"Url":"http://someurl.com/image/1234", 
			"Height": 75, 
			"Width": 150
		}
	}
});
';

?>

Probeer dit script eens uit op 2 verschillende webservers en je zult zien dat het best handig is.

Je kunt het natuurlijk ook dynamisch gebruiken door met php verschillende dingen op te halen uit databases en die terug te geven.

Ik hoop dat ik wat duidelijkheid heb geschept.
Het is jammer dat er nog geen mogelijkheden zijn zonder javascript.
Maar die zullen er vast wel komen, tot die tijd moeten we het maar stelen met javascript.