Coding issue and fix: Communities, iFrame + VFP, and Content Security Policy

I had to spend way more time than I’m happy to fix an issue with my Aura component that loads a VFP in an iFrame in Communities.

Situation:
I have a VFP (Renderas=PDF) embedded as an iFrame in an Aura component embedded in Communities.
While this worked fine for all existing customers, one customer ran into an error around the frame ancestor security policy.

I couldn’t figure out while this specific community was affected while all others were fine. I followed all links on Google, tried everything. Still couldn’t get it to work or even reproduce the issue in any other community I’ve access to.

  const pageUrl = window.location.href;
  let hostname;
  if(pageUrl.includes("/s/")){
	hostname = betterHostname.substring(0, hostname.indexOf("/s"));
  }else{
	hostname="";
  }  
  component.set("v.vfpUrl",hostname+"/apex/adminshelper__ExportKnowledgeDetailAsPDF?knowledgeArticleVersionId="+ component.get("v.artId"));

In the case you run into the same issue, maybe that post saves you a weekend of trying to figure it out.

The solution was simpler than expected, setting the URL absolute instead of a relative URL.

 component.set(“v.vfpUrl”,hostname+”/apex/adminshelper__ExportKnowledgeDetailAsPDF?knowledgeArticleVersionId=”+ component.get(“v.artId”));

I only do that for community pages, since it works completely fine in Lightning itself.

PS: Thank you so much to my customer for helping me out all the way through!

PPS: I’m sure, there are better ways to do that, I’m just happy I got it to work eventually

In case you want to check out the latest version of ‘Knowledge Article PDF’.
https://lnkd.in/gmF9Ynjb