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

5. Hackable => Extensible

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

15. postMessage + MessageChannel is raw

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