SlideShare una empresa de Scribd logo
1 de 28
Descargar para leer sin conexión
Making our web apps safely hackable
A shit load of 3rd party
Javascript widgets
…and a shit load of + security risks
+ page weight
+ maintenance
RICH MANALANG / @RMANALAN / ATLASSIAN

Making our web apps
<safely> hackable
Hackable => Extensible
Making our web apps safely hackable
Making our web apps safely hackable
3 C A PA B I L I T I E S

• Access to REST APIs
• Event notifications
• UI extensibility
Making our web apps safely hackable
A SHIP IN PORT IS
S A F E , B U T T H AT ' S
N O T W H AT S H I P S A R E
B U I LT F O R .
— GRACE HOPPER
C O N T R A C T B E T W E E N H O S T A N D 3 R D PA R T Y

• Ability for 3rd party to resize itself based on content size
• Ability for 3rd party to make requests with the host
• Ability for 3rd party to send and listen to events on the host
w i n d o w. p o s t M e s s a g e ( )
// Parent => IFrame
!

// Parent
var someIframe = document.getElementById('some-iframe');
someIframe.contentWindow.postMessage('yo', '*');
!
!

// IFrame
window.addEventListener('message', function (e) {
alert(e.data); // yo dude!
}, false);
w i n d o w. p o s t M e s s a g e ( )

// IFrame => Parent
!

// Parent
window.addEventListener('message', function (e) {
alert(e.data); // hey!
}, false);
!
!

// IFrame
window.postMessage('hey', '*');
w i n d o w. p o s t M e s s a g e ( )

• Prone to resource contention
• Solution: use channel messaging
postMessage + MessageChannel is raw
O T H E R A LT E R N AT I V E S …
• postMessage is IE 8+ only (partial support)
• easyXDM
• porthole
• Oasis.js
• Conductor.js
• Open web way to safely embed 3rd party code
• Sandboxing can be through an IFrame or a Web Worker
• Capability-based security
• Abstractions for services, consumers, events, and requests
• Async via Promises
• Wiretapping
// Host (parent http://example.com)

// Sandbox (IFrame http://xyz.com/iframe.html)

!
// Service to expose to sandboxes
var PingService = Oasis.Service.extend({
initialize: function() {
this.send('ping');
},
!
events: {
pong: function() {
alert("Got a pong!");
}
}
});
!
// Creates the sandbox
oasis.createSandbox('http://xyz.com/iframe.html', {
capabilities: [‘ping’],
// adapter: oasis.adapters.webworker, // no UI
services: {
ping: PingService
}
});

!
// Consumer that handles the ping capability
var PingConsumer = Oasis.Consumer.extend({
events: {
ping: function() {
this.send('pong');
}
}
});
!
// Connect to the host
Oasis.connect({
consumers: {
ping: PingConsumer // request ping capability
}
});
C o n d u c t o r. j s

• A framework for building sandboxed apps
• Gives 3rd parties a well-defined framework for building extensions
• Built on top of Oasis.js
Making our web apps safely hackable
Making our web apps safely hackable
C o n d u c t o r. j s

// Card (http://xyz.com/awesome-card.js)

!

// Load dependencies
Conductor.require('lib/jquery.js');
Conductor.require('lib/handlebars.js');

!

var template = '<div>{{message}}</div>';

!

// Define card
Conductor.card({

!

// Host (parent http://example.com)
!
// Bootstrap a new conductor instance
var conductor = new Conductor( options );
!
// Load a card
conductor.load('http://xyz.com/awesome-card.js');
!
// Add to the DOM
conductor.appendTo($('#target'));

!

!

!

// Oasis style capabilities.
consumers: {
pong: Conductor.Oasis.Consumer.extend({
requests: {
// handle requests from the host
// or other cards
},
events: {
// handle events from the host
// or other cards
}
})
},
activate: function() {
// initialize your card here...
},
compileTemplates: function(){
template = Handlebars.compile(template);
},

render: function() {
$('body').html(template({ message: "Wassup?" }));
}
});
Wa t c h @ t o m d a l e t a l k a b o u t O a s i s / C o n d u c t o r

http://j.mp/conductorjs
IMPERFECT

• CSS on host doesn’t cascade to IFrames — there’s hack (detect and pass in

parent styles to IFrame)

• Relative links open in the IFrame — there’s a “fix” (use the <base> tag)
• Dynamic resizing is an art — over/underflow detection sort of works
Making our web apps safely hackable
Making our web apps safely hackable
Making our web apps safely hackable
GRACIAS…AND PLEASE…

• Follow me at @rmanalan
• Don’t forget to take those Atlassian drink glasses home with you
• Come talk to me about an awesome job at an awesome company

Más contenido relacionado

Destacado

Historia3.3 3
Historia3.3 3Historia3.3 3
Historia3.3 3katixa
 
PEK Spring Picnic 2007
PEK Spring Picnic 2007PEK Spring Picnic 2007
PEK Spring Picnic 2007Chris Johnson
 
Amy&Per Erik
Amy&Per ErikAmy&Per Erik
Amy&Per Erikvinion
 
Deforestation
DeforestationDeforestation
Deforestationkimoneill
 
Importance Of Being Driven
Importance Of Being DrivenImportance Of Being Driven
Importance Of Being DrivenAntonio Terreno
 
Publizitate eta HHPP sarrera: 4. gaia
Publizitate eta HHPP sarrera: 4. gaiaPublizitate eta HHPP sarrera: 4. gaia
Publizitate eta HHPP sarrera: 4. gaiakatixa
 
El Pollo Loco
El Pollo LocoEl Pollo Loco
El Pollo Locoburnsc62
 

Destacado (9)

Historia3.3 3
Historia3.3 3Historia3.3 3
Historia3.3 3
 
PEK Spring Picnic 2007
PEK Spring Picnic 2007PEK Spring Picnic 2007
PEK Spring Picnic 2007
 
Assignment Fireworks
Assignment FireworksAssignment Fireworks
Assignment Fireworks
 
Amy&Per Erik
Amy&Per ErikAmy&Per Erik
Amy&Per Erik
 
Deforestation
DeforestationDeforestation
Deforestation
 
Importance Of Being Driven
Importance Of Being DrivenImportance Of Being Driven
Importance Of Being Driven
 
Publizitate eta HHPP sarrera: 4. gaia
Publizitate eta HHPP sarrera: 4. gaiaPublizitate eta HHPP sarrera: 4. gaia
Publizitate eta HHPP sarrera: 4. gaia
 
Something About The Web
Something About The WebSomething About The Web
Something About The Web
 
El Pollo Loco
El Pollo LocoEl Pollo Loco
El Pollo Loco
 

Similar a Making our web apps safely hackable

Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5DefconRussia
 
Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIsJames Pearce
 
HTML5 Web Messaging
HTML5 Web MessagingHTML5 Web Messaging
HTML5 Web MessagingMike Taylor
 
Hacking HTML5 offensive course (Zeronights edition)
Hacking HTML5 offensive course (Zeronights edition)Hacking HTML5 offensive course (Zeronights edition)
Hacking HTML5 offensive course (Zeronights edition)Krzysztof Kotowicz
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API Nick DeNardis
 
Browser Horror Stories
Browser Horror StoriesBrowser Horror Stories
Browser Horror StoriesEC-Council
 
JavaScript Security: Mastering Cross Domain Communications in complex JS appl...
JavaScript Security: Mastering Cross Domain Communications in complex JS appl...JavaScript Security: Mastering Cross Domain Communications in complex JS appl...
JavaScript Security: Mastering Cross Domain Communications in complex JS appl...Thomas Witt
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoT
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoTWebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoT
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoTFrank Greco
 
Scout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicagoScout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicagoknaddison
 
Application Security
Application SecurityApplication Security
Application Securitynirola
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Rapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devicesRapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devicesciklum_ods
 
Hacking Client Side Insecurities
Hacking Client Side InsecuritiesHacking Client Side Insecurities
Hacking Client Side Insecuritiesamiable_indian
 
Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)danwrong
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the IslandsOpening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the IslandsBastian Hofmann
 

Similar a Making our web apps safely hackable (20)

Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5Krzysztof Kotowicz - Hacking HTML5
Krzysztof Kotowicz - Hacking HTML5
 
Mobile Device APIs
Mobile Device APIsMobile Device APIs
Mobile Device APIs
 
HTML5 Web Messaging
HTML5 Web MessagingHTML5 Web Messaging
HTML5 Web Messaging
 
Hacking HTML5 offensive course (Zeronights edition)
Hacking HTML5 offensive course (Zeronights edition)Hacking HTML5 offensive course (Zeronights edition)
Hacking HTML5 offensive course (Zeronights edition)
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 
Transforming WebSockets
Transforming WebSocketsTransforming WebSockets
Transforming WebSockets
 
Browser Horror Stories
Browser Horror StoriesBrowser Horror Stories
Browser Horror Stories
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
JavaScript Security: Mastering Cross Domain Communications in complex JS appl...
JavaScript Security: Mastering Cross Domain Communications in complex JS appl...JavaScript Security: Mastering Cross Domain Communications in complex JS appl...
JavaScript Security: Mastering Cross Domain Communications in complex JS appl...
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoT
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoTWebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoT
WebSocket Perspectives 2015 - Clouds, Streams, Microservices and WoT
 
Scout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicagoScout xss csrf_security_presentation_chicago
Scout xss csrf_security_presentation_chicago
 
Application Security
Application SecurityApplication Security
Application Security
 
Pushing the Web: Interesting things to Know
Pushing the Web: Interesting things to KnowPushing the Web: Interesting things to Know
Pushing the Web: Interesting things to Know
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
Rapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devicesRapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devices
 
Hacking Client Side Insecurities
Hacking Client Side InsecuritiesHacking Client Side Insecurities
Hacking Client Side Insecurities
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)Building @Anywhere (for TXJS)
Building @Anywhere (for TXJS)
 
Opening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the IslandsOpening up the Social Web - Standards that are bridging the Islands
Opening up the Social Web - Standards that are bridging the Islands
 

Último

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Último (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

Making our web apps safely hackable

  • 2. A shit load of 3rd party Javascript widgets
  • 3. …and a shit load of + security risks + page weight + maintenance
  • 4. RICH MANALANG / @RMANALAN / ATLASSIAN Making our web apps <safely> hackable
  • 8. 3 C A PA B I L I T I E S • Access to REST APIs • Event notifications • UI extensibility
  • 10. A SHIP IN PORT IS S A F E , B U T T H AT ' S N O T W H AT S H I P S A R E B U I LT F O R . — GRACE HOPPER
  • 11. C O N T R A C T B E T W E E N H O S T A N D 3 R D PA R T Y • Ability for 3rd party to resize itself based on content size • Ability for 3rd party to make requests with the host • Ability for 3rd party to send and listen to events on the host
  • 12. w i n d o w. p o s t M e s s a g e ( ) // Parent => IFrame ! // Parent var someIframe = document.getElementById('some-iframe'); someIframe.contentWindow.postMessage('yo', '*'); ! ! // IFrame window.addEventListener('message', function (e) { alert(e.data); // yo dude! }, false);
  • 13. w i n d o w. p o s t M e s s a g e ( ) // IFrame => Parent ! // Parent window.addEventListener('message', function (e) { alert(e.data); // hey! }, false); ! ! // IFrame window.postMessage('hey', '*');
  • 14. w i n d o w. p o s t M e s s a g e ( ) • Prone to resource contention • Solution: use channel messaging
  • 16. O T H E R A LT E R N AT I V E S … • postMessage is IE 8+ only (partial support) • easyXDM • porthole • Oasis.js • Conductor.js
  • 17. • Open web way to safely embed 3rd party code • Sandboxing can be through an IFrame or a Web Worker • Capability-based security • Abstractions for services, consumers, events, and requests • Async via Promises • Wiretapping
  • 18. // Host (parent http://example.com) // Sandbox (IFrame http://xyz.com/iframe.html) ! // Service to expose to sandboxes var PingService = Oasis.Service.extend({ initialize: function() { this.send('ping'); }, ! events: { pong: function() { alert("Got a pong!"); } } }); ! // Creates the sandbox oasis.createSandbox('http://xyz.com/iframe.html', { capabilities: [‘ping’], // adapter: oasis.adapters.webworker, // no UI services: { ping: PingService } }); ! // Consumer that handles the ping capability var PingConsumer = Oasis.Consumer.extend({ events: { ping: function() { this.send('pong'); } } }); ! // Connect to the host Oasis.connect({ consumers: { ping: PingConsumer // request ping capability } });
  • 19. C o n d u c t o r. j s • A framework for building sandboxed apps • Gives 3rd parties a well-defined framework for building extensions • Built on top of Oasis.js
  • 22. C o n d u c t o r. j s // Card (http://xyz.com/awesome-card.js) ! // Load dependencies Conductor.require('lib/jquery.js'); Conductor.require('lib/handlebars.js'); ! var template = '<div>{{message}}</div>'; ! // Define card Conductor.card({ ! // Host (parent http://example.com) ! // Bootstrap a new conductor instance var conductor = new Conductor( options ); ! // Load a card conductor.load('http://xyz.com/awesome-card.js'); ! // Add to the DOM conductor.appendTo($('#target')); ! ! ! // Oasis style capabilities. consumers: { pong: Conductor.Oasis.Consumer.extend({ requests: { // handle requests from the host // or other cards }, events: { // handle events from the host // or other cards } }) }, activate: function() { // initialize your card here... }, compileTemplates: function(){ template = Handlebars.compile(template); }, render: function() { $('body').html(template({ message: "Wassup?" })); } });
  • 23. Wa t c h @ t o m d a l e t a l k a b o u t O a s i s / C o n d u c t o r http://j.mp/conductorjs
  • 24. IMPERFECT • CSS on host doesn’t cascade to IFrames — there’s hack (detect and pass in parent styles to IFrame) • Relative links open in the IFrame — there’s a “fix” (use the <base> tag) • Dynamic resizing is an art — over/underflow detection sort of works
  • 28. GRACIAS…AND PLEASE… • Follow me at @rmanalan • Don’t forget to take those Atlassian drink glasses home with you • Come talk to me about an awesome job at an awesome company