Content Security Policy: Sicherheit durch Einschränkung

CSP ist eine der wirksamsten Schutzmaßnahmen gegen XSS. Sie definieren, welche Ressourcen Ihre Website laden darf – alles andere wird blockiert.

Was ist CSP?

Content Security Policy ist ein HTTP-Header, der dem Browser mitteilt, aus welchen Quellen Skripte, Styles, Bilder etc. geladen werden dürfen.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

Grundlegende Direktiven

Quellen-Werte

Beispiel-Policies

Restriktiv (empfohlen)

Content-Security-Policy:
  default-src 'self';
  script-src 'self';
  style-src 'self';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';

Mit CDN und Analytics

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net https://www.google-analytics.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' data: https://www.google-analytics.com;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://www.google-analytics.com;

Mit Nonce für Inline-Scripts

<?php
$nonce = base64_encode(random_bytes(16));
header("Content-Security-Policy: script-src 'self' 'nonce-$nonce'");
?>

<!-- Erlaubt (mit Nonce) -->
<script nonce="<?= $nonce ?>">
  console.log('Erlaubt!');
</script>

<!-- Blockiert (ohne Nonce) -->
<script>
  console.log('Blockiert!');
</script>

CSP in Nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; frame-ancestors 'none';" always;

CSP in Apache

Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; frame-ancestors 'none';"

Report-Only Modus (Testen)

Testen Sie CSP ohne zu blockieren:

Content-Security-Policy-Report-Only:
  default-src 'self';
  report-uri /csp-report;
  report-to csp-endpoint;

Report-Endpoint

<?php
// /csp-report Endpoint
$data = file_get_contents('php://input');
$report = json_decode($data, true);
error_log('CSP Violation: ' . json_encode($report));

Weitere Security Headers

# Komplettes Security-Header-Set
Content-Security-Policy: default-src 'self'; frame-ancestors 'none'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()

Nginx komplett

add_header Content-Security-Policy "default-src 'self';" always;
add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;

Häufige Probleme

Inline Events ersetzen

<!-- ❌ Blockiert durch CSP -->
<button onclick="doSomething()">Klick</button>

<!-- ✅ Funktioniert mit CSP -->
<button id="myButton">Klick</button>
<script>
  document.getElementById('myButton').addEventListener('click', doSomething);
</script>

Weitere Informationen

• 🔓 XSS verhindern
• 🔒 HTTPS erzwingen
• 🛡️ Server absichern