Basic CSP Protection

🛡️ CSP Active: Basic Content Security Policy is protecting this page!
✅ Same-origin scripts only | ✅ Inline styles allowed | ❌ External scripts blocked | ❌ Inline scripts blocked

🔍 Current CSP Configuration

Content-Security-Policy: 
    default-src 'self';           // Only same-origin resources by default
    script-src 'self';            // Only same-origin scripts  
    style-src 'self' 'unsafe-inline';  // Same-origin + inline styles
    img-src 'self' data: https:;  // Same-origin + data URLs + HTTPS images
    font-src 'self' https:;       // Same-origin + HTTPS fonts
    connect-src 'self';           // Same-origin connections only
            

🎯 What This Policy Does:

✅ Allows: Scripts from same origin (/js/script.js)
✅ Allows: Inline CSS styles (style="...")
✅ Allows: HTTPS images from any domain
❌ Blocks: Inline JavaScript (<script>...</script>)
❌ Blocks: External scripts (https://evil.com/script.js)
❌ Blocks: eval() function execution
❌ Blocks: Inline event handlers (onclick="...")

🧪 CSP Protection Tests

Try these attacks and see how CSP blocks them:

Test 1: Inline Script Injection (Will Be Blocked)

Test 2: External Script Loading (Will Be Blocked)

Test 3: eval() Function (Will Be Blocked)

Test 4: Inline Event Handler (Will Be Blocked)

✅ What CSP Still Allows

1. Same-Origin Scripts

Scripts loaded from the same domain work fine:

<!-- This works -->
<script src="/js/app.js"></script>
<script src="script.js"></script>
            

2. Inline CSS Styles

This blue text uses inline styles (allowed by our CSP)

<!-- This works -->
<p style="color: blue;">Styled text</p>
            

3. External Images (HTTPS)

<!-- This works -->
<img src="https://trusted-cdn.com/image.jpg">
            

4. Form Submissions to Same Origin

📊 CSP Violation Monitoring

CSP violations are logged in the browser console. Check DevTools to see blocked attempts!

CSP violation log will appear here...

🔄 Compare with No-CSP Page

See the difference between protected and unprotected pages:

Open Vulnerable Page (No CSP) View Strict CSP Example

🛠️ How to Implement Basic CSP

Method 1: HTTP Header (Recommended)

# Apache (.htaccess)
Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"

# Nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'";

# Express.js
app.use((req, res, next) => {
    res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'");
    next();
});
            

Method 2: Meta Tag (Limited)

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
            

🎯 Gradual Implementation Strategy:

Start with Report-Only mode to test without breaking
Use basic policy like this example
Monitor violations and adjust as needed
Gradually tighten by removing 'unsafe-inline'
Use nonces/hashes for maximum security

🛡️ Basic CSP Protection Enabled