An RPC implementation on top of window.postMessage for cross context communication in the browser ㊙️ 🚪
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


secret-door is an RPC implementation on top of window.postMessage for cross context communication in the browser. It can be used, for example, to call functions in a cross domain iframe.

secret-door returns promises when executing remote functions and therefore assumes that window.Promise is available.


npm install --save secret-door


In parent window.

var Channel = require("secret-door");

var channel = new Channel({
  targetWindow: document.querySelectorAll(".some-iframe")[0].contentWindow
  foo: function () {},
  bar: function () {}
}, this);

// set an additional handler
channel.setHandler("getAnswer", function (arg1, arg2) {
  // we can return a promise
  return new Promise(function (resolve) {
    return doSomething(arg1 + arg2);
}, this)

// set a catch all handler
channel.setHandler("*", function (command, arg1, arg2, arg3) {
  // all remote command calls that don't have a registered
  // named handler can be handled here

// unset a handler

//call a function within the iframe
channel.execute("getURL").then(function (url) {

In an iframe.

var channel = new Channel({
  targetWindow: window.parent
  getURL: function () {
    return window.location.href;
channel.execute("getAnswer", 2, 5).then(function (answer) {


var channel = new Channel(options)

  • options.targetWindow - The window to send messages to (e.g. iframeEl.contentWindow, window.parent)
  • options.targetOrigin - What the origin of the other window must be for sending messages
  • options.namespace - Allows using multiple instances of secret door on the same page
  • options.filterIncoming - A function that can reject an incoming message by inspecting parsed data and raw messageEvent


channel.setHandler(name, fn, context);
channel.setHandler(obj, context);

Set the handler for incoming commands.

The handler can be named via the first argument. e.g. channel.setHandler('foo', function () {});

The handler can also be an object mapping names to functions. e.g. channel.setHandler({foo: function () {}, bar: function () {}});

Both can be used in combination. Further calls to either will extend the list of channel's handlers.

If a handler with that name already exists, it will be overwritten with the new one.

The last argument can be used to pass the context that the handler functions will be applied in.

To handle all incoming commands for which a named handler is not available, register a handler with name "". e.g. channel.setHandler('', function (command, arg1) { console.log('handling all commands')} );

Handlers can return promises.

channel.execute(fnName, ...args)

Execute a function on the other side of the channel. First argument is the name of the remote function. The rest of the arguments will be passed as arguments to the remote function.


Remove a handler.


Remove all handlers.

Returns a promise.


Listen in on all requests/responses going through this channel. The callback will be called with 1 object describing the request or response. Only messages that actually go via the channel will be tapped, in other words if the message is in the wrong namespace, wrong origin or is filtered by filterIncoming it won't show up in the tap.


Remove handler references and stop listening to events.


npm test


npm run release

Follow semver rules when specifying a new version.

Want to work on this for your day job?

This project was created by the Engineering team at Qubit. As we use open source libraries, we make our projects public where possible.

We’re currently looking to grow our team, so if you’re a JavaScript engineer and keen on ES2016 React+Redux applications and Node micro services, why not get in touch? Work with like minded engineers in an environment that has fantastic perks, including an annual ski trip, yoga, a competitive foosball league, and copious amounts of yogurt.

Find more details on our Engineering site. Don’t have an up to date CV? Just link us your Github profile! Better yet, send us a pull request that improves this project.