Jun 25, 2020

Seamlessly Integrating Micro Apps with iFrame

A recent client wanted to upgrade a small portion of their legacy application with a more modern UI and extra functionality, like fuzzy text search. There are a few approaches to incremental upgrades of legacy applications. Some are non-starters, such as wrapping the application in a single project that matches the new technology you plan to use, e.g., Webpack, VueCLI or CreateReactApp.

What other options do we have? Remember iFrames? That thing we were all supposed to forget about and never use again? Our case is the perfect use case. Dropping in additional functionality into legacy applications. The problem that still needs to be solved is, how can these applications communicate with each other?

The browser API has a window method called postMessage, which allows applications to create message events that can be caught by any child of the window environment. We can use this to pass JSON objects between the main window and the iFrame.

The example I will show here, is one that dynamically creates an iFramed app, uses postMessage to provide context data, waits for a postMessage event after some work is performed, then destroys the iFrame.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<html>

<head>
  <style>
  #popup {
    position: fixed;
    top: 50px%;
    left: 15%;
    min-width: 1024px;
    min-height: 768px;
    width: 70%;
    height: 70%;
    background-color: white;
    z-index: 10;
  }
  .show {
    display: block;
    -webkit-animation: fade-in .3s ease-out;
    -moz-animation: fade-in .3s ease-out;
  }
  .hide {
    display: none;
  }
  #popup iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  #popupdarkbg {
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color:
    rgba(0,0,0,.75);
  }
  @-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  </style>
  <script type="text/javascript">
  function sendiFrameData() {
    try {
      let message = {
        type: 'mainAppMessage',
        payload: {}
      };
      let frame = document.getElementById('popupiframe');
      frame.contentWindow.postMessage(message, '*');
    } catch (e) {
      console.log(e) // eslint-disable-line no-console
    }
  }
  function openiFrame() {
    console.log('---Opening IFrame---') // eslint-disable-line no-console
    document.getElementById("popup").classList.remove("hide");
    document.getElementById("popupdarkbg").classList.remove("hide");
    document.getElementById("popup").classList.add("show");
    document.getElementById("popupdarkbg").classList.add("show");
    document.getElementById('popupiframe').src = "http://iframeAppURL:8080";
  }
  function closeiFrame() {
    console.log('---Closing IFrame---') // eslint-disable-line no-console
    document.getElementById("popup").classList.remove("show");
    document.getElementById("popupdarkbg").classList.remove("show");
    document.getElementById("popup").classList.add("hide");
    document.getElementById("popupdarkbg").classList.add("hide");
  }

  window.onload = function() {
    document.getElementById("link").onclick = function(e) {
      e.preventDefault();
      openiFrame();
      document.getElementById('popupdarkbg').onclick = function() {
        closeiFrame();
      };

      window.addEventListener('message', function(event) {
        if (event.data.type === 'iframeAppMessage') {
          console.log('<<< Got a Message from iFrame <<<') // eslint-disable-line no-console
          console.log(event.data.payload)
          closeiFrame();
        }
      });

      return false;
    }
  };
  </script>
</head>

<body>

  <div id="main">
    <h1>Hi I am Main App</h1>
    <button id="link">Click me to open iframe app</button><br>
  </div>

  <div id="popup" class="hide">
    <iframe id="popupiframe" onload="sendiFrameData()"></iframe>
  </div>
  <div id="popupdarkbg" class="hide"></div>

</body>

</html>

Below is code in the iFrame, written in VueJS, showing how to catch the message from the main app, and communicate back with postMessage.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
export default {
  name: 'Home',
  data() {
    return {
      crmContext: null
    }
  },
  created() {
    window.addEventListener('message', (event) => {
      const { data } = event
      const { type, payload } = data
      if (type === 'mainAppMessage') {
        console.log('>>> Got a Message from Main App >>>', {data}) // eslint-disable-line no-console
        this.crmContext = event
      }
    })
  },
  methods: {
    done() {
      const message = {
        type: 'iframeAppMessage',
        payload: {}
      }
      if (this.crmContext && this.crmContext.source) {
        this.crmContext.source.postMessage(message, '*')
      } else {
        console.log('Could not post message', {message}) // eslint-disable-line no-console
      }
    }
  }
}
</script>

Using this these methods, the integration and communication is a seamless user experience, and allows developers to incrementally add drop-in functionality without overhauling the legacy app.

About the Author

Corey Webster profile.

Corey Webster

Sr. Consultant
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
Modern Development Environment for C++: Part 2
In Part 1 of this series, I gave a quick overview of each tool in the development environment and how I came to the conclusion that the tool was a good fit. Today I’m going […]
Mock Intl and Date globals in Jest
In Javascript land, mocking the browser global objects can be a bit of a pain for tests. Searching StackOverflow gives plenty of complicated answers. Some suggesting using 3rd party mock libraries. Some that overwrite the […]
Bitbucket Parameterized Pipelines
Introduction I’d like to address how to handle lots of deployment environments withinBitBucket Pipelines. Below I’m presenting two options: Using tags to parameterize builds Using the BitBucket API to pass variables Lots of Environments There […]
AWS Cloud HSM, Docker and NGINX
There is quite a bit of easily searchable content on the security benefits of leveraging a Hardware Security Module to manage cryptographic keys, so I will leave that to the scope of another article. The […]