Lightning Container Component Isolation
- The HTML Inline Frame Element iframe allows you to embed an HTML page in the current HTML page
- The embedded HTML page is loaded in a different DOM (with limited access to the parent DOM) and runs in its own context
- The Lightning Container Component (lightning:container) is a convenience component that wraps an iframe and provides a simple API to communicate between the iframe container and its content
Can be used to sandbox components or apps built with libraries that don’t run with LockerService
The Lightning Component Framework provides two isolation mechanisms: LockerService and the Lightning Container Component.
LockerService wraps standard DOM objects like window, document, and element to provide namespace-based access control. Using LockerService, custom components are hosted in the same DOM as the main Salesforce app.
If your JavaScript application doesn’t work within the LockerService security constraints, you can host it in the Lightning Container Component.
Lightning Container Component is a convenience component that wraps your JavaScript application in an iFrame: the browser’s native isolation mechanism.
The Lightning Container Component also comes with a library that you can use in your JavaScript application to make calls to Apex controller methods, and to communicate with the hosting component using a secure message channel.
Example
Use a Lightning Container Component to embed an AngularJS app in a Lightning Component:
<aura:component access="global" implements="flexipage:availableForAllPageTypes">
<lightning:container aura:id="MyAngularApp"
src="{!$Resource.MyAngularApp + '/index.html'}"
onmessage="{!c.handleMessage}"/>
</aura:component>
The Lightning Container Component is not an optimal solution for fine grained application composition where you would embed multiple iframed AngularJS components on a page. In that case, each component would load the AngularJS framework, communication between components would be limited (postMessage only), and the UI would be constrained by the boundaries of each iframe.
Lightning Container Component advantages
- Native isolation mechanism in the browser
- Support for any third-party library, including ones that are not LockerService compliant (libraries are sandboxed in their own DOM/context)
- OK for coarse-grained apps
Lightning Container Component disadvantages
- Limited communication mechanism between components (postMessage)
- Components are constrained to a rectangle area on the page.
- Content may be clipped
- Rich interactions like drag-and-drop between components may not work
- Heavier/Slower. If there are multiple iframes on a page, each iframe loads its own version of libraries
- Not great for fine-grained app composition
window.postMessage()
postMessage is discussed here
Demo
