Don't cross the streams.

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