Ostatnie nightly-buildy Firefoksa 3 posiadają implementację kolejnej części (opracowywanej dopiero) specyfikacji HTML 5. Tym razem dodano obsługę Cross-Document Messaging.
Mechanizm ten pozwala na przesyłanie komunikatów pomiędzy dokumentami i to nawet tymi pochądzącymi z innej domeny. Do tej pory implementacja JavaScriptu w przeglądarkach zabraniała jakiegokolwiek oddziaływania dokumentów z różnych domen na siebie, w obawie o ataki typu cross-site scripting. Opisywany mechanizm jednak łamie tę barierę, dając możliwość bezpiecznej komunikacji między stronami.
Realizacja tej funkcjonalności odbywa się poprzez nową metodę obiektu window o nazwie postMessage. Metoda ta oczekuje jednego argumentu typu String, będącym wiadomością, którą chcemy przesłać. Zadaniem metody będzie stworzenie zdarzenia, które zostanie wywołane na obiekcie document okna, do którego wysłaliśmy wiadomość. Jeśli webmaster zdefiniuje własną funkcję obsługującą zdarzenie message, będzie mógł odczytywać komunikaty.
Poniższy przykład powinien bardziej zilustrować działanie mechanizmu:
Załóżmy, że mamy dokument hostowany pod adresem rafael.webd.pl/-/send.html z ramką <iframe>, w której wyświetlamy dokument z domeny rafael.webhelp.pl. Obok ramki znajduje się formularz z polem tekstowym, w którym będziemy wpisywać własne komunikaty. Kod strony prezentuje się następująco (tylko wybrane fragmenty):
<div>
<iframe id="ramka" src="http://rafael.webhelp.pl/receive.html" width="400" height="300"></iframe>
</div>
<form method="get" action="" onsubmit="return send(this.message.value)">
<p><input type="text" name="message" value="Komunikat" size="30"> <input type="submit" value="Wyślij"></p>
</form>
Funkcja send ma następującą treść
function send(message){
var okno;
if((okno=document.getElementById('ramka'))&&(okno=okno.contentWindow)){
okno.postMessage(message);
}
return false; // blokujemy submit formularza
}
Następnie musimy jeszcze obsłużyć zdarzenie message w dokumencie w ramce.
document.addEventListener("message", function(e){
document.getElementById("content").textContent = 'Wiadomość od: '+e.domain + ': ' + e.data;
}, false);
Oczywiście należy zwrócić uwagę na aspekt bezpieczeństwa. Po pierwsze należy sprawdzać skąd nadeszła wiadomość i akceptować (obsługiwać) tylko komunikaty z zaufanych witryn. Po drugie, należy uważać na przesyłaną treść. Szczególnie, jeśli do dokumentu treść będziemy wstawiać za pomocą innerHTML, ponieważ w ten sposób będzie można dodać do strony dowolny kod HTML.
PS. Opera 9 obsługuje też przesyłanie komunikatów, co można zobaczyć na drugiej stronie testowej. Różnica w stosunku do Firefoksa polega na tym, że metoda postMessage należy do obiektu document, zgodnie z wcześniejszą wersją dokumentacji HTML 5
Subskrybuj