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 de volgende header tag toe. Doe nadat de functions.php is ingeladen.
require "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