Making our web apps safely hackable

535 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
535
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Making our web apps safely hackable

  1. 1. A shit load of 3rd party Javascript widgets
  2. 2. …and a shit load of + security risks + page weight + maintenance
  3. 3. RICH MANALANG / @RMANALAN / ATLASSIAN Making our web apps <safely> hackable
  4. 4. Hackable => Extensible
  5. 5. 3 C A PA B I L I T I E S • Access to REST APIs • Event notifications • UI extensibility
  6. 6. 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
  7. 7. 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
  8. 8. 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);
  9. 9. 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', '*');
  10. 10. 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
  11. 11. postMessage + MessageChannel is raw
  12. 12. 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
  13. 13. • 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
  14. 14. // 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 } });
  15. 15. 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
  16. 16. 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?" })); } });
  17. 17. 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
  18. 18. 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
  19. 19. 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

×