How to Set Up a Content-Security-Policy in WordPress

Setting up a Content-Security-Policy (CSP) on WordPress requires a careful, gradual approach because WordPress and its plugins often use inline scripts and styles that a strict CSP would block.

Step 1: Start with Report-Only Mode

First, deploy CSP in report-only mode to discover what would be blocked without actually breaking anything:

# .htaccess
<IfModule mod_headers.c>
    Header set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self';"
</IfModule>

Step 2: Identify Required Sources

Check your browser's developer console for CSP violation reports. Common WordPress sources you may need to allow:

• https://fonts.googleapis.com and https://fonts.gstatic.com — Google Fonts
• https://www.google-analytics.com — Google Analytics
• https://www.googletagmanager.com — Google Tag Manager
• https://cdn.jsdelivr.net — CDN resources

Step 3: Deploy the Policy

Once you have identified all necessary sources, switch from Report-Only to enforcing mode:

# .htaccess
<IfModule mod_headers.c>
    Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self';"
</IfModule>

Nginx Configuration

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;" always;

WordPress Plugin Alternative

If you prefer not to edit server configuration files, several WordPress plugins can manage CSP headers for you, such as HTTP Headers or Really Simple SSL Pro.

Verify with InspectWP

After implementing your CSP, run a new InspectWP scan. The security headers section will show whether a Content-Security-Policy header is present.