A s h i t l o a d o f 3 r d p a r t y J a v a s c r i p t w i d g e t s

… a n d a s h i t l o a d o f + s e c u r i t y r i s k s

+ p a g e w e i g h t

+ m a i n t e n a n c e

M a k i n g o u r w e b a p p s < s a f e l y > h a c k a b l e

R I C H M A N A L A N G / @ R M A N A L A N / A T L A S S I A N

H a c k a b l e = > E x t e n s i b l e

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

• Access to REST APIs

• Event notifications

• UI extensibility

A S H I P I N P O R T I S 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 .— G R A C E H O P P E R

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

p o s t M e s s a g e + M e s s a g e C h a n n e l i s r a w

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) !// 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 } });

// Sandbox (IFrame http://xyz.com/iframe.html) !// 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({ ! // 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?" })); } });

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

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

I M P E R F E C T

• 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

G R A C I A S … A N D P L E A S E …

• 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