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.
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.
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.
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.
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'); } } });
{ 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.
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' } } });
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); } } });
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 *.