Submit Search
Upload
HTML5 Web Messaging
•
Download as KEY, PDF
•
24 likes
•
23,609 views
M
Mike Taylor
Follow
Don't cross the streams.
Read less
Read more
Technology
Report
Share
Report
Share
1 of 73
Download now
Recommended
Google chrome presentation
Google chrome presentation
reza jalaluddin
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010
Ismael Celis
Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)
danwrong
Desafios do Profissionalismo Ágil
Desafios do Profissionalismo Ágil
Victor Hugo Germano
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Caesar Chi
Web Crawling with NodeJS
Web Crawling with NodeJS
Sylvain Zimmer
MQTT and Java - Client and Broker Examples
MQTT and Java - Client and Broker Examples
Micha Kops
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
Robert Nyman
Recommended
Google chrome presentation
Google chrome presentation
reza jalaluddin
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010
Ismael Celis
Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)
danwrong
Desafios do Profissionalismo Ágil
Desafios do Profissionalismo Ágil
Victor Hugo Germano
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Caesar Chi
Web Crawling with NodeJS
Web Crawling with NodeJS
Sylvain Zimmer
MQTT and Java - Client and Broker Examples
MQTT and Java - Client and Broker Examples
Micha Kops
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
JavaScript APIs - The Web is the Platform - MDN Hack Day, Sao Paulo
Robert Nyman
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Robert Nyman
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
Robert Nyman
神に近づくx/net/context (Finding God with x/net/context)
神に近づくx/net/context (Finding God with x/net/context)
guregu
HTTP For the Good or the Bad - FSEC Edition
HTTP For the Good or the Bad - FSEC Edition
Xavier Mertens
When dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniques
Wim Godden
Beyond PHP - it's not (just) about the code
Beyond PHP - it's not (just) about the code
Wim Godden
JavaScript on the Desktop
JavaScript on the Desktop
Domenic Denicola
When dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniques
Wim Godden
php part 2
php part 2
Shagufta shaheen
My app is secure... I think
My app is secure... I think
Wim Godden
Summer of Fuzz: macOS
Summer of Fuzz: macOS
Jeremy Brown
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Planning-ness
How to Build a Web App (for Non-Programmers)
How to Build a Web App (for Non-Programmers)
Noah Brier
[Poland] It's only about frontend
[Poland] It's only about frontend
OWASP EEE
Unsecuring SSH
Unsecuring SSH
Jeremy Brown
If love is_blind_-_tiffany
If love is_blind_-_tiffany
tenka
Intro to Php Security
Intro to Php Security
Dave Ross
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web - at Nackademin
Robert Nyman
Remove php calls and scale your site like crazy !
Remove php calls and scale your site like crazy !
Wim Godden
String.fromCharCode(60)script>alert("XSS")String.fromCharCode(60)/script>
String.fromCharCode(60)script>alert("XSS")String.fromCharCode(60)/script>
Muhammad Sohail
Pushing the Web: Interesting things to Know
Pushing the Web: Interesting things to Know
n|u - The Open Security Community
The Open Web and what it means
The Open Web and what it means
Robert Nyman
More Related Content
What's hot
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Robert Nyman
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
Robert Nyman
神に近づくx/net/context (Finding God with x/net/context)
神に近づくx/net/context (Finding God with x/net/context)
guregu
HTTP For the Good or the Bad - FSEC Edition
HTTP For the Good or the Bad - FSEC Edition
Xavier Mertens
When dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniques
Wim Godden
Beyond PHP - it's not (just) about the code
Beyond PHP - it's not (just) about the code
Wim Godden
JavaScript on the Desktop
JavaScript on the Desktop
Domenic Denicola
When dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniques
Wim Godden
php part 2
php part 2
Shagufta shaheen
My app is secure... I think
My app is secure... I think
Wim Godden
Summer of Fuzz: macOS
Summer of Fuzz: macOS
Jeremy Brown
Noah Brier: How to build web apps
Noah Brier: How to build web apps
Planning-ness
How to Build a Web App (for Non-Programmers)
How to Build a Web App (for Non-Programmers)
Noah Brier
[Poland] It's only about frontend
[Poland] It's only about frontend
OWASP EEE
Unsecuring SSH
Unsecuring SSH
Jeremy Brown
If love is_blind_-_tiffany
If love is_blind_-_tiffany
tenka
Intro to Php Security
Intro to Php Security
Dave Ross
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web - at Nackademin
Robert Nyman
Remove php calls and scale your site like crazy !
Remove php calls and scale your site like crazy !
Wim Godden
String.fromCharCode(60)script>alert("XSS")String.fromCharCode(60)/script>
String.fromCharCode(60)script>alert("XSS")String.fromCharCode(60)/script>
Muhammad Sohail
What's hot
(20)
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
神に近づくx/net/context (Finding God with x/net/context)
神に近づくx/net/context (Finding God with x/net/context)
HTTP For the Good or the Bad - FSEC Edition
HTTP For the Good or the Bad - FSEC Edition
When dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniques
Beyond PHP - it's not (just) about the code
Beyond PHP - it's not (just) about the code
JavaScript on the Desktop
JavaScript on the Desktop
When dynamic becomes static: the next step in web caching techniques
When dynamic becomes static: the next step in web caching techniques
php part 2
php part 2
My app is secure... I think
My app is secure... I think
Summer of Fuzz: macOS
Summer of Fuzz: macOS
Noah Brier: How to build web apps
Noah Brier: How to build web apps
How to Build a Web App (for Non-Programmers)
How to Build a Web App (for Non-Programmers)
[Poland] It's only about frontend
[Poland] It's only about frontend
Unsecuring SSH
Unsecuring SSH
If love is_blind_-_tiffany
If love is_blind_-_tiffany
Intro to Php Security
Intro to Php Security
HTML5 & The Open Web - at Nackademin
HTML5 & The Open Web - at Nackademin
Remove php calls and scale your site like crazy !
Remove php calls and scale your site like crazy !
String.fromCharCode(60)script>alert("XSS")String.fromCharCode(60)/script>
String.fromCharCode(60)script>alert("XSS")String.fromCharCode(60)/script>
Similar to HTML5 Web Messaging
Pushing the Web: Interesting things to Know
Pushing the Web: Interesting things to Know
n|u - The Open Security Community
The Open Web and what it means
The Open Web and what it means
Robert Nyman
Making our web apps safely hackable
Making our web apps safely hackable
Rich Manalang
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
PL dream
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Remy Sharp
Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2
Hugo Hamon
Great Developers Steal
Great Developers Steal
Ben Scofield
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Robert Nyman
Mobile Device APIs
Mobile Device APIs
James Pearce
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
Robert Nyman
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
Robert Nyman
Bare-knuckle web development
Bare-knuckle web development
Johannes Brodwall
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
SPTechCon
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
Remy Sharp
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
Frédéric Harper
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
Robert Nyman
Asp.net By Durgesh Singh
Asp.net By Durgesh Singh
imdurgesh
PhpBB meets Symfony2
PhpBB meets Symfony2
Fabien Potencier
Moustamera
Moustamera
Bram Vandewalle
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
Robert Nyman
Similar to HTML5 Web Messaging
(20)
Pushing the Web: Interesting things to Know
Pushing the Web: Interesting things to Know
The Open Web and what it means
The Open Web and what it means
Making our web apps safely hackable
Making our web apps safely hackable
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2
Great Developers Steal
Great Developers Steal
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
Mobile Device APIs
Mobile Device APIs
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
Bare-knuckle web development
Bare-knuckle web development
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
Asp.net By Durgesh Singh
Asp.net By Durgesh Singh
PhpBB meets Symfony2
PhpBB meets Symfony2
Moustamera
Moustamera
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
Recently uploaded
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Raghuram Pandurangan
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
DianaGray10
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
panagenda
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Neo4j
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Kari Kakkonen
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
Hiroshi SHIBATA
2024 April Patch Tuesday
2024 April Patch Tuesday
Ivanti
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
panagenda
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
ThousandEyes
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
LoriGlavin3
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Pim van der Noll
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
Wes McKinney
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
AliaaTarek5
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
Nicole Novielli
Recently uploaded
(20)
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
2024 April Patch Tuesday
2024 April Patch Tuesday
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
HTML5 Web Messaging
1.
HTML5 Web Messaging @miketaylr
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
The Problem
12.
what if the
cats want to communicate with the ads?
13.
var f =
frames[0].a;
14.
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
23.
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?
31.
32.
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);
43.
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
47.
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
53.
54.
55.
56.
Using Messaging to Extend
the Browser
57.
58.
59.
60.
61.
popup.html
injected script options.html page background process
62.
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
65.
66.
67.
EventSource Events var f
= new EventSource(‘/awesome/sauce/’); f.addEventListener( 'message', function( e ) { var stuff = e.data //etc. }, false);
68.
event.lastEventId
69.
70.
WebSockets Events var f
= new WebSocket(‘ws://awesome/sauce/’); f.addEventListener( 'message', function( e ) { var stuff = e.data //etc. }, false);
71.
72.
Say Hi email: miket@opera.com tweets:
@miketaylr
73.
Obrigado
Editor's Notes
\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
Download now