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
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
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
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Boston Institute of Analytics
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
SynarionITSolutions
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
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
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Recently uploaded
(20)
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
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, ...
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
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 Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
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