Frontend Intermediate 12 views

Content Security Policy Violation

The browser blocked a resource because it violated the Content Security Policy.

Explanation

Content Security Policy (CSP) violation occurs when the browser blocks a resource (script, style, image, font, etc.) because it doesn't comply with the Content-Security-Policy header or meta tag. CSP is a security layer that prevents XSS attacks by restricting which resources can be loaded. Common violations include loading scripts from unauthorized domains, inline scripts (when not allowed), eval(), loading images from external sources, and using web fonts from CDN without authorization.

Common Causes

Loading scripts from unauthorized domains
Inline scripts without nonce/hash
Using eval() or Function()
Loading images/fonts from external CDN
Third-party scripts loading unauthorized resources

Solution

Review the CSP error in the browser console to identify which resource was blocked. Update the CSP header to allow the specific domains and resource types needed. Use nonces or hashes for inline scripts instead of allowing all inline. For development, use Content-Security-Policy-Report-Only to test without blocking. Check for third-party scripts that might load resources from unexpected domains. Use CDN configuration to serve resources from your domain. Consider using the report-uri directive to monitor violations.

Code Example

// CSP header that blocks resources
Content-Security-Policy: default-src 'self'; script-src 'self';

// This inline script is blocked
<script>
    console.log('blocked!'); // inline not allowed!
</script>

// Fix: use nonce
<script nonce="random123">
    console.log('allowed!');
</script>

// Laravel CSP middleware
// Add to response headers:
$policy = [
    "default-src 'self'",
    "script-src 'self' 'nonce-{$nonce}' https://cdn.example.com",
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "font-src 'self' https://fonts.gstatic.com",
];
header('Content-Security-Policy: ' . implode('; ', $policy));

// Development: report-only mode
header('Content-Security-Policy-Report-Only: ...');

// Allow inline in Next.js next.config.js
module.exports = {
    headers: async () => [{
        source: '/:path*',
        headers: [{
            key: 'Content-Security-Policy',
            value: "script-src 'self' 'unsafe-eval' 'unsafe-inline'"
        }]
    }]
};

Error Information

Language

javascript

Difficulty

Intermediate

Views

Related Errors

Frontend

Content Security Policy Violation

Explanation

Common Causes

Solution

Code Example

Error Information

Related Errors

CORS Error

Invalid CSS Property

React Key Warning

Port Already in Use