Menu Uno designsysteem 5.3.4

Content Security Policy

Om te voldoen aan bepaalde CSP (Content Security Policy) eisen moeten er een aantal instellingen geconfigureerd worden binnen je project.

Content Security Policy

CSP is ontwikkeld door het World Wide Web Consortium (W3C), de internationale standaardenorganisatie voor het web. CSP is een nieuwe standaard die webdevelopers in staat stelt om beperkingen te definiëren op het gedrag van de website of ‑applicatie. Bijvoorbeeld: vanaf welke externe locaties worden scripts, stylesheets of images ingeladen? Mag de browser de site in een frame van een andere site inladen?

Regels

Om te voldoen aan de gestelde CSP-richtlijnen moet je minimaal voldoen aan de volgende CSP-header: Content-Security-Policy: script-src 'self' . Op het moment dat je deze header inschakeld worden alleen nog scripts ingeladen die vertrouwd (lokaal) zijn. Op het moment dat je gebruik maakt van Uno versie 5.1.26 of kleiner zullen javascript modules niet meer werken. Om te voldoen aan de CSP-richtlijnen en om ervoor te zorgen dat je modules weer werken is een upgrade naar Uno versie 5.3.0 of hoger noodzakelijk.

Testen

Om te testen of je applicatie voldoet aan de CSP-richtlijnen kan je door middel van een Chrome-extensie de CSP response headers aanpassen. Hiermee zie je gelijk of het toepassen van stricte CSP-regels problemen veroorzaakt binnen je applicatie.

Configureren

Uno maakt bij het inladen van Javascript modules gebruik van SystemJS. Vanaf Uno versie 5.3.0 of hoger voldoet Uno aan de door DUO gestelde CSP-eisen. Op het moment dat je modules inlaad van Javascript componenten binnen Uno is het noodzakelijk om het volgende scripts binnen je HTML pagina toe te passen:

<script src="/node_modules/uno/dist/vendor/js/s.min.js"></script>
<script src="/node_modules/uno/dist/vendor/js/system.resolve-hook.min.js"></script>

Maak je gebruik van Uno binnen een Angular project? Dan werkt de configuratie net even anders. Om de modules binnen je Angular project te integreren configureer je de modules binnen de angular.json, hieronder staat een voorbeeld.


 "scripts": [
    "node_modules/uno/dist/vendor/js/s.min.js",
    "node_modules/uno/dist/vendor/js/system.resolve-hook.min.js"
] 

Naast het inladen van de bovenstaande modules is het ook noodzakelijk om de scripts die de modules inladen in een aparte JS-file te zetten. Deze file kan je door middel van een script tag inladen zodat je voldoet aan de CSP-eisen. Voor meer informatie zie de configuratie pagina.