Using IFRAME in Lightning Web Components (LWC) – Best Practices and Use Cases in Salesforce
Overview
Lightning Web Components (LWC) are the modern framework for building fast and scalable components in Salesforce. However, there are times when Salesforce developers need to embed external web content—such as dashboards, videos, or forms—within their components. The HTML <iframe> element is a common solution for this need.
This blog explains how to implement <iframe> in LWC with best practices, security considerations, and common use cases. These practices are particularly important for teams involved in Salesforce Lightning app development in USA, where scalable, secure, and user-friendly applications are in high demand.
Problem Statement
Salesforce does not natively provide a standard component for embedding third-party web content. Developers often face challenges when trying to:
- Embed external content (e.g., YouTube, dashboards, forms) in Lightning pages.
- Handle Content Security Policy (CSP) restrictions that block iframe sources.
- Deal with cross-origin limitations and Salesforce Locker Service restrictions.
- Maintain a responsive layout when using fixed-dimension iframes.
These limitations create roadblocks when trying to display useful external content inside the Salesforce UI. A secure and responsive iframe-based solution is needed.
When Should You Use <iframe> in LWC?
Common use cases for iframes in Salesforce Lightning Web Components include:
- Embedding external websites or apps
- Displaying dashboards (like Tableau, Power BI, or Google Data Studio)
- Embedding a YouTube video
- Integrating third-party forms (e.g., SurveyMonkey, Typeform)
How to Use <iframe> in LWC
Here’s a simple example of embedding a YouTube video using an iframe in LWC.
LWC HTML File (iframeDemo.html)
<template>
<lightning-card title=”Training Video”>
<div class=”iframe-container”>
<iframe src={Url}
width=”100%”
height=”400px”
frameborder=”0″
allowfullscreen>
</iframe>
</div>
</lightning-card>
</template>
import { LightningElement } from ‘lwc’;
export default class ifremeDemo extends LightningElement {
@track Url = ‘https://time.is’;
}
Step by Step Solution is here:
Security Considerations (VERY Important)
Salesforce applies Locker Service, which adds security restrictions for iframes. Be aware of these:
1. Content-Security-Policy (CSP)
- If your iframe source is blocked by CSP, you’ll get a blank iframe or error.
- Add the domain to CSP Trusted Sites in Salesforce:
- Go to: Setup → CSP Trusted Sites → Add the domain (e.g., https://time.is)
2. Cross-Origin Issues
- If the embedded site does not allow being framed (X-Frame-Options: DENY/SAMEORIGIN), the iframe won’t load.
- Workaround: Use embedding-friendly services or proxy APIs (if allowed).
Salesforce Limitations
- You cannot embed Salesforce Lightning pages in an iframe inside another LWC because of X-Frame-Options: SAMEORIGIN.
- You cannot directly interact (DOM or JavaScript) with the iframe content if it’s cross-origin (due to browser security policies).
Pro Tips
- Use sandbox attribute on <iframe> for extra security:
<iframe src={videoUrl} sandbox=”allow-scripts allow-same-origin”></iframe> - Always make iframe URLs dynamic via JS, so they can be updated easily (e.g., via record data or config).
- Use <lightning-card> or styled <div>s to keep your layout Lightning-friendly.
Implication Screenshots
Screenshot: 1
Screenshot: 2
Screenshot: 3
Conclusion
Using <iframe> in LWC can help you bring powerful external content into Salesforce while keeping the user experience unified. Just make sure to handle security, CSP, and responsive design properly.
Always validate and sanitize any dynamic URLs used in iframes to avoid security risks.
related blog
