Publish: Putting an iframe with an external hosted pdf is blocked by chrome

Help
1

What I’m trying to do

I have a site that’s online through obsidian publish. It runs through a custom domain with cloudflare handling the redirection.

In some of the pages/notes, I’m including an iframe like:

<iframe src='https://attachments.kaanu.org/files/some-file.pdf' style='width:100%; height:1000px;' frameborder='0'></iframe>

This loads the PDF correctly on Firefox, but on Chrome/Safari, it is blocked by the browser.

A test page is at kaanu . daktre . com/Publications/aa+test (sorry, I’m not able to post links as my account is new on discourse)

On Firefox, the iframe loads the PDF correctly.

On Chrome, the network request is blocked with a “blocked:csp” status. There is no message in the developer console.

Things I have tried

I have tried setting various combinations of Content-Security-Policy (default-src, frame-src, script-src, connect-src, etc) through “Rules” feature in Cloudflare.

I have also tried setting Content-Security-Policy with frame-ancestors on the site the PDFs are hosted at.

I did find a workaround of using google docs and that works partly, but large files do not load through this.

I’m mostly tired by chromium making it incredibly hard by not showing any message in console of why the pdf is being blocked.

In Falkon browser, it did show a message like Refused to frame '' because it violates the following Content Security Policy directive: "frame-src 'self' https://*:* http://127.0.0.1:*".

But changing the frame-src CSP wasn’t helping. I am suspecting the empty string (‘’) won’t match any CSP? But where is this coming from? And why doesn’t firefox have this issue? I do not know.

Anyhow, my question is if anyone might be able to help with:

  • why this is happening?
  • any workaround
  • any way to debug chromium/elsewhere such that I see the exact reason for CSP block

I do think one workaround could be to try and host the files directly on the domain. That would require me to set up custom domain proxying on my own (and I have had this failing randomly earlier)

2

I added data: to frame-src in Content-Security-Policy, and the error in Falkon browser disappeared. But it still doesn’t load in chromium :frowning:

3

To further isolate the matter, I moved out of cloudflare, and started serving the PDF from the same domain, with a caddy config like the following

kaanu.daktre.com {
        @files path /files/*
        @rest not path /files/*
        handle_path /files/* {
                root * /srv/kaanu.org/files/
                file_server
        }
        encode zstd gzip
        rewrite @rest /serve?url=kaanu.daktre.com{path}
        reverse_proxy @rest https://publish.obsidian.md {
                header_up Host {upstream_hostport}
        }
}

And the iframe is now loading from the exact same domain

<iframe src='https://kaanu.daktre.com/files/ability to pay for health care 1996 Russell.pdf' style='width:100%; height:1000px;' frameborder='0'></iframe>

Still the same result: Works on firefox, “blocked:csp” on chrome.