CSP headers via functions.php
In het bericht over beveiliging van de website hebben we het gehad over het toevoegen van content security policy (CSP) headers via het htaccess bestand. Er is ook een andere manier om headers toe te voegen. Dit kan door wijzigingen aan te brengen in het functions.php bestand. Dit kun je vinden onder de thema map van de wordpress installatie (wordpress/wp-content/themes). Maar waarom zou je dat doen als het ook werkt via htaccess? Dat is een goede vraag.
Ik heb jarenlang het CSP beleid voor deze site toegevoegd via htaccess. Daarin kun je sha256 hash waarden opnemen en eigenlijk is dit niet veel werk. De scripts veranderen nauwelijks waardoor de hash waarden hooguit eens per jaar wijzigen. Als je toch regelmatig aan je site werkt, is dit geen enkel probleem. Vaak heb ik me afgevraagd hoe ik de toepassing van scripts kan toestaan via een nonce waarde.
Nonce-waarden
Scott Helme publiceert regelmatig over beveiliging van internet en is een groot voorstander van de toepassing van een strikt CSP beleid. Beveilig de toegang tot de website door alleen die scripts toe te staan die aantoonbaar ongewijzigd van de server van de site door de browser worden opgehaald. Een nonce is de samenvoeging van het woord ‘Number Only Used Once’ en dat is ook precies wat het is. Een nonce is namelijk een willekeurig getal dat wordt gebruikt in cryptografische algoritmen (bron: beursgids.nl). Een belangrijke voor het gebruik van een nonce is om het onmogelijk te maken een stuk informatie tweemaal te gebruiken.
In het bericht over CSP nonces beschrijft Helme wat een nonce is en hoe je een nonce waarde door de server kunt laten genereren. Deze noncewaarde wordt vervolgens aan de tag van het script toegevoegd. Bij het lezen van de script controleert de browser of dezelfde nonce-waarde in de CSP header onder de source directory script-src aanwezig is. Indien dat zo is, dan staat de browser het lezen van het script toe. Indien niet, dan wordt het script geblokkeerd en verschijnt een foutmelding in de console. De webpagina wordt dan niet goed weergegeven.
PHP code voor het genereren van een nonce waarde
Een eenvoudige manier om een nonce te genereren en deze toe te voegen aan de script tag, kan met de onderstaande code. Voeg deze toe aan het einde van het functions.php bestand.
// GENEREER EEN NONCE WAARDE EN DEFINIEER DEZE WAARDE
add_action( 'run_custom_nonce_value', 'custom_nonce_value' );
function custom_nonce_value () {
$created_nonce = wp_create_nonce();
define( 'NONCE_RANDVALUE', $created_nonce );
}
// VOEG NONCE TOE AAN DE SCRIPT TAG
add_filter( 'script_loader_tag', 'add_nonce_to_script', 10, 3 );
function add_nonce_to_script( $tag, $handle, $source ) {
custom_nonce_value();
$val_nonce = NONCE_RANDVALUE;
$search = "<script";
$replace = "<script type='text/javascript' nonce='".$val_nonce."'";
$subject = $tag;
$output = str_replace($search, $replace, $subject);
return $output;
}
Nu de nonce waarde gegenereerd is, is de volgende stap om deze toe te voegen aan de header met de informatie over het CSP beleid.
// VOEG NONCE WAARDEN TOE AAN CSP EN VOEG CSP HEADERS IN
function CSP_headers($CSP) {
custom_nonce_value();
$val_nonce = NONCE_RANDVALUE;
$CSP['Content-Security-Policy'] = "....; script-src 'self' https://umami.adagia.eu https://hcaptcha.com https://*.hcaptcha.com 'nonce-" . $val_nonce . "' ....";
return $CSP;
}
add_filter( 'wp_headers', 'CSP_headers' );
In de bron-weergave van de webpagina kun je vaststellen dat een nonce waarde is gegenereerd en toegevoegd aan de script tag.
De headers van de webpagina laten ook zien dat de CSP headers de nonce waarde bevatten. Open de webontwikkelaarsconsole in de browser en ga naar het tabje netwerk. Selecteer de (bovenste) regel met de hoofdlink van de webpagina en blader naar de CSP informatie. Hieronder heb ik deze opgenomen voor de CSP header van adagia.eu.
Overige http header toevoegen via functions.php
Naast de CSP header kun je zo ook andere security http headers toevoegen. Op deze site had ik eerst de configuratie van de http headers ingesteld in het .htaccess configuratiebestand. Nu verloopt dit via functions.php. Zie ook onderstaand voorbeeld. De syntaxis is net iets anders.
// VOEG OVERIGE HEADERS TOE
header("Strict-Transport-Security: max-age=63072000; includeSubDomains; preload");
header("Permissions-Policy: camera=(),clipboard-read=(),clipboard-write=(),geolocation=(),interest-cohort=(),microphone=(),publickey-credentials-get=(),sync-xhr=(self)");
header("Cross-Origin-Embedder-Policy: 'require-corp'");
header("Cross-Origin-Opener-Policy: 'same-origin'");
header("X-Permitted-Cross-Domain-Policies: 'none'");
header("X-Content-Type-Options: nosniff");
header("X-Frame-Options: SAMEORIGIN");
header("X-XSS-Protection: 0");
header("X-DNS-Prefetch-Control: on");
header("Referrer-Policy: strict-origin");