Why Am I Unable to Open an Experience Cloud Site in an iframe?

Question

I have an OmniScript on an Experience Cloud site, and I need to embed another Experience Cloud site inside this OmniScript. To achieve this, I created an LWC component that contains an iframe to load the second site.

However, when I try to open the second Experience Cloud site inside the iframe, I get the error:
“Site refused to connect.”

Upon inspecting the console, I see the following error:
“Refused to frame ‘https://adb-dev-ed.my.site.com/‘ because an ancestor violates the following Content Security Policy directive: ‘frame-ancestors ‘none’”

How can I allow the second Experience Cloud site to be embedded inside an iframe on the first Experience Cloud site? Is there a way to modify Content Security Policy (CSP) settings or any other configuration to enable this?

Answer

The error occurs because Salesforce enforces strict Content Security Policies (CSPs) that prevent Experience Cloud sites from being embedded inside iframes by default. The directive "frame-ancestors 'none'" explicitly blocks the site from being loaded inside an iframe for security reasons, mainly to prevent clickjacking attacks.

Although Salesforce strongly discourages embedding Experience Cloud sites inside iframes, there are a few possible solutions to attempt resolving this issue.

Solution 1: Adjust Clickjack Protection Settings

Salesforce provides Clickjack Protection settings for Experience Cloud sites. You can modify these settings to allow the second site to be embedded within an iframe.

To update Clickjack Protection settings:

1. Go to Setup and search for Sites in the Quick Find box.
2. Select the Experience Cloud site you are trying to embed (the second site).
3. Click Edit next to the site.
4. Locate the Clickjack Protection settings.
5. Change it to either “Allow framing by the same origin” or “Allow framing by any page within the same Salesforce org”.
6. Save the changes and test again.

If these settings do not provide an option to allow embedding, then Salesforce is explicitly blocking iframe embedding, and you may need to explore alternative approaches.

Solution 2: Modify Content Security Policy (CSP) Settings

If Clickjack Protection settings do not resolve the issue, you can check and modify the CSP Trusted Sites settings.

1. Go to Setup and search for CSP Trusted Sites.
2. Click New Trusted Site.
3. Enter the domain of the first Experience Cloud site (the one that contains the iframe).
4. Select “Allow site to be iframed”.
5. Save the changes and test again.

Even if you add the first site to the CSP Trusted Sites, Salesforce may still enforce 'frame-ancestors 'none' at a deeper level, restricting iframe usage entirely.

Solution 3: Open the Site in a New Tab Instead of an iframe

Since Salesforce enforces strict iframe restrictions, an alternative approach is to open the second Experience Cloud site in a new tab or a popup window instead of embedding it inside an iframe.

Modify your LWC component to open the site in a new tab using JavaScript:

window.open('https://adb-dev-ed.my.site.com/', '_blank');

If you are using Lightning Navigation API, you can navigate to the second site like this:

import { NavigationMixin } from 'lightning/navigation';

export default class MyComponent extends NavigationMixin(LightningElement) {
    openNewTab() {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__webPage',
            attributes: {
                url: 'https://adb-dev-ed.my.site.com/'
            }
        }).then(url => {
            window.open(url, '_blank');
        });
    }
}

Using window.open() or the Lightning Navigation API ensures that the second Experience Cloud site opens separately, bypassing iframe restrictions imposed by Salesforce.

Solution 4: Fetch Data from the Second Site Instead of Embedding It

If your goal is to display specific content from the second Experience Cloud site rather than embedding the entire page, you can consider fetching the required data via API and rendering it inside the first site.

1. Expose the required data from the second site using a public REST API (if possible).
2. Call this API from your LWC component in the first Experience Cloud site using fetch() or Apex.

Example using fetch():

fetch('https://adb-dev-ed.my.site.com/services/apexrest/customAPI', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => {
    console.log('Data from second site:', data);
})
.catch(error => {
    console.error('Error fetching data:', error);
});

By using this method, you avoid iframe restrictions while still displaying content from the second Experience Cloud site.

Salesforce enforces strict security policies that prevent embedding Experience Cloud sites inside iframes by default. You can try adjusting Clickjack Protection settings and modifying CSP Trusted Sites, but in most cases, Salesforce does not allow Experience Cloud sites to be loaded in iframes.

The best alternatives are to either open the second site in a new tab using window.open() or fetch the necessary data via an API and display it dynamically inside the first Experience Cloud site.

Enroll for Career-Building Salesforce Training with Real-Time Projects

Our Salesforce Course is expertly designed to provide a comprehensive understanding of the Salesforce platform, equipping you with the essential skills to excel in the CRM industry. The program covers key modules such as Salesforce Admin, Developer, and AI, combining theoretical learning with hands-on practice. Through real-world projects and practical assignments, you will develop the expertise needed to solve complex business challenges effectively using Salesforce solutions. Our skilled instructors ensure you gain both technical proficiency and industry insights to thrive in the Salesforce ecosystem.

Beyond technical training, our Salesforce training in Hyderabad includes personalized mentorship, certification guidance, and interview preparation to enhance your career opportunities. You’ll receive access to extensive study materials, hands-on project experience, and dedicated support throughout your journey. By the end of the program, you will be well-prepared for certification exams and possess the real-world problem-solving skills employers value. Take the first step in your Salesforce career with us—join a Free Demo today!