Allow to communicate via postMessage with the HTSQL shell

#3 Merged at 2531193
Repository
andreypopp
Branch
feat/shell-postMessage-api
Repository
prometheus
Branch
default
Author
  1. Andrey Popp
Reviewers
Description

This commits adds a postMessage API to HTSQL shell.

The main motivation for that is to allow a tighter integration of the HTSQL shell into application by embedding shell as an <iframe />.

The API allows to request a current query from the shell via postMessage, example code:

function getQueryFromIframe(iframe) {
  // generate req id
  const id = Math.floor(Math.random() * 10000);

  // send a message to iframe
  iframe.contentWindow.postMessage({type: 'getQuery', id: id}, '*');

  return new Promise(resolve => {
    const onMessage = (evt) = {
      if (
        evt.source === iframe.contentWindow &&
        id === evt.data.id
      ) {
        window.removeEventListener('message', onMessage);
        resolve(evt.data.data);
      }
    }
    window.addEventListener('message', onMessage);
  });
}

Comments (1)

  1. Andrey Popp author

    Updated the PR to allow communication only with the same origin locations.

    Test plan:

    • embed iframe from another domain
    • try to run the example and see it fails with Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('...') does not match the recipient window's origin ('...').