This document discusses HTML5 web messaging and the same origin policy. It introduces the MessageEvent object used to handle cross-document messaging and describes how to use the postMessage() method and MessageChannel interface to communicate across browsing contexts from different origins securely. Examples are given of using web messaging to extend the browser's capabilities by communicating between injected scripts, pages, and background processes.

1. HTML5 Web
Messaging
@miketaylr

11. The Problem

12. what if the cats want to
communicate with the
ads?

13. var f = frames[0].a;

15. Same Origin Policy

16. Same Origin Policy
Port
Protocol
Host
*note this is a simplification.
see http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy

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

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

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

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

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

22. Ways we cope
• window.name
• document.domain
• JSONP
• <iframe> hell
• proxies

24. The Message Event Object

25. 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);
};

26. event.data

27. event.origin

28. event.source
this is the browsing
context from which
the message was sent

29. event.ports

30. remember this is the
problem, right?

33. postMessage()

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

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

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

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

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

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

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

41. window.frames[0]
var a = "yay!";
window.addEventListener('message', function(event){
event.source.postMessage(window[event.data], '*');
}, false);

42. window.top
window.addEventListener('message', function(event){
alert(event.data);
}, false);

44. 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);

45. window.frames[0]
var a = "yay!";
window.addEventListener('message', function(event){
if (event.origin == ‘http://omgponies.com’){
event.source.postMessage(window[event.data], '*');
}
}, false);

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

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

49. var channel = new MessageChannel()

50. channel.port1

51. channel.port2

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

56. Using Messaging to
Extend the Browser

61. popup.html
injected
script
options.html
page background
process

63. 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);

64. postMessage()
injected background
page script
process
connect

67. EventSource Events
var f = new EventSource(‘/awesome/sauce/’);
f.addEventListener( 'message', function( e ) {
var stuff = e.data
//etc.
}, false);

68. event.lastEventId

70. WebSockets Events
var f = new WebSocket(‘ws://awesome/sauce/’);
f.addEventListener( 'message', function( e ) {
var stuff = e.data
//etc.
}, false);

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

73. Obrigado