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

30,753 views

Published on

Don't cross the streams.

Published in: Technology
3 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
30,753
On SlideShare
0
From Embeds
0
Number of Embeds
13,312
Actions
Shares
0
Downloads
206
Comments
3
Likes
22
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×