# Content Security Policy (CSP)

# What is Content Security Policy (CSP)?

Content Security Policy (CSP) is a security standard that helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks by controlling the sources from which content (like scripts, stylesheets, images, fonts, etc.) can be loaded on your website. To learn more about CSP, visit https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP (opens new window).

Protects against hacking attempts - Prevents malicious code from running on your site
Improves security - Controls which external resources can be loaded
Prevents data theft - Blocks unauthorized access to your data
Compliance - Helps meet security standards and regulations

# How to Enable or Disable CSP

Note: CSP is disabled by default. You should only enable it after testing in report-only mode.

# Using Report-Only Mode (For Testing)

If you want to test CSP without blocking any content:

Enable CSP in report-only mode

$config['csp_enabled'] = TRUE;
$config['csp_report_only'] = TRUE;

Check for violations in your browser's developer console
When ready, switch to enforcement mode:
```
$config['csp_report_only'] = FALSE;
```

# Using the Configuration File (Recommended)

Locate the CSP configuration file
- Navigate to your NADA installation folder
- Go to application/config/
- Open the file csp.php

Enable CSP

$config['csp_enabled'] = TRUE;
$config['csp_report_only'] = FALSE;

Disable CSP
```
$config['csp_enabled'] = FALSE;
```
Save the file and refresh the web page.

# Adding External Resources to CSP

When you enable CSP, you may need to add external sources (like CDNs, APIs, or third-party services) to allow them to load properly.

# Common External Sources You Might Need

# JavaScript Libraries (script-src)

'script-src' => array(
    "'self'",                    // Your own website
    "https://cdn.jsdelivr.net",  // Bootstrap, jQuery, etc.
    "https://code.jquery.com",   // jQuery CDN
    "https://unpkg.com",         // Unpkg CDN
    "https://cdnjs.cloudflare.com", // Cloudflare CDN
    "https://maps.googleapis.com",   // Google Maps
    "https://api.example.com"    // Your API domain
),

# CSS and Stylesheets (style-src)

'style-src' => array(
    "'self'",                    // Your own website
    "https://cdn.jsdelivr.net",  // Bootstrap CSS
    "https://fonts.googleapis.com", // Google Fonts
    "https://cdnjs.cloudflare.com", // Cloudflare CDN
    "'unsafe-inline'"            // Inline styles (if needed)
),

# Images (img-src)

'img-src' => array(
    "'self'",                    // Your own website
    "data:",                     // Data URLs (base64 images)
    "https:",                    // HTTPS images
    "https://maps.googleapis.com", // Google Maps images
    "https://your-cdn.com"       // Your image CDN
),

# Fonts (font-src)

'font-src' => array(
    "'self'",                    // Your own website
    "https://fonts.gstatic.com", // Google Fonts
    "https://cdn.jsdelivr.net",  // Bootstrap fonts
    "https://cdnjs.cloudflare.com" // Cloudflare CDN
),

# AJAX/Fetch Requests (connect-src)

'connect-src' => array(
    "'self'",                    // Your own website
    "https://api.example.com",   // Your API
    "https://analytics.google.com", // Google Analytics
    "https://your-third-party-api.com" // Other APIs
),

# How to Add a New Source

Identify the blocked resource
- Check your browser's console for CSP violation messages
- Look for messages like: "Refused to load script from 'https://example.com (opens new window)'"
Find the correct directive
- Scripts → script-src
- Styles → style-src
- Images → img-src
- Fonts → font-src
- AJAX requests → connect-src

Add the source to the configuration

// Example: Adding a new script source
'script-src' => array(
    "'self'",
    "https://cdn.jsdelivr.net",
    "https://your-new-script.com"  // Add your new source here
),

Save the file and test
- Refresh your website
- Check the browser console for any remaining violations

# Troubleshooting External Resources

# Problem: External script not loading

Solution:

'script-src' => array(
    "'self'",
    "https://your-external-script.com"  // Add the domain here
),

# Problem: External CSS not loading

Solution:

'style-src' => array(
    "'self'",
    "https://your-external-css.com"  // Add the domain here
),

# Problem: Images from external domain not showing

Solution:

'img-src' => array(
    "'self'",
    "https://your-image-domain.com"  // Add the domain here
),

# Problem: AJAX requests to external API failing

Solution:

'connect-src' => array(
    "'self'",
    "https://your-api-domain.com"  // Add the domain here
),

# Security Best Practices

Only add trusted sources - Don't add domains you don't trust
Use HTTPS - Always use https:// instead of http://
Be specific - Add exact domains rather than wildcards
Test thoroughly - Always test after adding new sources
Monitor violations - Keep an eye on CSP violation reports

# Quick Reference for Common Additions

// Add Google Analytics
'connect-src' => array(
    "'self'",
    "https://www.google-analytics.com",
    "https://analytics.google.com"
),

// Add Google Maps
'script-src' => array(
    "'self'",
    "https://maps.googleapis.com"
),
'img-src' => array(
    "'self'",
    "https://maps.googleapis.com",
    "https://maps.gstatic.com"
),

# CSP Settings Explained

# Basic Settings

Setting	Description	Recommended Value
`csp_enabled`	Turns CSP on or off	`TRUE` for production
`csp_report_only`	Reports violations without blocking	`TRUE` for testing
`csp_development_mode`	Uses development-friendly settings	`TRUE` for development

# Development vs Production

For Development Environment:

$config['csp_enabled'] = TRUE;
$config['csp_report_only'] = TRUE;
$config['csp_development_mode'] = TRUE;

For Production Environment:

$config['csp_enabled'] = TRUE;
$config['csp_report_only'] = FALSE;
$config['csp_development_mode'] = FALSE;

Default Setting (Disabled):

$config['csp_enabled'] = FALSE;  // CSP is disabled by default

# Troubleshooting Common Issues

# Problem: Website looks broken after enabling CSP

Solution:

Check your browser's developer console for error messages
Temporarily enable report-only mode to see what's being blocked
Contact your system administrator to adjust the CSP policy

# Problem: External resources (images, scripts) not loading

Solution:

This is normal behavior - CSP is blocking untrusted sources
Your system administrator needs to add the trusted sources to the CSP policy
Contact your IT team to update the configuration

# Problem: Forms or AJAX requests not working

Solution:

CSP might be blocking form submissions to external domains
Your system administrator needs to update the form-action directive
Contact your technical team for assistance

# Checking if CSP is Working

# Method 1: Browser Developer Tools

Open your website in a web browser
Right-click and select "Inspect" or "Inspect Element"
Go to the Console tab
Look for CSP-related messages:
- ✅ No CSP violations = CSP is working correctly
- ❌ CSP violations = Contact your hosting provider or IT consultant

# Method 2: Network Tab

Open browser developer tools
Go to the Network tab
Refresh the page
Look for CSP headers in the response headers

← Clean URLs Upgrade from 5.2 to 5.4 →