Auto-configure app CSP for configured Live Preview URL

[lloydmarquart]

Describe the Bug

Hi there, thanks a lot for the great work on Directus! 💜

I wanted to try out the new live preview feature but somehow couldn't get it to work with any website I tried to embed. The iframe stayed blank, and in the Javascript console I got an error that says: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

Is there some setting that needs to be adjusted on the preview website that I'm missing? First I was testing it with our own website, and then proceeded to test it with things like YouTube embeds. All showed the same behavior :/

To Reproduce

Set any website as the preview URL for a collection, and then view an item from that collection with live preview turned on.

Directus Version

v10.2.1

Hosting Strategy

Self-Hosted (Docker Image)

[br41nslug]

As a workaround for now you can allow domains to be loaded by explicitly setting it in the CSP configuration.

CONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC="http://example.com/"

[rijkvanzanten]

@br41nslug What's the proposed improvement here? Is the problem that third party scripts used in the iframe are still blocked? 🤔

[br41nslug]

@br41nslug What's the proposed improvement here? Is the problem that third party scripts used in the iframe are still blocked? 🤔

I think the only real solution is to implement #17794 (comment) not sure why we not ended up doing that in the end.

The script-src error will probably not get solved as that sounds like a specific script heavy site like youtube doing something preventing iframing from their end. However any URL does get blocked out of the box without explicitly allowing it in the CSP.

Most should be seeing an error like Content Security Policy: The page’s settings blocked the loading of a resource at http://example.com/ (“frame-src”). instead.

[rijkvanzanten]

Copy that! I'll update the OP to make that clear 🙂

[lloydmarquart]

Thanks for the help, got it working! 🎉 I also think auto-configuring the CSP would be great 👍

[mcqua007]

How can what configure CSP configs in directus cloud standard?

[mpcref]

For external websites that have their own CSP disallowing embedding, can we please have a checkbox for "Open preview URL in new window" ?
Sorry, I'll create a new issue. 😉
#22381