i am trying to use an aura component using lightning:container (which renders a static resource react app), in a visual force page.

for that i have created a classicAppDep.app with this code -

<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="lightning:container" />

and then i use this in the visual force page as -

<apex:page standardController="Case"  html-width="100%" html-height="100%"  sidebar="false" showheader="false"
           standardStylesheets="false" docType="html-5.0" id="myPage">
    <apex:includeLightning />
    <div id="lightning" />
        $Lightning.use("xyz:classicAppDep", function() {
              function(cmp) {
                console.log("app rendered");
                // do some stuff

where xyz:app is my aura component which uses lightning:container to render a static resource react app.

But when i am adding this visualforce page to my page, i am getting this error in my console-

Refused to display 'https://mydomain.container.lightning.com/lcc/1569347477000/reactApp/index.html?sflocale=en_US' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://mydomain.visualforce.com"

Basically some mismatch in the domain of my static resource and that of the visualforce page.

How can i resolve this, so that the static resource (react app) renders on the visual force page? Please help.

1 Answer 1


The reason you use lightning:container is because a library is not allowed to modify DOM directly in lightning. However there is no such restriction in visualforce. So you can directly load that application in visualforce.

  • How do i run the react app (in static resources) in visualforce?
    – ghostCoder
    Jul 26, 2019 at 12:19
  • Copy paste html in vfp. Refer to js file using script. Jul 26, 2019 at 12:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .