iFrames

When an iframe integrated application is configured, its context is rendered inside the micro-lc mount point as an iframe tag.

caution

Be mindful that a website cannot be embedded as an iFrame if it served with any X-Frame-Options header and micro-lc is not SAMEORIGIN of the embedded iFrame. Attempting to do so will result in a console error like:

The loading of "https://www.google.com/" in a frame is denied by "X-Frame-Options" directive set to "SAMEORIGIN"

When a website responds with a X-Frame-Options header, the iFrame does not emit an onerror event, hence micro-lc cannot redirect to an error page. The view then depends on the browser used to run the application.

Usage

Declare an application with integration mode iframe in micro-lc configuration:

interface IFrameApplication {
  integrationMode: "iframe"
  route: string // Path on which the iFrame will be rendered
  src?: string // iFrame src attribute value
  srcdoc?: string // iFrame content
  attributes?: Record<string, string> // Valid attributes of iframe HTML element
}

src and srcdoc are mirrors of the iframe attributes and will override any declaration in the attributes field. Anyway if unused, the declaration of src and srcdoc in attributes is valid and will produce a working iframe.

tip

In case of unknown embedding website, srcdoc can be useful to inline your application html document

By default, the style of an iFrame application is set to

iframe {
  width: inherit;
  height: inherit;
  border: none;
}

and can be overridden easily by setting the style attribute.