How to Use Iframes in Salesforce Lightning Web Components (LWC)

In plain words: An iframe (inline frame) is an HTML element that lets you embed an entire external webpage or web app directly inside your Salesforce screen. In Lightning Web Components (LWC), you can dynamically bind a URL to an iframe tag, allowing users to view third-party dashboards, video feeds, or external portals without ever leaving Salesforce.

Integrating external web content into Salesforce is a common requirement when blending third-party applications with your CRM workflows. Whether you need to display an external analytics dashboard or a specialized web tool, iframes provide a reliable bridge.

In this guide, we will walk through how to build a responsive, dynamic iframe component in Salesforce Lightning Web Components (LWC) with custom styling and configurable URL binding.

Step 1: Create the LWC Component

Open your terminal and use the Salesforce CLI to generate your component files:

sf lightning generate component -n iframeComponent -d force-app/main/default/lwc

Step 2: Build the HTML Template

Open iframeComponent.html. We will wrap our iframe inside a responsive container and bind the src attribute directly to a JavaScript property.

<template>
    <lightning-card title="External Web Integration" icon-name="custom:custom63">
        <div class="slds-card__body_inner">
            <div class="iframe-container">
                <iframe src={iframeURL} title="External Content"></iframe>
            </div>
        </div>
    </lightning-card>
</template>

Step 3: Configure the JavaScript Controller

Open iframeComponent.js. By using the @api decorator, we make the iframeURL property configurable. This means administrators can change the target URL directly from the Lightning App Builder without editing code.

import { LightningElement, api } from 'lwc';

export default class IframeComponent extends LightningElement {
    @api iframeURL = 'https://www.example.com';
}

Step 4: Style the Iframe Responsively

By default, iframes have fixed pixel dimensions that look terrible on mobile devices. Open iframeComponent.css and add the following CSS to maintain a clean 16:9 aspect ratio across all screen sizes.

.iframe-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Forces a responsive 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid #dddbda;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

Developer Trap: Salesforce CSP (Content Security Policy) Restrictions
Salesforce enforces strict security rules. If you try to load an external website inside your iframe, the external site's headers may block it using X-Frame-Options: SAMEORIGIN or restrict it via Content Security Policy (CSP). Furthermore, you must add external domains to your Salesforce org's Trusted URLs for CSP in Setup, or Salesforce will block the connection entirely!

Step-by-Step Configuration in Lightning App Builder:

1. Deploy your new iframeComponent to your Salesforce org.
2. Open any Record Page or Home Page in the Lightning App Builder.
3. Drag and drop your component onto the canvas.
4. In the property editor on the right-hand panel, update the iframeURL text box with your secure destination URL.
5. Save and activate your page!

360 Card: Best Practices for Iframes in LWC

• HTTPS Only: Always load iframe sources over secure HTTPS connections. Loading HTTP content inside a secure Salesforce org triggers browser mixed-content security blocks.
• Lightning Messaging Service (LMS): If your LWC needs to talk inside the iframe or receive messages back from it, use the HTML5 window.postMessage() API combined with LWC message channels.

Core Takeaway: Embedding iframes in LWC requires combining dynamic URL binding via @api, responsive CSS container wrapping, and proper CSP Trusted URL configuration in Salesforce Setup.

Conclusion

Using iframes within Lightning Web Components gives you a flexible gateway to display external web applications directly inside Salesforce. By leveraging responsive CSS techniques and configurable component properties, you can create modular, reusable UI widgets that adapt seamlessly to any business requirement.

Happy coding!