Nyheter i IE 8: Cross Document Messaging (XDM)
Något som blir allt vanligare på webben är mashups, vilka ofta används tillsammans med javascript och iframes för att kunna visa applikationer från andra domäner. För att göra detta säkrare så finns det i Internet Explorer 8 stöd för Cross Document Messaging, vilket är en nyhet i HTML 5.
Det går ut på att vi använder dels metoden postMessage för att posta ett meddelande och eventet onmessage för att kunna ta emot ett meddelande.
Med Cross Document Messaging kan vi alltså skicka och ta emot meddelanden mellan olika domäner. Vi kan med detta tillåta att meddelandena kommer från en specifik domän, samt att meddelanden skickas till en specifik domän. På detta sätt kan vi vara säkra på att inga meddelanden skickas från en felaktig domän, samt att inga meddelanden skickas till en felaktig domän.
För att testa detta så behöver vi två sidor, A.html samt B.html. Den förstnämnda kommer att ha en iframe med den andra sidan och kommer att skicka meddelanden till denne när användaren klickar på en knapp. När meddelanden har kommit fram så kommer ett svar tillbaka som säger att det lyckades.
A.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross Document Messaging</title>
<script type="text/javascript">
window.attachEvent('onmessage', function(e) {
document.getElementById('message').innerHTML = e.data;
});
function SendXDMMessage() {
var msg = document.getElementById('receiver');
msg.contentWindow.postMessage('Hello, B!', '*');
}
</script>
</head>
<body>
<iframe src="B.html" id="receiver" style="width: 500px; height: 200px;"></iframe>
<br />
<div id="message"></div>
<input type="button" value="Skicka meddelande" onclick="SendXDMMessage()" />
</body>
</html>
B.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross Document Messaging</title>
<script type="text/javascript">
window.attachEvent('onmessage', function(e) {
document.getElementById('message').innerHTML = e.data;
e.source.postMessage('Hello, A!', '*');
});
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>
För att testa detta så skall vi först öppna A.html. När vi klickar på knappen där så anropas SendXDMMessage(), vilken skickar ett meddelande till den iframe som vi plockar fram. Den andra parametern i anropet visar vilken domän vår iframe måste innehålla, genom att ha en asterisk så spelar det ingen roll. Vill vi att det ska vara en specifik domän så bör vi ange den istället för asterisken.
Vi har även sett till att vi sätter innerHTML på div-elementet med data som skickas till A.html.
I B.html så väntar vi på att ett meddelande skall tas emot, och när vi får ett så sätter vi innerHTML på div-elementet till värdet som har skickats. Om vi vill vara säkra på att meddelandet kommer från en specifik domän så kan vi använda e.origin för att se vilken domän anropet kommer från. När vi har satt värdet i div-elementet så returnerar vi ett meddelande till A.html.
Med Cross Document Messaging kan vi alltså skicka meddelanden fram och tillbaka mellan två olika domäner på ett väldigt smidigt sätt.