# Content-Security-Policy (optioneel)

### Problemen

Omdat we van tailwind een CDN gebruiken is dit lastig te implementeren. Gebruik je geen tailwind dan is deze toevoeging wel een aanrader

Content Security Policy (CSP) maakt de applicatie voor eindgebruikers veiliger. Er kunnen dan geen onbekende javascript injecties plaatsvinden in de applicatie.

Om dit te laten werken moeten een aantal stappen worden genomen.

Voeg aan je index.php een require toe en de volgende header tag toe. Doe nadat de functions.php is ingeladen.

    require "../src/csp.php";

### csp.php

    header("Content-Security-Policy: base-uri 'self';" .
        "connect-src 'self';" .
        "default-src 'self';" .
        "form-action 'self';" .
        "img-src 'self' tailwindui.com ;" .
        "media-src 'self';" .
        "object-src 'none';" .
        "script-src cdn.jsdelivr.net cdn.tailwindcss.com unpkg.com 'nonce-" . getNonce() . "' 'unsafe-eval';" .
        "style-src cdn.jsdelivr.net cdn.tailwindcss.com 'self' 'nonce-" . getNonce() . "'"
    );

Aan functions.php voeg je de functie getNonce() toe

    //wordt gebruikt voor Content Security Policy
    function getNonce(): string
    {
        if (!isset($_SESSION['nonce'])) {
            $bytes = random_bytes(20);
            $_SESSION['nonce'] = bin2hex($bytes);
        }
        return $_SESSION['nonce'];
    }

Aan alle javascripts en css bestanden die je toevoegd bij je project moet je toevoegen

    <script nonce="<?php echo getNonce(); ?>">
        // je script code
    </script>

Indien je op een speficieke pagina een stukje CSS wilt toevoegen kan dat alsvolgt

    <style nonce="<?php echo getNonce(); ?>">
        /* je script code */
    </style>

Inline styles/scripts worden default geblokkeerd. Kijk regelmatig even bij `developer tools -> console` hier kan je zien dat bepaalde code wordt geblokkeerd. Wanneer je dit toch wilt toestaan kan dit door het aanpassen van de CSP header in csp.php