VF page with CSRF token enabled is not working inside communities

Question

We have a requirement to display an LWC component inside a community. Internally, that LWC component uses an iframe to load a VF page (with CSRF and communities enabled). When added to the object record page inside the lightning experience, the LWC component performs as intended. Yet when it is introduced within the community, it does not function.

Below VF page URL that I am attempting to load as an iframe inside LWC:

'/sfsites/c' + new PageReference('/apex/SVMXDG__svmx_dg_form_vf').getUrl();

I also tried with the straightforward use case. I have created a simple VF page with the requires CSRF token and lightning/communities enabled. That page is not working inside the community. The VF page loads inside the community, though, if I disable the CSRF token.

Has anyone worked on a similar kind of functionality?

Any assistance will be greatly appreciated.

Answer 1

Loading a Visualforce page within an iframe in a Lightning Web Component (LWC) inside a community can be challenging because of security constraints. When loading content inside an iframe, the content must have the same origin as the parent window. Otherwise, the browser will block the iframe from accessing the content due to the Same-Origin Policy.

In your case, it's possible that the iframe is being blocked because the VF page is not hosted on the same domain as the community. To resolve this issue, you can try using the Lightning Container Component (LCC), which allows you to embed third-party content into your Lightning components and pass data between them. You can also use the lightning:container tag to embed Visualforce pages in a Lightning Experience context. However, it is important to note that the lightning:container tag does not work in communities.

If you still want to use an iframe, you could try configuring the content security policy (CSP) settings in your community to allow loading content from the Visualforce domain. To do this, go to Setup > Security > CSP Trusted Sites, and add the Visualforce domain to the Trusted Sites list. Keep in mind that this approach may increase the risk of cross-site scripting (XSS) attacks.

Regarding the issue with CSRF tokens, it's possible that the CSRF token is being blocked because it is not being passed correctly between the LWC and the VF page. To pass the token correctly, you need to ensure that the VF page is sending the token back to the server with each request. You can do this by using the apex:form tag in your VF page and including the {!$Site.csrfToken} merge field in the form. Additionally, make sure that your LWC is sending the CSRF token in the headers of the requests to the VF page.

In summary, loading a Visualforce page inside an LWC inside a community can be challenging due to security constraints. Consider using the Lightning Container Component or configuring the content security policy settings to allow loading content from the Visualforce domain. Additionally, ensure that your VF page is sending the CSRF token back to the server with each request, and that your LWC is sending the token in the headers of the requests to the VF page