Your SlideShare is downloading. ×
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Web Messaging

18,186

Published on

Don't cross the streams.

Don't cross the streams.

Published in: Technology
2 Comments
22 Likes
Statistics
Notes
  • like
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ( http://tld30.com/?tDMcOS )

    ( http://tld30.com/?tDMcOS )
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
18,186
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
192
Comments
2
Likes
22
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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

    ×