Error: an ancestor violates the following Content Security Policy directive: "frame-ancestors" when load a react bundle to Visualforce page

Question

I want to load an script (A react bundle file) in an aura component, and the script work correctly in the aura component. After that, I create a Visualforce page to add the aura component to it by using:

$Lightning.use("c:AuraApp", function() {

        $Lightning.createComponent(

            "c:AuraComponent",

            {},

            "root",

            function(cmp) {

                console.log("Lightning Aura Component is Loaded...");

            }

        );

    });

But when I open the visualforce page, it return the error an ancestor violates the following Content Security Policy directive: "frame-ancestors". Can you help me to resolve this problem? Here is my reference about my work:

https://blog.shubhamlashkan.com/how-to-use-aura-component-in-visualforce-page

https://developer.salesforce.com/blogs/2018/04/lightning-container-component-building-components-with-react-angular-and-other-libraries

Thank you so much.

Answer 1

I think the reason why you are getting the error is that you are trying to load a Lightning Aura component inside a Visualforce page, which violates the Content Security Policy (CSP) directive of frame-ancestors. This directive restricts which parent URLs can frame the current resource, and by default, Salesforce only allows the same origin to do so.

To fix this problem, you have two options:

• You can change the CSP settings for your Visualforce page by adding a meta tag with the frame-ancestors directive and the allowed origins. For example, you can add this tag to your Visualforce page:

< meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' https://*.salesforce.com">

This will allow your Visualforce page to be framed by any Salesforce domain. You can also specify other domains if you want to allow them as well.

• You can use the Lightning Out feature. This feature handles the CSP issues for you and lets you use Lightning components in any web page.