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
Slideshow view
Report
Share
Slideshow view
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
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
comworks
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdf
jimielynbastida
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
ngoud9212
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
Precisely
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
BookNet Canada
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Wonjun Hwang
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Patryk Bandurski
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Fwdays
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
null - The Open Security Community
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
Deakin University
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Hyundai Motor Group
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
Recently uploaded
(20)
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
Science&tech:THE INFORMATION AGE STS.pdf
Science&tech:THE INFORMATION AGE STS.pdf
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
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