Content Security Policy

[alt]

Enonic version: 7.11.3
Content Studio 4.4.2

I recently updated my Enonic XP version from 7.6.1 to 7.11.3, and also updated Content Studio to version 4.4.2. However, after the update, I have been experiencing some errors. Specifically, I am seeing the following error messages:

Content Security Policy: The page’s settings blocked the loading of a resource at https://www.google-analytics.com/analytics.js (“script-src”). 
Content Security Policy: The page’s settings blocked the loading of a resource at https://www.youtube.com/embed/kM9bV5GQtXE (“default-src”). 
Content Security Policy: The page’s settings blocked the loading of a resource at https://static.hotjar.com/c/hotjar-759715.js?sv=7 (“script-src”). 
Content Security Policy: The page’s settings blocked the loading of a resource at https://www.googletagmanager.com/gtag/js?id=G-98NEGQEE01&l=dataLayer&cx=c (“script-src”). 
Content Security Policy: The page’s settings blocked the loading of a resource at https://www.youtube.com/embed/kM9bV5GQtXE (“default-src”).

I checked your documentation at Configuration file - Enonic Developer Portal and added a config file at /.enonic/sandboxes/nibio_new/home/config/com.enonic.app.contentstudio.cfg with the following content:

contentSecurityPolicy.header=default-src 'self' https://*.youtube.com; connect-src 'self' ws: wss: https://*.gstatic.com https://*.googleapis.com; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.google.com https://*.googleapis.com https://*.gstatic.com https://*.google-analytics.com https://static.hotjar.com https://www.googletagmanager.com; object-src 'none'; style-src 'self' 'unsafe-inline' https://*.gstatic.com; img-src 'self' data:; frame-src 'self' https://*.googleapis.com https://*.youtube.com`

However, despite adding the config file, the errors persist. The only way I was able to get rid of the errors was by disabling the Content Security Policy entirely with the setting contentSecurityPolicy.enabled=false, but I do not want to compromise security by disabling it altogether.

Can you please help me resolve this issue and enable Content Security Policy without any errors?

Thank you for your assistance.

[asl]

Hello, @alt! Could you please first check if those response headers are being returned from server? You can check Network tab in the browser’s developer tools.
Then depending if your headers are there or not we will dig deeper with it.

[alt]

[Alan]

Errors you are seeing in the console are not coming from Content Studio (even though you see them there), they come from content rendered by XP. If you click Preview to preview the content in a separate browser tab (outside of Content Studio), you will most likely see exactly the same errors.

So, you should configure CSP headers not for Content Studio but for XP, see here.

When do you need to configure CSP for Content Studio? For example, if you are building a widget that will be embedded inside Content Studio and you want to allow scripts running inside that widget. We’ll add this note to our docs to help distinguish between these cases.

Another side note - it’s probably not a good idea to run Google Analytics scripts in edit and preview modes, you want only “live” data. You can check mode in the request object (see here) and embed analytics only in live mode. You can check how we did it in our own Google Analytics widget here.

[Alan]

Docs are updated.