Add Content Security Policy to WordPress [2/4]

The first part explained the basics of a content security policy (CSP) and suggested a roadmap for implementation. This part prepares a WordPress site for the implementation.

First, create a child theme of your current theme. A basic child theme is composed of a directory and two almost empty files: style.css and functions.css. Any further modifications will happen in this directory. Essentially, the child theme contains modifications to the original theme and allows automatic updates to the original theme as required. It also allows us to simply switch back to the original if something goes wrong during the development process.

With the child theme in place, consider adding security headers to the site. This is an optional, but beneficial step. Make sure you are comfortable with FTP and editing the .htaccess file; if not, simply skip this step and leave it for some other time.

Creating WP Child Theme

Create a child theme as per the instructions. Here is how it may look for the “twentysixteen” theme, you will have to adjust for your current theme:

1. In the directory /wp-content/themes/ create an empty directory twentysixteen-child/
2. Create empty files style.css and functions.php in the new directory.
3. Add to the /wp-content/themes/twentysixteen-child/style.css (adjust for the theme name):


/*
 Theme Name:   Twenty Sixteen Child
 Description:  Twenty Sixteen Child Theme
 Template:     twentysixteen
 Version:      1.0.0
 Text Domain:  twenty-sixteen-child
*/

4. Add to the /wp-content/themes/twentysixteen-child/functions.php (adjust for the theme name):


<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'twentysixteen-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

5. From the main theme folder COPY the file header.php to the child theme folder.
6. Activate the child theme in the WordPress admin.
7. Check the site, there should be no visible changes; the site should behave and look as before.
8. If something went wrong, switch back to the original theme and look for any errors.

Adding Security Headers

For this step, you should be comfortable with FTP and editing the .htaccess file. If not, simply skip this for now.

1. In your browser, navigate to Security Headers and scan the site. All you have to know about security headers is nicely explained in that report.
2. Find the file .htaccess – should be in the root directory of your site – and copy (FTP) it to your local machine. Make an extra backup copy; if something goes wrong during this procedure simply FTP the original file back.
3. In the .htaccess file, after “# END WordPress”, add:


Header set X-Frame-Options SAMEORIGIN
Header set X-XSS-Protection "1; mode=block"
Header set Referrer-Policy: strict-origin
Header set Content-Security-Policy: "frame-ancestors 'self';"
Header set Feature-Policy: "usb 'none'; microphone 'none'; camera 'none'"

4. FTP the modified .htaccess to the site. Changes are immediate, check the site to see if it still looks the same as before.
5. Navigate to Security Headers and scan the site again. If everything went well you should get A or A+ score.

What’s Next?

With the child theme in place, we are ready to add the content security policy to a <meta> tag of the site header. This policy will apply to all pages on the site, but not to the wp-admin. The policy added to the .htaccess access file applies to both: the wp-admin and all content pages.

Next time: adding the CSP to a <meta> tag of the site header.