Transcript Cross-Document Messaging

Cross-Document Messaging
WHAT IS IT?
Cross-Document Messaging is an API
introduced in HTML5 this feature
allows documents to communicate with
one another over various origins or
domain sources through JavaScript calls
WHY IS THIS COOL?
Web pages can use this functionality to communicate
messages between pages and/or users and various
content management purposes along with some
functional programming . Overall just like most HTML5
features its meant to reduce the need for special gadgets
within your file.
BASIC CODE EXAMPLE
SENDER:
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world',
‘C:\Users\Adam\HTML5');
RECEIVER:
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.data == 'Hello world') {
e.source.postMessage('Hello', e.origin);
doc.getElementById(‘textBox’).value = e.data;
}
This example demonstrates the sender
}
communicating with the receiver
}
which is contained within an iframe.
}
In this case the receiving documents
location must be specified in order for
the iframe to load the data and display
received information.
SECURITY
Poor origin checking can pose a risk for applications which
employ cross-document messaging. To safeguard against
malicious code from foreign domains, authors should check the
origin attribute to ensure messages are accepted from domains
they expect to receive messages from. The format of incoming data
should also be checked that it matches the expected format.
if (e.origin == ‘virus.com') then don’t run the code!!!
EVENTS
CHANNEL MESSAGING
•Event.data
•Event.origin
•Event.lastEventId
•Event.source
•Event.ports
•Chanel.ports
•Chanel.open
•Chanel.close
In order to have two pieces of code
communicate more directly from different
browser contexts channels have to be
implemented with two-way asynchronous
pipe set. Data that is sent through one
port is received though the other and viseversa.