Cross-origin-courier NPM

npm npm bundle size NPM GitHub top language

This project is under active development.
Until major version released, the API is a subject to change.

cross-origin-courier

A wrapper over Window.postMessage() and MessageChannel to facilitate messaging between cross origin contexts.

The library exposes a connection function that returns a Promise. On a successful connection, the Promise is resolved with the courier object to be used to send and listen to messages. Note: the child frame should call the connection function first.

Setup

NPM

npm i cross-origin-courier

import connect from 'cross-origin-courier';
// ...
connect().then(courier => {
    courier.listen(handler);
    courier.send({ answer: 42 });
});

function handler(data) {
    // do your stuff
}

CDN

<script src="https://unpkg.com/cross-origin-courier"></script>

Loaded this way, the connection function is exposed under the following long-ish name

window.createCrossOrigConnection().then(courier => {
    // ...
});

Options

const options = {
    passphrase: 'foo-bar-baz-qux',
    isParent: true,
    targetOrigin: '*',
};
createConnection(options).then(courier => {
    // ...
});