JavaScript Security

Content Security Policy (CSP)

Control which resources can be loaded and executed

Find videos you like?

Save to resource drawer for future reference!

What is Content Security Policy?

CSP is an HTTP security header that restricts which resources (scripts, styles, images, etc.) can be loaded on your web page. It's a powerful defense against XSS attacks, data injection, and clickjacking.

XSS Prevention

Blocks inline scripts and unsafe eval()

Whitelisting

Only approved sources can load resources

Reporting

Get notified of policy violations

Common CSP Directives

Control different resource types

default-src

Fallback for all resource types

default-src 'self';

script-src

Controls JavaScript sources

script-src 'self' cdn.example.com;

style-src

Controls CSS stylesheets

style-src 'self' 'unsafe-inline';

img-src

Controls image sources

img-src 'self' data: https:;

connect-src

Controls AJAX, WebSocket, fetch

connect-src 'self' api.example.com;

frame-ancestors

Prevents clickjacking

frame-ancestors 'none';

Example 1: Basic CSP Header

Setting up content security policy

// Node.js/Express - Set CSP header
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; " +
    "script-src 'self' https://cdn.jsdelivr.net; " +
    "style-src 'self' 'unsafe-inline'; " +
    "img-src 'self' data: https:; " +
    "font-src 'self' https://fonts.gstatic.com; " +
    "connect-src 'self' https://api.example.com; " +
    "frame-ancestors 'none'; " +
    "base-uri 'self'; " +
    "form-action 'self'"
  );
  next();
});

// Or use helmet.js middleware
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://cdn.jsdelivr.net"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
    connectSrc: ["'self'", "https://api.example.com"],
    fontSrc: ["'self'", "https://fonts.gstatic.com"],
    objectSrc: ["'none'"],
    mediaSrc: ["'self'"],
    frameSrc: ["'none'"],
  }
}));

CSP Source Keywords

Special values for resource sources

'self'

Resources from same origin (same protocol, domain, port)

'none'

Block all sources (nothing allowed)

'unsafe-inline'

⚠️ Allows inline scripts/styles (defeats purpose of CSP, avoid if possible)

'unsafe-eval'

⚠️ Allows eval() and similar functions (dangerous, avoid)

'nonce-{random}'

✅ Allow specific inline scripts with matching nonce attribute

'sha256-{hash}'

✅ Allow specific inline script by its hash

Example 2: Using Nonces for Inline Scripts

✅ Secure way to allow specific inline scripts

// Backend: Generate nonce per request
const crypto = require('crypto');

app.use((req, res, next) => {
  // Generate random nonce
  res.locals.cspNonce = crypto.randomBytes(16).toString('base64');
  
  // Set CSP with nonce
  res.setHeader(
    'Content-Security-Policy',
    `default-src 'self'; script-src 'self' 'nonce-${res.locals.cspNonce}'`
  );
  
  next();
});

// HTML template: Use nonce attribute
<script nonce="<%= cspNonce %>">
  // This inline script is allowed!
  console.log('Script with valid nonce');
</script>

<script>
  // This will be BLOCKED (no nonce)
  console.log('Blocked!');
</script>

// React/Next.js example
export default function Page() {
  const nonce = headers().get('x-nonce'); // Get from headers
  
  return (
    <html>
      <head>
        <script nonce={nonce}>
          {/* Inline script allowed with nonce */}
        </script>
      </head>
    </html>
  );
}

Example 3: CSP Report-Only Mode

Test CSP without blocking resources

// Use Content-Security-Policy-Report-Only for testing
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy-Report-Only',
    "default-src 'self'; " +
    "script-src 'self'; " +
    "report-uri /csp-violation-report"  // Where to send violations
  );
  next();
});

// Endpoint to receive violation reports
app.post('/csp-violation-report', express.json({ type: 'application/csp-report' }), (req, res) => {
  const violation = req.body;
  
  console.log('CSP Violation:', {
    blockedURI: violation['blocked-uri'],
    violatedDirective: violation['violated-directive'],
    documentURI: violation['document-uri'],
    lineNumber: violation['line-number'],
    sourceFile: violation['source-file']
  });
  
  // Log to monitoring service
  // logger.warn('CSP violation detected', violation);
  
  res.status(204).end();
});

// Modern alternative: report-to directive
res.setHeader('Report-To', JSON.stringify({
  group: "csp-endpoint",
  max_age: 10886400,
  endpoints: [{ url: "https://example.com/csp-reports" }]
}));

res.setHeader(
  'Content-Security-Policy',
  "default-src 'self'; report-to csp-endpoint"
);

CSP Best Practices

Implementing CSP effectively

✅ Do

• Start with Report-Only mode
• Use nonces or hashes for inline scripts
• Set default-src as fallback
• Use 'self' as primary source
• Whitelist specific CDN domains
• Set frame-ancestors to prevent clickjacking
• Monitor violation reports
• Test thoroughly before enforcing

❌ Don't

• Use 'unsafe-inline' for scripts
• Use 'unsafe-eval' unless absolutely necessary
• Allow * (wildcard) for script sources
• Deploy CSP without testing
• Ignore violation reports
• Make CSP too permissive
• Forget about browser compatibility
• Mix HTTP and HTTPS sources

Key Takeaways

🛡️

Defense in Depth

CSP is a powerful XSS defense layer
Complements input validation

🔑

Use Nonces

Prefer nonces over 'unsafe-inline'
Secure way to allow inline scripts

📊

Monitor Violations

Use Report-Only to test
Track CSP violations

🎯

Whitelist Sources

Only allow trusted domains
Avoid wildcards for scripts

Essential Security Header

CSP significantly reduces XSS attack surface. Start with Report-Only mode, gradually tighten policy, and always monitor violations!

Previous Topic

CSRF Protection

Cross-site request forgery prevention.

Next Topic

Input Sanitization

Cleaning user input to prevent attacks.

Ask a Question

Have a question about Content Security Policy? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Security

Content Security Policy (CSP)

Control which resources can be loaded and executed

Find videos you like?

Save to resource drawer for future reference!

What is Content Security Policy?

XSS Prevention

Blocks inline scripts and unsafe eval()

Whitelisting

Only approved sources can load resources

Reporting

Get notified of policy violations

Common CSP Directives

Control different resource types

default-src

Fallback for all resource types

default-src 'self';

script-src

Controls JavaScript sources

script-src 'self' cdn.example.com;

style-src

Controls CSS stylesheets

style-src 'self' 'unsafe-inline';

img-src

Controls image sources

img-src 'self' data: https:;

connect-src

Controls AJAX, WebSocket, fetch

connect-src 'self' api.example.com;

frame-ancestors

Prevents clickjacking

frame-ancestors 'none';

Example 1: Basic CSP Header

Setting up content security policy

// Node.js/Express - Set CSP header
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; " +
    "script-src 'self' https://cdn.jsdelivr.net; " +
    "style-src 'self' 'unsafe-inline'; " +
    "img-src 'self' data: https:; " +
    "font-src 'self' https://fonts.gstatic.com; " +
    "connect-src 'self' https://api.example.com; " +
    "frame-ancestors 'none'; " +
    "base-uri 'self'; " +
    "form-action 'self'"
  );
  next();
});

// Or use helmet.js middleware
const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://cdn.jsdelivr.net"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
    connectSrc: ["'self'", "https://api.example.com"],
    fontSrc: ["'self'", "https://fonts.gstatic.com"],
    objectSrc: ["'none'"],
    mediaSrc: ["'self'"],
    frameSrc: ["'none'"],
  }
}));

CSP Source Keywords

Special values for resource sources

'self'

Resources from same origin (same protocol, domain, port)

'none'

Block all sources (nothing allowed)

'unsafe-inline'

⚠️ Allows inline scripts/styles (defeats purpose of CSP, avoid if possible)

'unsafe-eval'

⚠️ Allows eval() and similar functions (dangerous, avoid)

'nonce-{random}'

✅ Allow specific inline scripts with matching nonce attribute

'sha256-{hash}'

✅ Allow specific inline script by its hash

Example 2: Using Nonces for Inline Scripts

✅ Secure way to allow specific inline scripts

// Backend: Generate nonce per request
const crypto = require('crypto');

app.use((req, res, next) => {
  // Generate random nonce
  res.locals.cspNonce = crypto.randomBytes(16).toString('base64');
  
  // Set CSP with nonce
  res.setHeader(
    'Content-Security-Policy',
    `default-src 'self'; script-src 'self' 'nonce-${res.locals.cspNonce}'`
  );
  
  next();
});

// HTML template: Use nonce attribute
<script nonce="<%= cspNonce %>">
  // This inline script is allowed!
  console.log('Script with valid nonce');
</script>

<script>
  // This will be BLOCKED (no nonce)
  console.log('Blocked!');
</script>

// React/Next.js example
export default function Page() {
  const nonce = headers().get('x-nonce'); // Get from headers
  
  return (
    <html>
      <head>
        <script nonce={nonce}>
          {/* Inline script allowed with nonce */}
        </script>
      </head>
    </html>
  );
}

Example 3: CSP Report-Only Mode

Test CSP without blocking resources

// Use Content-Security-Policy-Report-Only for testing
app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy-Report-Only',
    "default-src 'self'; " +
    "script-src 'self'; " +
    "report-uri /csp-violation-report"  // Where to send violations
  );
  next();
});

// Endpoint to receive violation reports
app.post('/csp-violation-report', express.json({ type: 'application/csp-report' }), (req, res) => {
  const violation = req.body;
  
  console.log('CSP Violation:', {
    blockedURI: violation['blocked-uri'],
    violatedDirective: violation['violated-directive'],
    documentURI: violation['document-uri'],
    lineNumber: violation['line-number'],
    sourceFile: violation['source-file']
  });
  
  // Log to monitoring service
  // logger.warn('CSP violation detected', violation);
  
  res.status(204).end();
});

// Modern alternative: report-to directive
res.setHeader('Report-To', JSON.stringify({
  group: "csp-endpoint",
  max_age: 10886400,
  endpoints: [{ url: "https://example.com/csp-reports" }]
}));

res.setHeader(
  'Content-Security-Policy',
  "default-src 'self'; report-to csp-endpoint"
);

CSP Best Practices

Implementing CSP effectively

✅ Do

• Start with Report-Only mode
• Use nonces or hashes for inline scripts
• Set default-src as fallback
• Use 'self' as primary source
• Whitelist specific CDN domains
• Set frame-ancestors to prevent clickjacking
• Monitor violation reports
• Test thoroughly before enforcing

❌ Don't

• Use 'unsafe-inline' for scripts
• Use 'unsafe-eval' unless absolutely necessary
• Allow * (wildcard) for script sources
• Deploy CSP without testing
• Ignore violation reports
• Make CSP too permissive
• Forget about browser compatibility
• Mix HTTP and HTTPS sources

Key Takeaways

🛡️

Defense in Depth

CSP is a powerful XSS defense layer
Complements input validation

🔑

Use Nonces

Prefer nonces over 'unsafe-inline'
Secure way to allow inline scripts

📊

Monitor Violations

Use Report-Only to test
Track CSP violations

🎯

Whitelist Sources

Only allow trusted domains
Avoid wildcards for scripts

Essential Security Header

CSP significantly reduces XSS attack surface. Start with Report-Only mode, gradually tighten policy, and always monitor violations!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

CSRF Protection

Input Sanitization

JavaScript Code Editor

Building Your Learning Module...

Content Security Policy (CSP)

What is Content Security Policy?

XSS Prevention

Whitelisting

Reporting

default-src

script-src

style-src

img-src

connect-src

frame-ancestors

'self'

'none'

'unsafe-inline'

'unsafe-eval'

'nonce-{random}'

'sha256-{hash}'

✅ Do

❌ Don't

Key Takeaways

Defense in Depth

Use Nonces

Monitor Violations

Whitelist Sources

Essential Security Header

CSRF Protection

Input Sanitization

JavaScript Code Editor

Content Security Policy (CSP)

What is Content Security Policy?

XSS Prevention

Whitelisting

Reporting

default-src

script-src

style-src

img-src

connect-src

frame-ancestors

'self'

'none'

'unsafe-inline'

'unsafe-eval'

'nonce-{random}'

'sha256-{hash}'

✅ Do

❌ Don't

Key Takeaways

Defense in Depth

Use Nonces

Monitor Violations

Whitelist Sources

Essential Security Header