Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 WebMessaging@miketaylr
The Problem
what if the cats want tocommunicate with theads?
var f = frames[0].a;
Same Origin Policy
Same Origin Policy                                             Port                                           Protocol    ...
http://www.reddit.comhttp://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.comhttps://www.reddit.com/
Ways we cope• window.name• document.domain• JSONP• <iframe> hell• proxies
The Message Event Object
interface MessageEvent : Event {   readonly attribute any data;   readonly attribute DOMString origin;   readonly attribut...
event.data
event.origin
event.sourcethis is the browsingcontext from whichthe message was sent
event.ports
remember this is theproblem, right?
postMessage()
window.postMessage(message, targetOrigin [, ports ])
window.postMessage(‘{rofl: “copter”}’...)
window.postMessage(message, targetOrigin [, ports ])
window.postMessage(‘(ˆ–ˆ)/’, ‘*’)
window.postMessage(‘(ˆ–ˆ)/’, ‘/’)
window.postMessage(‘(ˆ–ˆ)/’, ‘http://miketaylr.com’)
window.topwindow.addEventListener(DOMContentLoaded, function(){  //var f = frames[0].a;  var child = document.getElementsB...
window.frames[0]var a = "yay!";window.addEventListener(message, function(event){  event.source.postMessage(window[event.da...
window.topwindow.addEventListener(message, function(event){  alert(event.data);}, false);
window.topwindow.addEventListener(DOMContentLoaded, function(){  //var f = frames[0].a;  var child = document.getElementsB...
window.frames[0]var a = "yay!";window.addEventListener(message, function(event){  if (event.origin == ‘http://omgponies.co...
http://caniuse.com/#search=postMessage
[Constructor]interface MessageChannel {   readonly attribute MessagePort port1;   readonly attribute MessagePort port2;};
var channel = new MessageChannel()
channel.port1
channel.port2
http://javascript.g.hatena.ne.jp/edvakf/20100109/1263070731
Using Messaging toExtend the Browser
popup.html       injected        script                                options.htmlpage              background           ...
background.jswindow.opera.extension.addEventListener( connect, function( e ){  //Tell the injected script which theme to u...
postMessage()       injected                   backgroundpage    script                                    process        ...
EventSource Eventsvar f = new EventSource(‘/awesome/sauce/’);f.addEventListener( message, function( e ) {  var stuff = e.d...
event.lastEventId
WebSockets Eventsvar f = new WebSocket(‘ws://awesome/sauce/’);f.addEventListener( message, function( e ) {  var stuff = e....
Say Hiemail: miket@opera.comtweets: @miketaylr
Obrigado
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
HTML5 Web Messaging
Upcoming SlideShare
Loading in …5
×

HTML5 Web Messaging

32,310 views

Published on

Don't cross the streams.

Published in: Technology

HTML5 Web Messaging

  1. HTML5 WebMessaging@miketaylr
  2. The Problem
  3. what if the cats want tocommunicate with theads?
  4. var f = frames[0].a;
  5. Same Origin Policy
  6. Same Origin Policy Port Protocol Host*note this is a simplification.see http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy
  7. http://www.reddit.comhttp://www.reddit.com/r/fffffffuuuuuuuuuuuu/
  8. http://www.reddit.com/http://static.reddit.com/
  9. http://www.reddit.com/ http://static.reddit.com/document.domain = “reddit.com”
  10. http://www.reddit.com:80/http://www.reddit.com:9001/
  11. http://www.reddit.comhttps://www.reddit.com/
  12. Ways we cope• window.name• document.domain• JSONP• <iframe> hell• proxies
  13. The Message Event Object
  14. 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);};
  15. event.data
  16. event.origin
  17. event.sourcethis is the browsingcontext from whichthe message was sent
  18. event.ports
  19. remember this is theproblem, right?
  20. postMessage()
  21. window.postMessage(message, targetOrigin [, ports ])
  22. window.postMessage(‘{rofl: “copter”}’...)
  23. window.postMessage(message, targetOrigin [, ports ])
  24. window.postMessage(‘(ˆ–ˆ)/’, ‘*’)
  25. window.postMessage(‘(ˆ–ˆ)/’, ‘/’)
  26. window.postMessage(‘(ˆ–ˆ)/’, ‘http://miketaylr.com’)
  27. window.topwindow.addEventListener(DOMContentLoaded, function(){ //var f = frames[0].a; var child = document.getElementsByTagName(‘iframe’)[0]; child.contentWindow.postMessage(a, *);}, false);
  28. window.frames[0]var a = "yay!";window.addEventListener(message, function(event){ event.source.postMessage(window[event.data], *);}, false);
  29. window.topwindow.addEventListener(message, function(event){ alert(event.data);}, false);
  30. window.topwindow.addEventListener(DOMContentLoaded, function(){ //var f = frames[0].a; var child = document.getElementsByTagName(‘iframe’)[0]; child.contentWindow.postMessage(a, http://omgponies.com);}, false);
  31. window.frames[0]var a = "yay!";window.addEventListener(message, function(event){ if (event.origin == ‘http://omgponies.com’){ event.source.postMessage(window[event.data], *); }}, false);
  32. http://caniuse.com/#search=postMessage
  33. [Constructor]interface MessageChannel { readonly attribute MessagePort port1; readonly attribute MessagePort port2;};
  34. var channel = new MessageChannel()
  35. channel.port1
  36. channel.port2
  37. http://javascript.g.hatena.ne.jp/edvakf/20100109/1263070731
  38. Using Messaging toExtend the Browser
  39. popup.html injected script options.htmlpage background process
  40. background.jswindow.opera.extension.addEventListener( connect, function( e ){ //Tell the injected script which theme to use e.source.postMessage( {theme: widget.preferences.theme} );}, false );hilite.jsopera.extension.addEventListener( message, function( e ) { var theme = e.data.theme, hl = new Hilighter( theme, window, document ); hl.init();}, false);
  41. postMessage() injected backgroundpage script process connect
  42. EventSource Eventsvar f = new EventSource(‘/awesome/sauce/’);f.addEventListener( message, function( e ) { var stuff = e.data //etc.}, false);
  43. event.lastEventId
  44. WebSockets Eventsvar f = new WebSocket(‘ws://awesome/sauce/’);f.addEventListener( message, function( e ) { var stuff = e.data //etc.}, false);
  45. Say Hiemail: miket@opera.comtweets: @miketaylr
  46. Obrigado

×