Patterns for secure frame/native WebView bridge messaging

Gaining a deep understanding of messaging patterns with postMessage in JavaScript is crucial for working in a variety of contexts. postMessage is defined on the following Web API objects: Window, MessagePort, Worker, Client, ServiceWorker, and BroadcastChannel.

In other words, postMessage-based messaging is useful for document-to-iframe, iframe-to-iframe, document-to-worker, and service worker-to-document communication and that’s only the Web APIs. Due to how widespread the postMessage API is, it’s also adopted in non-standard APIs for handling multiple JavaScript contexts. For example, web extensions for Chrome and Firefox contain multiple JavaScript contexts: the devtools panel, proxy, backend, and background script. The postMessage API is also used for Android and iOS communication between the native code and WebViews.

The scenario that we’ll go through is about iframes and how they communicate...