�ݺ�ߣ

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

3 C A PA B I L I T I E S

• Access to REST APIs
• Event notifications
• UI extensibility

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);


// IFrame => Parent
!

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

// IFrame
window.postMessage('hey', '*');


• 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

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

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

�ݺ�ߣ

Making our web apps safely hackable

Recommended

More Related Content

Viewers also liked (9)

Similar to Making our web apps safely hackable (20)

Recently uploaded (20)

Making our web apps safely hackable