Nine Putrid Mangos

    window-bus
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    Installation

    npm install window-bus --save

    Description

    An ultra light (2Kb) library to facilitate communication between iframes, regardless of origin

    Example

    You can have a look at the test folder on github which contains a runnable basic example

    To run the demo, clone the git repository then run npm install && npm run test

    Client

    import WindowBus from "window-bus";
    
    const iframe = document.createElement('iframe');
    iframe.src = 'some_url';
    
    iframe.onload = () => {
      const bus = new WindowBus(iframe.contentWindow, 'demo'); // demo here is the server channel
      bus.startClient(iframe.src, "optionnaly send something to server").then((whatTheServerSentInStartServer) => {
    
        const pre = document.body;
        const display = (res) => {
          pre.append(document.createTextNode(JSON.stringify(res)));
          pre.append(document.createElement('br'));
        }
    
        bus.dispatch('test', {
          somePayload: true
        }).then((res) => {
          display(res);
          return bus.dispatch('test', {
            another: 'payload'
          })
        }).then(display);
    
        bus.on('print', (msg) => {
          display(msg);
          return "reply from the client";
        });
    
        bus.dispatch('otherTest', 'hi').then((res) => {
          display(res);
          return bus.dispatch('otherTest', 'hi again')
        }).then(display);
      });
    }
    
    document.body.append(iframe);

    Server (the page displayed in the iframe)

    import WindowBus from "window-bus";
    
    const bus = new WindowBus(window.parent, 'demo'); // The channel is optional, but needs to match on both sides
    //const bus = new WindowBus(window.opener, 'demo'); // This will allow both popups and iframes to communicate
    
    bus.startServer(['optional list of allowed origins'], "optionally send something to the client").then((whatTheClientSentInStartClient) => {
      const pre = document.body;
      const display = (res) => {
        pre.append(document.createTextNode(JSON.stringify(res)))
        pre.append(document.createElement('br'));
      }
      const cb = (res) => new Promise((resolve) => {
        setTimeout(() => resolve({ ...res, result1: true }), 100);
      });
      bus.on('test', cb);
    
      bus.on('test', (res, original) => {
        bus.off('test', cb);
        display(original);
        return { ...res, result2: true };
      });
    
      bus.once('otherTest', (res) => {
        setTimeout(() => {
          bus.dispatch('print', 'sent from the server').then((msg) => {
            display(msg);
          });
        }, 100);
        return res + ' for the first time';
      });
    });

    A note on Security

    This library assumes the server is a public page and thus any client can connect to it if a CSP is not configured

    Here is the header you can serve from the server to only allow https://some-client.com to connect to the server

    Content-Security-Policy: frame-ancestors https://some-client.com;
    

    You can also use the first parameter of startServer: bus.startServer(['https://some-client.com']) but the CSP is the most secure option

    Install

    npm i window-bus

    DownloadsWeekly Downloads

    0

    Version

    1.1.4

    License

    GPL-3.0-or-later

    Unpacked Size

    16 kB

    Total Files

    5

    Last publish

    Collaborators

    • tofandel