O Content-Security-Policy (optioneel)

UNDER CONSTRUCTION

 

Dit onderdeel zou gereed moeten zijn, maar er zit nog ergens een bug waardoor onze JavaScript worden geblokkeerd en de pagina opmaak er niet uitziet.

Uiteraard zijn er bonuspunten te verdienen als jij het probleem oplost!

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";

/webroot/index.php

 

csp.php

<?php
header("Content-Security-Policy: base-uri 'self';"
    . "connect-src 'self';"
    . "default-src 'self';"
    . "form-action 'self';"
    . "media-src 'self';"
    . "object-src 'none';"
    . "script-src 'self' 'nonce-" . getNonce() . "' 'unsafe-eval';" // cdn.jsdelivr.net cdn.tailwindcss.com
    . "style-src 'self' 'nonce-" . getNonce() . "';" //cdn.jsdelivr.net cdn.tailwindcss.com
    . "img-src 'self' data:;"
    . "font-src 'self';"
    . "frame-ancestors 'none';"
);

/app/src/csp.php

 

parts/header.view.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><?= $title??config('app.name') ?></title>
    <script src="/scripts/tailwind.min.js" nonce="<?= getNonce(); ?>"></script>
    <script defer src="/scripts/alpine.min.js" nonce="<?= getNonce(); ?>"></script>
    <script src="/scripts/axios.min.js" nonce="<?= getNonce(); ?>"></script>
    <link rel="stylesheet" href="/styles/default.css" nonce="<?= getNonce(); ?>">
</head>
<body>

Het framework bevat een functie getNonce() die style en javascript kan ondertekenen.

/app/views/parts/header.view.php

 

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

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

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

<style nonce="<?= 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