Oasis.js Sneak Peek

C14f6f7b7ce45e286106e7e7d5421f40?s=47 Chris Tse
March 28, 2013

Oasis.js Sneak Peek

A preview of Oasis.js, an open source library that helps you structure communication between multiple untrusted sandboxes within a web page. It's important stuff.

Learn more and download the library at http://oasisjs.io

C14f6f7b7ce45e286106e7e7d5421f40?s=128

Chris Tse

March 28, 2013
Tweet

Transcript

  1. SNEAK PREVIEW

  2. Oasis.js helps you structure communication between multiple untrusted sandboxes.

  3. Oasis.js uses the concepts in capability-based security to help you

    safely expose capabilities and data to untrusted code, secure in the knowledge that the sandboxes can only communicate with each other and the outside world through those capabilities.
  4. var PingService = Oasis.Service.extend({ }); GETTING STARTED First, create a

    service that you would like to expose: Next, create a sandbox with access to that service. The sandbox's URL should be a JavaScript file. Oasis.js will take care of creating an iframe (or WebWorker) and executing the JavaScript inside of it. Oasis.createSandbox('pingpong.js', { services: { ping: PingService } }); This will give the sandbox access to the PingService.
  5. var PingConsumer = Oasis.Consumer.extend({ }); MEANWHILE, INSIDE THE SANDBOX... In

    pingpong.js, we'll set up a consumer for the service: And connect it to the service in the parent: Oasis.connect({ consumers: { ping: PingConsumer } }) That gives you an idea of the basic communication structure.
  6. var PingService = Oasis.Service.extend({ initialize: function() { this.send('ping'); } });

    LET’S PLAY PING PONG... Now, let's update the PingService to ping the sandbox. The initialize method on your service will be called once the handshake with the sandbox is complete. In this case, the service sends a ping message to the sandbox. To respond back to the host environment, let's update our PingConsumer. var PingConsumer = Oasis.Consumer.extend({ events: { ping: function() { this.send('pong'); } } });
  7. var PingService = Oasis.Service.extend({ initialize: function() { this.send('ping'); }, events:

    { pong: function() { alert("Got a pong!"); } } }); ...HIT IT BACK! Great! Now we have the host environment sending a message to the sandbox, and the sandbox sending a message back. Let's close the loop by listening for pong on the PingService.
  8. SO, IN A NUTSHELL...

  9. SINCE THIS IS SO COMMON...

  10. WE BUILT A REQUEST API ... USING PROMISES var PingService

    = Oasis.Service.extend({ initialize: function() { this.request('ping').then(function(data) { console.log(data); }); } }); Host says: var PingConsumer = Oasis.Consumer.extend({ requests: { ping: function(resolver) { resolver.resolve('pong'); } } }); Sandbox says:
  11. SEND DATA WITH AN EVENT var PingService = Oasis.Service.extend({ initialize:

    function() { this.send('ping', { additional: 'data' }); } }); When sending an event, you can send additional data. Simply pass additional parameters to the send method. The additional parameters will be available in the event handler on the other side of the pipe. var PingConsumer = Oasis.Consumer.extend({ events: { ping: function(options) { console.log(options.additional); // 'data' } } });
  12. SEND DATA WITH A REQUEST var PingService = Oasis.Service.extend({ initialize:

    function() { this.request('ping', { name: 'tom' }).then(function(data) { console.log(data); }); } }); Similarly, you can send additional parameters across the boundary with a request. The additional parameters are available on the request handler after the resolver. var PingConsumer = Oasis.Consumer.extend({ requests: { ping: function(resolver, options) { resolver.resolve('hello ' + options.name); } } });
  13. THE END RESULT This will send a request to the

    sandbox with { name: 'tom' } as options, which the handler in the sandbox will use in its response.
  14. CROSS BOUNDARY COMMUNICATIONS When sending data with an event or

    in response to a request, you are sending data through a MessageChannel. • Boolean • Number • String • Date • Regexp • File* • Blob* • FileList* • ImageData* • ImageBitmap* • Object containing any of these • Array containing any of these Modern browser support sending any of the following types across the boundary: The original version of Web Messaging only supported strings for communication. In older browsers, Oasis.js will attempt to polyfill the cloning algorithm used by newer browsers. However, cloning types marked with a * in the above list is not possible. The good news is that most older browsers that don't support these new types also don't support "structured cloning". For the broadest compatibility, you should limit the objects you send across the boundary (using send, request or resolve) to the list of types in the list above without an *.
  15. POTENTIAL APPLICATIONS Embedding comments in blog Blog Article as Host

    Comment app in Sandbox As seen on Disqus
  16. POTENTIAL APPLICATIONS Embedding payments on e-commerce site Shopping Cart as

    Host Payment app in Sandbox As seen on Stripe
  17. POTENTIAL APPLICATIONS Embedding learning tools inside a lesson Lesson as

    Host eBook app in Sandbox Quiz app in Sandbox As seen on Medici (demo’ed at last Ember NYC Meetup)
  18. The need to embed third-party learning apps in Medici is

    why Oasis.js is commissioned.
  19. None
  20. None
  21. Oasis Sandbox

  22. Host Application Oasis Sandbox

  23. Host Application Oasis Sandbox

  24. Bold Statement of the Day “With Oasis.js, an Ember (host)

    app can now embed any number of JavaScript apps (in sandboxes), interact with them with no security risks.” (I’m going to regret saying this.)
  25. IS NOW AVAILABLE AT www.oasisjs.com

  26. Thank you! Christopher Tse · @christse · Ember NYC Meetup

    · March 29, 2013