Salesforce Docs Portal

Prepare to Build a Lightning Out 2.0 App

Before you embed a Lightning Out 2.0 app into an external app, configure some security-related and administrative settings in Salesforce and in your external app. These settings allow Lightning Out 2.0 inline frames (iframes) to load in the external app.

Required Editions

Available in: Lightning Experience

Available in: Professional, Enterprise, Performance, Unlimited, all Agentforce 1 Editions, and Developer Editions

User Permissions Needed
To modify My Domain and session security settings: Customize Application
To modify CORS settings: Modify All Data AND Customize Application

Before You Begin

  1. Make sure that your external app supports inline frames (iframes).
  2. Make sure that your external app is secure and uses HTTPS.
  3. Make sure that third-party cookies are allowed in your external app and your users’ browsers.

Configure Session Settings

Add the domain names of your external apps to the Trusted Domains allowlist in Session Settings.

  1. From Setup, in the Quick Find box, enter Session Settings, and then select Session Settings.
  2. In the Trusted Domains for Inline Frames section of the Session Settings Setup page, click Add Domain.
  3. Enter the domain of an external app that will host your Lightning Out 2.0 app.
    Acceptable URI formats are example.com, https://example.com, and *.example.com.
  4. Select Lightning Out from the IFrame Type dropdown list.
  5. Save your changes.
  6. Repeat steps 2-5 for any other domains that will host your Lightning Out 2.0 app.

Enable Third-Party Cookies

Make sure that cross-domain Salesforce session cookies are enabled.

  1. From Setup, in the Quick Find box, enter My Domain, and then select My Domain.
  2. In the Routing and Policies section, make sure that the “Require first-party use of Salesforce cookies” setting is deselected.

Configure CORS Settings

Add the domain names of your external apps to the Cross-Origin Resource Sharing (CORS) allowlist.

Note
Note

This step is required only if your external app uses the Lightning Out 2.0 UI Bridge access point for client-side authentication. If your external app uses its own server-side authentication flow to generate a Salesforce frontdoor URL, this step isn’t required. See Set Up Authentication for Lightning Out 2.0.

  1. From Setup, in the Quick Find box, enter CORS, and then select CORS.
  2. To add a domain to the CORS allowlist, click New.
  3. For Origin URL Pattern, enter the domain of the external app that will host your Lightning Out 2.0 app.
    The origin URL pattern must include the HTTPS protocol and a domain name.
  4. Repeat steps 2 and 3 for any other domains that will host your Lightning Out 2.0 app.
  5. In the Cross-Origin Resource Sharing (CORS) Policy Settings section, click Edit.
  6. Select Enable CORS for OAuth endpoints.
  7. Save your changes.

See Also