CSP Header

This module adds Content Security Policy headers into your site's responses. CSP is used by web browsers to validate what resources it should allow to be loaded from the site.

Depending on what options you configure, this can help prevent malicious files or scripts that have been uploaded by users from executing XSS attacks and more.

Usage Warning

This module is designed to make your website more secure. It stops arbitrary code from being added to your website. However it may also break plugins and themes. If plugins or themes use inline scripts or styles, then they may stop functioning. Developers will need to add support for Toolbelts implementation of CSP for the functionality to work.

What does it look like?

A typical (restrictive) CSP would look like this:

Content-Security-Policy: default-src 'none'; script-src 'self'; img-src data: 'self'; style-src 'self' 'unsafe-inline'; font-src data: 'self'; object-src data:; base-uri 'none'; form-action 'none'; worker-src 'self'; connect-src 'self'; manifest-src 'self'

or a much more permissive option would be something like this:

default-src https:; upgrade-insecure-requests; block-all-mixed-content;

How do you configure this?

By default, the Toolbelt CSP module configures a permissive CSP that mirrors the second example, above. This doesn't do much to protect your users or your site, but has less chance of breaking things. To configure a more restrictive policy, you'll want to evaluate resources loaded on your site. Once you have a list of resources you want to permit, you can begin configuring your options by either reading the documentation on Content-Security-Policy, or by using a CSP builder. Ideally both.

Once you have a configuration you are comfortable implementing, you can apply a WordPress filter to toolbelt_csp_policy. Like so:

function my_csp_policy( $settings ) {
    return array(
        'report-only' => false,
        'default-src' => "'self'",
        'img-src' => array(
            "'self'",
            'some.cdnprovider.tld'
        ),
        'style-src' => array(
            "'self'",
            "'unsafe-inline'",
        ),
        'script-src' => array(
            "'self'",
            "'unsafe-inline'"
        ),
        'font-src' => array(
            "'self'",
            "'data:'"
        )
    );
}

add_filter( 'toolbelt_csp_policy', 'my_csp_policy' );

Theme and Plugin support.

Toolbelt uses a generated nonce to allow inline scripts and styles to function. Content linked to external files on the same domain will continue to function.

To add support you will need to output a nonce parameter with the value TOOLBELT_NONCE. In PHP this would look like:

<style nonce="<?php echo esc_attr( TOOLBELT_NONCE ); ?>">
// Styles here.
</style>

Add support for Google Fonts

By default styles can be loaded from external domains, however fonts can not. So adding the following filter will add support for the Google fonts cdn.

function my_csp_google_fonts( $settings ) {
	$settings['font-src'][] = 'https://fonts.gstatic.com';
	return $settings;
}
add_filter( 'toolbelt_csp_policy', 'my_csp_google_fonts' );

Why Arrays? CSP is a String!

An array allows a much more organized method for building the rules to send to the client. We could just allow you to pass a string to the function however it would be more difficult to parse for validity.