Iframe component could not load PDFs on Chrome

Hi!
I have a iframe in my app that does not load PDF files. Any other file works perfectly. Only in Mozilla Firefox works for PDFs. I need to move from Chrome to Firefox to work with that app. Anyone has the same issue. I suppose it is a Chome security setting but I could not found it. In Safari does not works.

Hi @pdgago,

Thanks for reaching out! Are you able to share the pdf?

Hi @Tess. We tried with any PDF. We setting up the content URL as a dynamic value but copying that URL in a new tab the PDF load perfectly. Only in the app iframe does not load.

Got it! Looks like we are tracking this bug. Is there a reason that you're using the iframe component over the pdf viewer component? The pdf component should accept pdf urls, or, if the url doesn't work, base64 data as described here.

I also saw a potential workaround here (you'd need to enable storage & cookies on our side)

Well, the workaround does not work for us. But adding a PDF component works! The problem is we show not only PDFs but images too. So, have you a solution to this?

I'd probably solve this by putting an image component & a pdf component in the same place on the canvas and hide/show them dynamically:

*As long as one component is hidden, you can drag & drop a second component into the same spot on the canvas. Or, you could use a tabbed container and hide the margins/header/etc

That works for us! Thanks @Tess. BTW. It would be great to fix the bug when using iframes with PDF, but for now it is fine.

Yes, agreed! I don't have an eta yet, but I'll post here if I get any updates internally

1 Like

I ran in to the same issue. Looks like the workaround is to change the allow tag on the iFrame to allow="web-share":

I was able to demonstrate this working by editing the HTML using the developer console, but didn't find a way in ReTool to set custom HTML tags for iFrames. Using custom components or HTML components didn't seem to work either.

Oh! that confirms my suspicions but even editing the iframe tag from the developer console does not works. How do you did it?

I edited the iFrame using the dev console, then right clicked on the iframe in the app and hit "Reload Frame" and it came through. I am investigating if there is a way to use some javascript to do this automatically

I was able to reproduce it but removing the sandbox="..." prop in the iframe tag. The only problem is how to add allow="web-share" programatically. I even tried to access to the iframe via preloaded JS.

Hi there! Yes, we have a related feature request to allow adding the web-share attribute :disappointed: I'll post here when this ships

1 Like

Any chance you know if this is a "days" vs "weeks" or "months" kind of thing? Blocking a use case for some internal ReTool apps.

1 Like

I don't have an eta yet, but it hasn't been added to our our immediate roadmap :disappointed: I'd guess closer to months (a bit dependent on the amount of feedback/other projects in flight), but I'll try to bump the timeline internally

Got it, thanks for the update.