How can a Calibre web URL be embedded in a Moodle iFrame?

[osobo]

Hello everyone,

I'm trying to display the content of Calibre-web in a Moodle activity page to use it as a digital library.

Both apps are installed on the same domain managed by Cloudron.

In Moodle

1. I've created a page with this iFrame

<p><iframe style="border: none;" src="https://library.example.com" width="100%"
    height="600px" sandbox="allow-scripts allow-same-origin"></iframe></p>

2. I've enabled the "Allow EMBED and OBJECT" and "Trusted Content" tags.
3. The HTML format filter is toggled off

In Cloudron I've modified the Calibre-web CSP as following

default-src 'self'; frame-ancestors 'https://moodle.example.com';

So far no success. The iframe shows "library.example.com has refused connexion"

Thanks for your support
Best wishes

[BrutalBirdie]

@osobo said in How can a Calibre web URL be embedded in a Moodle iFrame?:

In Cloudron I've modified the Calibre-web CSP as following

You need to edit the CSP of the moodle app to allow calibre as an iframe embed.
You just did it vice versa

Did the same once for peertube and Bookstack so I could embed peertube videos into bookstack for video guides / documentation.

[osobo]

@BrutalBirdie Thank you. I've tried to override Moodle's app CSP but it doesn't change the outcome I get the same error. Maybe the code I use isn't correct (?)

[BrutalBirdie]

In the moodle app view you have to add the following CSP:

frame-src https://library.example.com;

did you do that?

Note: add not override, keep the defaults and add the frame-src
More details about frame-src => https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/frame-src

[BrutalBirdie]

I take your Coffee donation as a solved notion? Thanks again for the Coffee

[osobo]

@BrutalBirdie Thanks a lot. It works !
So just to wrap-up for other people, in order to embed your calibre-web app page (ie library.example.com) in Moodle (ie moodle.example.com) iframe you just need to add instructions in both app CSPs :

In Calibre-Web CSP:

frame-ancestors https://moodle.example.com;

In Moodle CSP:

frame-src https://library.example.com;