Communications Among UI Components in the vSphere Client

The vSphere Client user interface loads both its own components and the components belonging to the plug-in user interface. The vsphere-ui service reads the plug-in manifest file to determine where it should insert plug-in components in the user interface.

The user interface components loaded in the browser are organized as shown in the following diagram.

Figure 1. User Interface with a Sandboxed Plug-in

Paths:

1. Internal JavaScript methods
2. window.postMessage() method in browser
3. Public JavaScript methods

The plug-in user interface operates within its own iFrame, isolated from other plug-ins. The plug-in loads a copy of the vSphere Client JavaScript API client library, which is its sole connection to other client code. The plug-in code communicates with the client library code using JavaScript method calls.

The client library communicates with the sandbox component that the vSphere Client provides to interface with the plug-in UI components. The communication with the sandbox uses the browser's window.postMessage() API. This makes it possible for the iFrame and its parent window to be loaded from different origins.

Note: In the vSphere 6.7 Update 1 release of the vSphere Client, the iFrame and its parent window share the same origin. Do not depend on this to remain the same in future releases. In cloud environments, the iFrame is loaded from a secondary host.

The plug-in sandbox communicates with other components of the vSphere Client user interface by using internal Javascript APIs.

If the vSphere Client has more than one plug-in active, each plug-in is allocated its own sandbox, and operates within its own iFrame, as shown in the following illustration.

Figure 2. User Interface with Two Plug-ins in Separate Sandboxes

Paths:

1. Internal JavaScript methods
2. window.postMessage() method in browser
3. Public JavaScript methods

In this case, each plug-in UI communicates with its own back-end server.