Submit Search
Upload
HTML5 Web Messaging
•
Download as KEY, PDF
•
24 likes
•
23,610 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)
Is HTML5 Ready? (workshop)
Remy Sharp
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
PL dream
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)
Is HTML5 Ready? (workshop)
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
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
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Deepika Singh
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
The Digital Insurer
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
apidays
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
apidays
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Rustici Software
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Recently uploaded
(20)
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
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