New feature: Content Security Policy management

General
1

We have just rolled out a new feature to allow site admins to manage Content Security Policy (CSP) through the admin. This has been hotfixed and patched from Preside 10.12 → 10.28. The ticket is here: Jira

What is CSP?

CSP stands for Content Security Policy, which is a security standard used to prevent various types of attacks on web applications, such as cross-site scripting (XSS) and clickjacking. It allows website owners to specify which content sources are trusted, helping to protect users from malicious content.

How does the new feature work?

  1. A new system settings category for setting admin + frontend website CSP
  2. Automatic inclusion of external resource URLs from sticker includes
  3. A new request nonce token that can be used on inline scripts and styles
  4. Programmatic interfaces to allow developers to register CSP instructions for a request

New system settings page

This can be found at admin → system → Settings → Content security Policy. Use the form to enable/disable and set CSP for admin pages, all other pages + an additional test CSP to help with developing a good policy that allows the website to continue working while providing additional security.

image
image1862×932 98.4 KB

Using nonce tokens

If you wish to use nonce tokens in your CSP, you can enter 'nonce-$nonce' in the source. The preside system will then replace the $nonce part with the dynamic request nonce (see event.getRequestNonce() below). For example:

script-src self 'nonce-$nonce';

In order to be able to set this, you need to ensure that all inline script tags set this nonce value. This is already not possible in the admin for example because of CKEditor4.

New methods for developers

event.getRequestNonce()

Used to get the nonce token for the current event and output in script and style tags. Note: It is important that if you are using nonce values to protect inline scripts, that any nonce output is not cached. For example:

<script nonce="#event.getRequestNonce()#">
// dynamic inline js here
</script>

event.addToContentSecurityPolicy( directive, src )

Use this to explicitly add a particular source to a CSP directive. For example:

event.addToContentSecurityPolicy( "frame-src", "https://somesite.com" );

...
<iframe src="https://somesite.com/myframe.html"></iframe>

event.setContentSecurityPolicy( ‘somepolicy’ )

Use this method to explicitly set a policy. This will override any admin settings and explicitly use the policy set here.

event.setContentSecurityPolicy( "default-src 'none'; frame-ancestors 'none';" );

Starter admin policy

We recommend starting with the following policy in the admin and adjusting if you find CSP errors in pages stopping functionality that may be coming from custom work:

default-src 'self';
base-uri 'self';
script-src 'self' 'unsafe-eval'  'unsafe-inline';
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
img-src 'self' https://www.gravatar.com data:;
font-src 'self' https://use.fontawesome.com https://fonts.gstatic.com;
object-src 'none';
connect-src 'self';
frame-ancestors 'self';
form-action 'self';

Extensions

Check any extensions that you have installed for updates related to CSP. These will be related to setting nonce attributes on script and style tags and using addToContentSecurityPolicy() for any other known external sources.