HTML5 Web Messaging

HTML5 Web
Messaging

@miketaylr

what if the cats want to
communicate with the
ads?

Same Origin Policy

Port
Protocol
Host

*note this is a simpliﬁcation.
see http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy

http://www.reddit.com
http://www.reddit.com/r/fffffffuuuuuuuuuuuu/

http://www.reddit.com/
http://static.reddit.com/

http://www.reddit.com/
http://static.reddit.com/
document.domain = “reddit.com”

http://www.reddit.com:80/
http://www.reddit.com:9001/

http://www.reddit.com
https://www.reddit.com/

Ways we cope

• window.name
• document.domain
• JSONP
• <iframe> hell
• proxies

interface MessageEvent : Event {
readonly attribute any data;
readonly attribute DOMString origin;
readonly attribute DOMString lastEventId;
readonly attribute WindowProxy source;
readonly attribute MessagePortArray ports;
void initMessageEvent(blah,blah,blah x 16);
};

event.source

this is the browsing
context from which
the message was sent

remember this is the
problem, right?

window.postMessage(message, targetOrigin [, ports ])

window.postMessage(‘{rofl: “copter”}’...)

window.postMessage(‘(ˆ–ˆ)/’, ‘*’)

window.postMessage(‘(ˆ–ˆ)/’, ‘/’)

window.postMessage(‘(ˆ–ˆ)/’, ‘http://miketaylr.com’)

window.top

window.addEventListener('DOMContentLoaded', function(){
//var f = frames[0].a;
var child = document.getElementsByTagName(‘iframe’)[0];
child.contentWindow.postMessage('a', '*');
}, false);

window.frames[0]

var a = "yay!";

window.addEventListener('message', function(event){
event.source.postMessage(window[event.data], '*');
}, false);

window.top

alert(event.data);
}, false);

window.top

window.addEventListener('DOMContentLoaded', function(){
//var f = frames[0].a;
var child = document.getElementsByTagName(‘iframe’)[0];
child.contentWindow.postMessage('a', 'http://omgponies.com');
}, false);

window.frames[0]

var a = "yay!";

if (event.origin == ‘http://omgponies.com’){
event.source.postMessage(window[event.data], '*');
}
}, false);

http://caniuse.com/#search=postMessage

[Constructor]
interface MessageChannel {
readonly attribute MessagePort port1;
readonly attribute MessagePort port2;
};

var channel = new MessageChannel()

http://javascript.g.hatena.ne.jp/edvakf/20100109/1263070731

Using Messaging to
Extend the Browser

popup.html
injected
script
options.html

page background
process

background.js
window.opera.extension.addEventListener( 'connect', function( e ){
//Tell the injected script which theme to use
e.source.postMessage( {'theme': widget.preferences.theme} );
}, false );

hilite.js
opera.extension.addEventListener( 'message', function( e ) {
var theme = e.data.theme,
hl = new Hilighter( theme, window, document );
hl.init();
}, false);

postMessage()
injected background
page script
process
connect

EventSource Events
var f = new EventSource(‘/awesome/sauce/’);

f.addEventListener( 'message', function( e ) {
var stuff = e.data
//etc.
}, false);

WebSockets Events
var f = new WebSocket(‘ws://awesome/sauce/’);

f.addEventListener( 'message', function( e ) {
var stuff = e.data
//etc.
}, false);

Say Hi
email: miket@opera.com
tweets: @miketaylr

HTML5 Web Messaging

Related slideshows

More Related Content

HTML5 Web Messaging

Editor's Notes