We have a Visualforce page that uses a large JQuery library that we wrote. We wanted to use that JQuery library in a LWC and so we create a LWC with an iframe that loads the Visualforce page. (We used that approach based on a suggestion in a comment in this question due to performance issues we had loading the library directly.)
The LWC loads the Visualforce page fine except when the org has the Enable clickjack protection for customer Visualforce pages with headers disabled option checked under Setup > Session Settings. The error we get is:
Refused to display 'https://...visualforce.com/apex/...' in a frame
because an ancestor violates the following Content Security Policy
directive: "frame-ancestors 'self' http://*.visualforce.com".`
We can load pages with the lightning.force.com domain in the iframe fine. So it seems to be because the Visualforce page has a visualforce.com domain and so it considers it cross-domain even though its another Salesforce page in the same org. We added *.visualforce.com to the "CSP Trusted Sites" and the "Whitelisted Domains for Visualforce Inline Frames" but neither helps. Both the LWC and the Visualforce page are our code and so we can modify them as needed.
Is there any way around this issue?
Best Answer
Under
Session SettingsforWhitelisted Domains for Visualforce Inline Framesmake sure you add the org's base domain (not the visualforce domain). That is the domain that is whitelisted to present the Visualforce iframe.Example:
https://yourdomainname.lightning.force.com