Limitations
The iframe integration approach has certain technical limitations due to the constraints imposed by browsers on iframes.
The sandbox attribute of the iframe is set to allow-same-origin allow-scripts allow-modals allow-forms allow-downloads allow-popups
.
Headers
The view intended to be displayed in Web Portal’s iframe must also allow the same. There are two HTTP headers that could potentially prevent this. If either of these headers is set to a restrictive value, the view will be unable to load within an iframe.
-
X-FRAME-OPTIONS
- if set toDENY
, the page can not be loaded in an iframe. While it could be set toALLOW-FROM
, this is not universally supported by all browsers. The best option would be to not set it at all, as it is being replaced by theframe-ancestors
policy. -
Content-Security-Policy: frame-ancestors 'none'
- if set like this, the page cannot be displayed in the iframe. In this case, Web Portal’s domain must be added to the whitelist to allow the page to be displayed within the iframe.
Modals/dialogs, tooltips, drop-downs
The content of the module’s UI is constrainedby the size of the iframe.It’s important to consider this limitation when opening modals in the UI and apply styling to ensure they are not cut off, which would render them unusable for the users.
The same consideration applies to drop-downs or tooltips that might be opened in a direction where there is no more space within the iframe. These elements should be carefully positioned to ensure they remain fully visible and functional within the iframe.
Communication with Web Portal
The sole method for the module UI to communicate with Web Portal is through the postMessage API
. For deep-linking, accessing user settings (such as language), receiving messages, and other functionalities to function properly, Web Portal necessitates the implementation of a front-end API by the module UI, as specified in the UI API.
It is highly recommended to utilize the provided iframe-integration library, as it streamlines the postMessage calls in an easily consumable, Promise-based manner. Additionally, it manages the initial handshaking process.
Communication with other module’s back-end API
This is not so much a limitation of the iframe integration, but rather a consequence of the single audience mode of Multitenant Access Control. In this mode, one module’s UI cannot call another module’s back-end API using the same token that is used for its own API. Each token can only be used for a single audience. Please check out the Multitenant Access Control Developer Documentation for further information on this.
Sanitizing Iframe URLs
Every URL which is put into the "src" attribute of the <iframe>
tag is getting sanitized by encodeURIComponent() or encodeURI().