HTTP Headers WordPress Plugin – Content Security Policy (CSP)

Date: 11/08/2019          2 Minutes to Read

The HTTP Headers plugin makes it easy to configure Content Security Policy (CSP) for WordPress security. The Header set Content-Security-Policy header forces web browsers to only load what’s specified within your CSP. Think of CSP as a “code firewall.” No matter what code is in that webpage, the browser is only allowed to load what’s specified within your CSP HTTP header.

Below we cover how to configure Content Security Policy and enable reporting for debugging and proper implementation.

Learn how to speed up your website with our NGINX-powered WordPress Hosting.

Content Security Policy

  1. Install, and activate, the HTTP Headers plugin using your WordPress dashboard or WP-CLI.
  2. Log in to your WordPress dashboard.
  3. On the left, hover over Settings and click HTTP Headers.
  4. Click the Security (0/15) button.
  5. Click Edit on the right of Content-Security-Policy.
  6. Click the “On” button and specify what can be loaded on your website from where.
  7. Save Changes at the bottom.
Example CSP settings with Report-Only for debugging. Covered below.

Related tools for CSP attributes:

require-sri-forSubresource Integrity (SRI) Manager WordPress plugin, Subresource Integrity general info

block-all-mixed-content and upgrade-insecure-requestsReally Simple SSL WordPress plugin, Comparing Free or Paid SSL Certificates

Report-Only

The safest way to configure Content Security Policy is to enable “Report-Only” from the top of the screen. This shows elements on the website that wouldn’t be loaded if CSP was enabled. You can view this in your web browser.

  1. Go to the Edit page for Content-Security-Policy.
  2. Check “Report-Only” (for reporting-only purposes) from the top of the screen.
  3. Check ‘self’ for any values you want to better secure.
  4. Save Changes at the bottom.
  5. View your website.
  6. Open your web browser’s Inspect Element feature.
  7. Check the Console tab to see what’s being blocked by CSP.
  8. Make changes as needed.

Once all errors are removed, test your site by unchecking the Report-Only option.

Errors from all using Report-Only in Firefox

Having up-to-date backups is an important part of website security. Check out our recommended WordPress backup plugins.

Leave a Reply