Technisch1 februari 20265 min

content-security-policy: CSP Headers Uitgelegd 2026: Comp...

Leer alles over Content-Security-Policy (CSP) headers in 2026. Bescherm je Next.js app tegen XSS aanvallen met onze stap-voor-stap guide.

ShadowGuard Team

Security Engineers

Bijgewerkt: 18 feb 2026

⚡ TL;DR (3 Key Takeaways)

Belangrijk: content-security-policy is essentieel voor je security
Belangrijk: security headers is essentieel voor je security
App Router vereist aangepaste security headers

Shadow Guard Security Team • 8+ jaar ervaring in web security • Laatst geüpdatet: 18 februari 2026

⏱️ 10 min leestijd

Content-Security-Policy (CSP) is een van de krachtigste beveiligingsmechanismen voor je website. Het vertelt de browser precies welke bronnen wel en niet geladen mogen worden. Maar het is ook een van de meest verwarrende headers om correct in te stellen. In dit artikel leggen we CSP helder uit, zodat je het met vertrouwen kunt implementeren.

Wat is Content-Security-Policy?

CSP is een HTTP-header die je server meestuurt met elke pagina. Het werkt als een whitelist: je vertelt de browser precies welke bronnen (scripts, stylesheets, afbeeldingen, fonts, etc.) geladen mogen worden en vanaf welke domeinen.

Alles wat niet op de whitelist staat, wordt geblokkeerd. Dit is je belangrijkste verdediging tegen Cross-Site Scripting (XSS) aanvallen, waarbij aanvallers kwaadaardig JavaScript in je pagina proberen te injecteren.

Hoe werkt CSP in de praktijk?

Een CSP-header bestaat uit een reeks directives. Elke directive bepaalt het beleid voor een specifiek type bron:

HTTP

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;

Laten we dit ontleden:

default-src 'self' - Standaard mogen alleen bronnen van je eigen domein geladen worden
script-src 'self' https://cdn.example.com - Scripts mogen alleen van je eigen domein en cdn.example.com komen
style-src 'self' 'unsafe-inline' - Stylesheets van je eigen domein, plus inline styles zijn toegestaan
img-src 'self' data: https: - Afbeeldingen van je eigen domein, data-URLs en elke HTTPS-bron

Wat betekent 'unsafe-inline'?

'unsafe-inline' staat toe dat inline code (zoals <script>alert('hi')</script> of style="color: red") wordt uitgevoerd. Het woord "unsafe" zit er niet voor niets in: het verzwakt je CSP aanzienlijk.

Waarom is het gevaarlijk? Als een aanvaller HTML kan injecteren in je pagina (via een formulier, URL of database), kan die ook inline scripts toevoegen. Met 'unsafe-inline' worden die scripts gewoon uitgevoerd.

Hoe vermijd je het? Gebruik in plaats van inline scripts en styles aparte bestanden. Als dat niet mogelijk is (bijvoorbeeld bij CSS-in-JS frameworks), gebruik dan een nonce of hash:

HTML

// Met een nonce (eenmalig token per request)
Content-Security-Policy: script-src 'nonce-abc123def456'

// In je HTML
<script nonce="abc123def456">
  // Dit script wordt uitgevoerd
</script>

<script>
  // Dit script wordt GEBLOKKEERD (geen nonce)
</script>

Wat betekent 'unsafe-eval'?

'unsafe-eval' staat toe dat JavaScript-functies als eval(), new Function() en setTimeout('string') worden gebruikt. Deze functies voeren een tekst-string uit als code, wat een groot beveiligingsrisico is.

Waarom is het gevaarlijk? Als een aanvaller controle heeft over een string die aan eval() wordt meegegeven, kan die willekeurige code uitvoeren in de browser van je bezoekers.

Veel voorkomend probleem: Sommige JavaScript-libraries en frameworks vereisen 'unsafe-eval'. Check altijd of er een recentere versie is die dit niet meer nodig heeft, of zoek een alternatieve library.

CSP instellen in Next.js

Als je met Next.js werkt (wat veel Lovable, V0 en Cursor-projecten gebruiken), kun je CSP instellen via next.config.js of middleware:

Methode 1: Via next.config.js (statisch)

JavaScript

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              "default-src 'self'",
              "script-src 'self'",
              "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'",
            ].join('; '),
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Methode 2: Via middleware (dynamisch, met nonce)

TypeScript

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const cspHeader = [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https:",
    "font-src 'self'",
    "connect-src 'self'",
    "frame-ancestors 'none'",
  ].join('; ');

  const response = NextResponse.next();
  response.headers.set('Content-Security-Policy', cspHeader);
  response.headers.set('x-nonce', nonce);
  return response;
}

CSP instellen via Vercel of Netlify

Als je je site host op Vercel of Netlify, kun je headers ook via configuratiebestanden instellen:

JSON

// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self';"
        }
      ]
    }
  ]
}

// netlify.toml
[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self';"

content-security-policy: CSP Headers Uitgelegd 2026: Comp...

Wat betekent 'unsafe-eval'?

CSP instellen in Next.js

Methode 1: Via next.config.js (statisch)

Methode 2: Via middleware (dynamisch, met nonce)

CSP instellen via Vercel of Netlify

Veelgemaakte fouten bij CSP

Waarom CSP essentieel is tegen XSS

Controleer jouw CSP met Shadow Guard

Veelgestelde Vragen (FAQ)

Hoe vaak moet ik security scans draaien?

Is AI-gegenereerde code veiliger?

Meer artikelen

AI security 2026: Kimi 2.5 & OpenAI Swarm Security 2026:...

AI security 2026: GLM-5 & MiniMax 2.5 Security 2026: Chin...

AI security 2026: GPT 5.3 Codex Security 2026: Agentic Co...

Klaar om je site te beveiligen?