Content Security Policy Configuration

  • thresholdjlt

    (@thresholdjlt)


    1 year, 2 months ago

    Hi, I am having trouble setting up content security policy. I tried getting it to work in functions.php. Then I switched to htaccess. I saw several examples out there. I have the following code in htaccess that works fine:
    #Security Header Begin <ifModule mod_headers.c>
    Header set Strict-Transport-Security "max-age=31536000" env=HTTPS
    Header set X-XSS-Protection "1; mode=block"
    Header set X-Content-Type-Options nosniff
    Header set X-Frame-Options SAMEORIGIN
    Header set Referrer-Policy: no-referrer-when-downgrade
    </ifModule>
    #Security Header End

    If I add the following line:
    Header set Referrer-Policy: no-referrer-when-downgrade Header set Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';"

    I don’t get any syntax errors in the editor but my site will not render anymore. The site after changes just show links and keywords without graphics.
    #Security Header Begin
    <ifModule mod_headers.c>
    Header set Strict-Transport-Security "max-age=31536000" env=HTTPS
    Header set X-XSS-Protection "1; mode=block"
    Header set X-Content-Type-Options nosniff
    Header set X-Frame-Options SAMEORIGIN
    Header set Referrer-Policy: no-referrer-when-downgrade
    Header set Content-Security-Policy "default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';"
    </ifModule>
    #Security Header End

    Not sure what I am doing wrong

Viewing 2 replies - 1 through 2 (of 2 total)
  • saghir daska

    (@saghirdsk)

    1 year, 2 months ago

    The issue is that your Content Security Policy (CSP) is too restrictive, blocking essential resources. Let’s break down the problem and solution: 1. Syntax Error in Referrer-Policy

    Your Referrer-Policy header has a colon (:) in the directive, which is invalid. Use this instead:

    Header set Referrer-Policy "no-referrer-when-downgrade"

    2. Overly Restrictive CSP

    Your current policy (default-src 'none') blocks everything by default. Here’s why your site breaks:

    • Missing font-src: If your site uses fonts (e.g., from WordPress or Google Fonts).
    • Inline scripts/styles: Common in WordPress (e.g., inline <script> tags).
    • External resources: CDNs, analytics, or third-party content.

    Recommended Fix

    Start with a safer CSP and gradually tighten it. Use this as a baseline in your .htaccess:

    Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';"

    Key Changes:

    1. default-src 'self': Allows same-origin resources by default.
    2. 'unsafe-inline': Temporarily allows inline scripts/styles (common in WordPress).
    3. data: for images: Permits images embedded via data: URIs.
    4. Added font-src: Allows fonts hosted on your domain.

    Next Steps:

    1. Check Browser Console: Look for CSP violation errors to identify blocked resources.
    2. Replace 'unsafe-inline': Use nonces or hashes for inline scripts/styles in production.
    3. Add Exceptions: Include external domains (e.g., https://fonts.googleapis.com for Google Fonts).

    Example Enhanced Policy:

    Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' data: https://stats.example.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self';"

    Final .htaccess Section:

    <IfModule mod_headers.c>
  Header set Strict-Transport-Security "max-age=31536000" env=HTTPS
  Header set X-XSS-Protection "1; mode=block"
  Header set X-Content-Type-Options "nosniff"
  Header set X-Frame-Options "SAMEORIGIN"
  Header set Referrer-Policy "no-referrer-when-downgrade"
  Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';"
</IfModule>

    Testing Tools:

    • Use CSP Evaluator to audit your policy.
    • Enable report-uri in CSP to collect violation reports during testing.
    • This reply was modified 1 year, 2 months ago by saghir daska.
    Thread Starter thresholdjlt

    (@thresholdjlt)

    1 year, 2 months ago

    Thank you Saghir.

    This is very helpful.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Content Security Policy Configuration’ is closed to new replies.