LiquidFiles Documentation
Updated for: v3.6

Content Security Policy

The Content Security Policy (CSP) specifies from where resources such as Stylesheets, JavaScripts, Images, fonts, ... can be loaded from. The default security policy only really permits 'self', or the LiquidFiles system itself, on most pages.

On some pages, such as the download notification page (that displays the map), the Content Security Policy on that page permits loading of the map images (if you have enabled maps in the configuration).

On the message compose page and if you have enabled the HTML editor, the Content Security Policy will include 'unsafe-inline' for the message compose page, and also on any page that shows any message if you have enabled the full HTML editor as opposed to the Basic HTML editor.

Content Security Policy configuration

Lets say that you want to include an image on your branding page from the source https://www.mycompany.com/logo.png. The default Content Security Policy will refuse to load this image because on default images are only permitted from 'self', not anything else like https://wwww.mycompany.com. In order to load this image, you will need to add https://www.mycompany.com in the Image Src in Admin → Configuration → Settings, in the CSP tab. Including https://www.mycompany.com in the Image-src Content Security Policy tells the browser that it is also permitted to load images from https://www.mycompany.com when visiting LiquidFiles.

As a side note, its safer (and doesn't require any additional CSP configuration) to upload the logo.png to the assets tab in Admin → Configuration → Branding, and load the image from the LiquidFiles system itself (/img/logo.png). And if for whatever reason you need to load an external resource into LiquidFiles, you will need to update the Content Security Policy.

Understanding 'unsafe-inline'

LiquidFiles v3.5 removed 'unsafe-inline' from the script-src and LiquidFiles v3.6 removed 'unsafe-inline' from the style-src.

Before we had strict Content Security Policies, it was common to write JavaScript statements inline in the html like:

<input type="text" onclick="some javascript" />

And inline styles like:

<p style="font-weight: bold; margin-top: 40px;">some text</p>

Since LiquidFiles v3.6, neither of these statement are permitted (the JavaScript statement was also not permitted in LiquidFiles v3.5).

While you can still add 'unsafe-inline' to your CSP policy in Admin → Configuration → Settings, it is much better, and safer, to also adopt your custom branding to use modern and safe web practices of using classes instead.

Adding Custom Styles

Instead of adding individual styles like in the example above, the first place to look is the Bootstrap Documentation. There's already a lot utility classes available in Bootstrap. For instance, instead of adding style="font-weight: bold;" you can add a class="fw-bold" and instead of style="margin-top: 20px;" you can add a class="mt-4" (there's mt- (margin-top) sizes 1-5 defined in Bootstrap for generic spacing).

If you can't find a class that matches what you want, you have two options. The best option would be to add a class to the Custom Stylesheet in Admin → Configuration → Branding, and add say:

.custom-margin-top-40px { margin-top: 40px; }

And then you can use:

<p class="custom-margin-top-40px">some text</p>

This is the safest method. Alternatively, you can add 'unsafe-inline' (with single quotation marks) in Admin → Configuration → Settings, the Style-src in the CSP tab. This will permit adding inline styles but is a less secure and may put your LiquidFiles system at risk.

Adding Web Fonts

LiquidFiles uses FontAwesome, that is technically a web font (that displays icons), but LiquidFiles doesn't use any custom fonts for font display purposes. Lets say you want to add https://fonts.provider.com/coolheader.woff2 as a header font. This will on default be blocked (fonts are only permitted from 'self'), and there is no font-src field in the CSP configuration (Admin → Configuration → Settings). But there is an "Other CSP" field that you can use to add the font src statement. To use the web font above, you can add the following to the Other CSP:

font-src 'self' https://fonts.provider.com;

And the browser will now be permitted to load fonts from https://fonts.provider.com when visiting LiquidFiles as well as still permitting FontAwesome using 'self'.

Validation and further information

Please note that there's no validation for any input in the Content Security Policy configuration. If you don't know what you're doing or make a mistake, you could put your system at risk.

For more information, please see the: Content Security Policy Documentation.