Je NAS maakt het mogelijk om 24/7 een website te hosten met behulp van het wordpress pakket. Hier volgt een beschrijving van de stappen.

Installeren van WordPress

Ga naar het Package Center om WordPress te installeren. Je krijgt tijdens de installatie meldingen om PHP, Apache Server en Webstation te installeren. Deze pakketten heb je nodig en kun je dus bevestigen. Twee keer word je gevraagd om een gebruikersnaam en wachtwoord op te geven. Allereerst voor de PHP database (mariadb) waarin je een gebruikersnaam opgeeft met een wachtwoord. Voor de wordpress database geef je ook een gebruikersnaam en wachtwoord op. Deze hoeven niet gelijk te zijn aan de NAS gebruikersnaam.

Zodra de pakketten zijn geïnstalleerd, worden alle benodigde bestanden geüpload naar de webmap zonder dat je PHP-instellingen moet configureren. Je kunt de configuratiebestanden terugvinden in de nieuw aangemaakte gedeelde map web. De inhoudelijke bestanden worden niet in de map web opgeslagen maar in een database (maria-db) die achter de afgeschermde besturingsomgeving van de NAS zit. In deze omgeving kun je alleen komen als root. Hoe je hierin kunt komen, beschrijf ik in het bericht over inloggen op het besturingssysteem. Voor het hosten van je website heb je voor de juiste configuratie van je website toegang tot het besturingssysteem niet nodig overigens. Wel is het handig om toegang tot de maria-db te hebben via het pakket PHPmyadmin. Dit kun je dan ook beter meteen installeren.

Inloggen op wordpress

Om in te loggen ga je naar https://domeinnaam.nl/wordpress/wp-login. Dit is dezelfde gebruikersnaam die je tijdens het installatieproces hebt opgegeven bij de installatiestap wordpressdatabase-gebruiker en -wachtwoord. Voeg bij instellingen/algemeen de site adressen toe van de domeinnaam (WordPress-adres (URL) en Siteadres (URL)). Ervan uitgaande dat de site alleen in https oproepbaar moet zijn, geef het site adres op met https. Geef je email adres op waarmee je bereikbaar bent. Dit is belangrijk omdat je hiermee voor wordpress bereikbaar bent in het geval van geweigerde toegang. Dit laatste is me overkomen bij het inloggen op wordpress met de inlognaam ‘admin’. Deze had ik uit voorzorg al geblokkeerd maar door hier zelf als test gebruik van te maken, blokkeerde ik mijn eigen toegang. Niet handig.

Installeren van een certificaat

Om https op je domeinnaam mogelijk te maken, moet je een certificaat verkrijgen. Dit kan via het configuratiescherm onder tabblad beveiliging en menu-optie certificaat. Kies voor de optie om een certificaat te verkrijgen via let’s encrypt. Vladislav Denishev heeft een uitstekend leesbare handleiding en uitleg gepubliceerd over https en het waarborgen van betrouwbaarheid, integriteit en authenticatie van de https verbinding en domeinnaam.

Voeg in de DNS instellingen van je hosting provider een A record toe met de naam ‘@’ (dit betekent alles) en de waarde ‘IP-adres’. Dit is het IP adres waaronder je bereikbaar bent, te checken met whatismyipaddress.com. Als je weet wat je ipv6 adres is, voeg dit dan ook toe aan de DNS instellingen door middel van een AAAA record met de naam ‘@’ en de waarde ‘IP-adres’ volgens ipv6 formaat. Let’s encrypt checkt bij het toekennen van het certificaat of de domeinnaam overeenkomt met het IP adres waaronder de NAS de aanvraag doet. Het moet kloppen, anders accepteert let’s encrypt niet. Met het nieuwe certificaat kan de website worden opgezet. Overigens is dit certificaat ook nodig om de mailserver instellingen te valideren zodat je als een betrouwbare mailserver wordt gezien. Zie ook het bericht over Geen Gmail of Apple mail, maar je eigen MailPlus server. Nog iets over de DNS instellingen: het is niet nodig om een CAA record (voor Let’s encrypt) toe te voegen of een PTR record. Het laatste is alleen nodig voor een virtual private hosting service. Daar is hiervan geen sprake.

Https vereisten

WordPress slaat de website op onder web/wordpress. Dit is eigenlijk niet zo zijn omdat je als bezoeker van de site domeinnaam.nl/wordpress moet intikken. Dit kun je veranderen door het .htaccess bestand aan te passen. Tevens geef je hierin aan dat alleen over https een verbinding gemaakt kan worden en niet (meer) via http.

  • Open de map /web/wordpress en verplaats het .htaccess bestand naar de hoofdmap /web. Let op: dus niet het .htaccess bestand wijzigen onder /web/wordpress maar onder /web.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{HTTP_HOST} ^(www.)?domeinnaam.nl$
RewriteCond %{REQUEST_URI} !^/wordpress/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /wordpress/$1
RewriteCond %{HTTP_HOST} ^(www.)?domeinnaam.nl$
RewriteRule ^(/)?$ wordpress/index.php [L]
</IfModule>
  • Regels drie en vier geven aan dat de verbinding via https moet verlopen. De regels vijf en verder duiden aan waar de website te vinden is wanneer de bezoeker de website bezoekt onder de map /web.
  • Zodra je in filestation een wijziging aanbrengt in .htaccess bestand, verandert het  eigenaarschap. Je kunt het eigenaarschap en de machtigingen weer terugzetten naar de ‘http’ usergroup door naar eigenschappen te gaan van het bestand .htaccess in file station. Een juiste registratie van eigenaarschap en machtigingen zorgt er ook voor dat de firewall van wordpress (plugin wordfence) het bestand .htaccess kan benaderen en geen foutmeldingen gaat afgeven over aanpassingen aan het bestand.
  • Je kunt overigens wijzigingen ook aanbrengen door in te loggen op het besturingssysteem met behulp van SSH. Dan kun je wijzigingen aanbrengen in het bestand zonder dat de eigenaar verandert.
  • Als alternatief voor het verwijzen naar de map /web/wordpress kan een virtual host worden aangemaakt in het pakket Webstation. Dit is met de instelling van het .htaccess bestand onder de map /web dus niet meer nodig. Bijkomend voordeel is dat de https-verbinding sowieso via .htaccess moet worden ingesteld om een volledig veilige https-only website te realiseren.
  • Testen kan via hardenize en ssllabs.
Firewall

WordPress heeft diverse plugins voor het instellen van een firewall op je website. Het is absoluut noodzakelijk om een firewall in te stellen. Je kunt gebruik maken van de plugin Wordfence Security. Na installatie gaat Wordfence eerst in lerende modus. Na verloop gaat de firewall over naar beschermende modus.

Je kunt in Wordfence bijhouden wie inlogt en welke hacking poging gedaan worden om in te loggen. Je kunt het aantal pogingen om in te loggen met een verkeerd wachtwoord of gebruikersnaam beperken. Veel geprobeerde gebruikersnamen zoals admin kun je blokkeren. Het statische IP adres dat aan je domeinnaam is verbonden kun je op de witte lijst van toegestane IP adressen zetten die niet door de firewall gecontroleerd worden. Gebruik zowel het ipv4 als ipv6 adres. Hiervoor is de IP range nodig (CIDR) die je op IP address guide kunt opvragen.

Meta tag manager

Met de plugin meta tag manager kun je meta-karakteristieken beschrijven over de webpagina. Bij de algemene opties van deze plugin geef je aan op welk type pagina’s een specificatie van de meta tags kan worden opgegeven. Bijvoorbeeld op de pagina’s en berichten. Op het tablad custom mega tag kun je met het attribuut ‘meta name’ de google verificatie code opgeven. Deze code geldt voor de gehele website. De google verificatie code zelf geef je op in het veld ‘content’. Onderaan elk bericht of elke pagina geeft de meta tag manager de mogelijkheid om meta tags op te voeren. Bijvoorbeeld voor de auteur van de pagina of het bericht. Of om keywords op te voeren, gescheiden door komma’s.

Http headers en content security policy (CSP)

HTTP response headers bevatten de informatie van de server (van de website) hoe de browser de website moet lezen. Het gaat bijvoorbeeld over de wijze waarop de browser de inhoud in de cache kan opslaan, wat voor soort inhoud, welke software op de server draait, etc. Een belangrijk doel van de http response headers betreft de beveiliging van de website. Doordat de server het beveiligingsbeleid over de website aan de browser instrueert, wordt bepaald hoe de website mag worden gebruikt en waarvoor of hoe niet. Dit draagt sterk bij aan de veiligheid van de website. Met de plugins http headers of http headers to improve website security kun je regelen hoe de browser van de gebruiker de website moet lezen. In de volgende plaatjes staan enkele, voorgestelde instellingen, naar believen aan te passen. Mozilla biedt referentiemateriaal met achtergrondinformatie bij de attributen en de op te geven waarden. Ook Carl Conrad, de maker van de plugin, geeft nuttige info over de instellingen.

General opties

Feature opties

CSP opties

Gebruik van ‘unsafe-inline’, ‘strict-dynamic’ en ‘sha-256’

Aangezien wordpress met veel inline-scripts werkt en het niet makkelijk is om deze scripts aan te passen, is het oppassen met de instellingen bij de directives script-src en style-src. Na veel gepuzzel met de instellingen en lezen op de referentiesite van mozilla is het gelukt om een instelling te vinden zodanig dat:

  • ik niet zelf scripts hoef aan te passen
  • de veiligheid van de site niet gecompromitteerd wordt en
  • de site snel en bereikbaar is voor verschillende versies van browsers waaronder CSP versies 1, 2 en 3.

Hiertoe dien je gebruik te maken van de hash waarden van de inline-scripts in combinatie met de het opgeven van de waarden ‘strict-dynamic’ en ‘unsafe-inline’ bij het directive script-src. Voor de hashwaarde maak je gebruik van het SHA-256 protocol. Dit is een berekening waarmee ondubbelzinnig de omvang en inhoud van een bestand (maakt niet uit wat) vastgesteld wordt. Bijvoorbeeld bij het overzetten van bestanden wordt de hash-berekening vergeleken met de opgegeven waarde. Komen deze overeen dan weet de computer dat de bestanden gelijk zijn. Om een voor content security policy doeleinden relevante hash te berekenen, kun je gebruik maken van de informatie in de browser zelf. Eerst stel je de waarden ‘strict-dynamic’ en ‘unsafe-inline’ in onder script-src. Vervolgens open je de foutenconsole in google chrome (F12 knop) en kun je aan de hand van de foutmeldingen nagaan wat de vereiste SHA-256 waarde moet zijn. De hash-waarde is ook te berekenen door het script in te lezen in een berekeningsalgoritme die vervolgens de hash-waarde berekent. Let goed op dat witte regels en spaties juist zijn overgenomen.

De waarde van de hash geef je vervolgens op in het script-src directive. Zie ook de  voorbeeldinstelling op securityheaders.com van de site adagia.eu. De hash-waarden zijn verkregen door eerst de instellingen op te zetten zonder de hash-waarden (deze ken je nog niet), vervolgens voeg je de hash-waarden toe en herkent de browser aan de in de header opgegeven hash-waarden dat deze overeenkomen met de hash-waarden van het in te lezen script of stijl. Klopt dit, dan wordt het script verwerkt.

Een andere wijze om de security headers te implementeren is niet via een plugin, maar door direct in het .htaccess bestand (in directory web/wordpress) de wijzigingen op te nemen. Dit is handig wanneer plugins met elkaar interfereren. De ene plugin overschrijft dan de andere plugin. Zie onderstaand voorbeeld van een instellingen die A+ oplevert in securityheaders.com.

# BEGIN HttpHeaders
<IfModule mod_headers.c>
Header always set X-Content-Type-Options "nosniff"
<FilesMatch "\.(php|html)$">
Header set X-Frame-Options "SAMEORIGIN"
Header set X-XSS-Protection "1; mode=block"
Header set X-DNS-Prefetch-Control "on"
Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
Header set Content-Security-Policy "default-src 'self'; script-src 'unsafe-inline' 'strict-dynamic' 'sha256-Fd3KIk7oxIDGIaF4SFhcL3MwpqgulXv93amUMOM6ll0=''sha256-BxK7anlUKWxiOJjrJ7woobrdhfU+AqfpuNYWzovCj2U=' 'sha256-qVS7mYBEFC+yO2W3gGGSmBxS9sB4h+oBxYOrsMbniQU=' 'sha256-kj0H0KTRUtfaPU+qg6OqreMHz/F5au1Qtp6tx2WGVNI=' 'sha256-HldxyrN+1DCrYBRCz/+OONW7zhiB2PpEfnXNkZdFS6w='; style-src 'unsafe-inline' 'strict-dynamic' 'sha256-OyKg6OHgnmapAcgq002yGA58wB21FOR7EcTwPWSs54E=' 'sha256-ndEajaOtgGUX3F0/EAq31SglCWS8kB1BVRbo5AZ/1/c=' 'sha256-3CotmZsU7tVPRXqpzeifmbi9CLJ93ed5BGbG/+jANv8=' 'sha256-ZdHxw9eWtnxUb3mk6tBS+gIiVUPE3pGM470keHPDFlE=' 'sha256-r1ROXfrQZX0cDSEx7Pt5ap9QYUasLvg2yqWTF9ayh9o=' 'sha256-9mGay9Cm983Z+khkt7pT86af63Uo9BdwBXL1zFw0H64=' 'sha256-52278yqAE8omBp324CDVlRpvq0qgToVS4DKb3t0tMO4=' 'sha256-u37e/HBtDfrwumbeq1RRCfVlJdZoCELyPvIBP2SpmFM=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-kqN+Gs27kkpHb8PKXGksKYvZo7yvK662TO1kWs5vWXU=' 'sha256-v1+ObPRFGLFi4wAuDMOffdR4vwtliR/Vd5W2FNA5IHo=' 'sha256-8Kfku9YVzf/o8y0HqcvXCCLTHemSAvBc3LQXlGHRCkA=' 'sha256-Zbm6dxAG0pyTDoBT3r2aLtnwsj1F6fCy42XhOCGiz/8=' 'sha256-1x+LasWQqUoWn0OIslV63MWehr1Ih9a3O/fdivLQpls=' 'sha256-qnKRjm8hkgBQ/OsB2Jp4Dz6C2u1GFeUsEQ3PNj1frrE=' 'sha256-RSrPGU7Oh8Fia3ldE0MOQ4Yj5DQ/oKRvWClvEZdYnFE='; report-uri https://adagia.report-uri.com/r/d/csp/enforce; frame-ancestors 'self'; object-src 'none'; base-uri 'none'; report-to https://adagia.report-uri.com/r/d/csp/enforce; block-all-mixed-content; upgrade-insecure-requests"
Header set Referrer-Policy "strict-origin"
Header set Expect-CT 'max-age=604800, enforce, report-uri="https://adagia.report-uri.com/r/d/ct/enforce"'
Header set Feature-Policy "camera 'none'; geolocation 'none'; microphone 'none'; payment 'none'"
</FilesMatch>
</IfModule>
# END HttpHeaders

Voor de duidelijkheid: elke browser heeft een ontwikkelaarsconsole (functieknop F12) die de foutmeldingen aanduidt bij het weergeven van de pagina. Zie het voorbeeld hieronder. Op regel 250 is een foutmelding bij het lezen van een inline script. Dit komt doordat in het content security policy is opgegeven dat inline scripts zonder een hash waarde niet uitgevoerd mogen worden. Veilig dus maar wel vervelend. Om het script toch te laten uitvoeren, moet de sha256 hash waarde worden bepaald.

Het filmpje laat zien hoe je het inline script kunt vinden en hoe je de hash waarde kunt bepalen op de site van report-uri. Je zult echter ook zien dat niet van alle blokkeringen de sha256 hash waarde in de console weergegeven wordt. Dan zul je de waarde moeten bepalen door het bestand zelf te openen. De bestanden zijn te vinden bij de webhosting provider of natuurlijk door in te loggen op het gebruikersysteem van de NAS via SSH. Zoek naar de css bestanden, open deze, kopieer de gegevens en voer deze in op de site van report-uri. Je kunt de betreffende bestanden ook vinden via de thema-editor onder menu weergave/thema’s.

Afronding CSP

Zoals je ziet, vergt het enkele pogingen om te komen tot de definitieve seurity content policy instellingen. Zo kun je frame-ancestors op ‘none’ zetten maar dan kun je in wordpress niet de customizer functie goed gebruiken: je ziet dan niet hoe de instellinge de weergave direct op het scherm beïnvloeden. Zet je frame-ancestors op ‘self’, dan laat het scherm wel direct zien hoe de webpagina eruit komt te zien.

Met de rapportage functie van Report URI kun je rapporten laten opmaken over de effectiviteit van de security content policy of de Expect-CT header. Je moet hiervoor een account aanmaken en vervolgens configureer je het account op basis van je rapportage instellingen in de headers. Zo test je of de website door de instellingen van de policies blokkades opwerpt voor bezoekers.

Je kunt de beveiliging van je site controleren op Scan je site nu. Doel is natuurlijk om een A+ label te verkrijgen! Wil je de effectiviteit van de content security options verder doorlichten, dan kan dit op CSP Evaluator of Mozilla Observatory.

Van de gangbare browsers is Mozilla Firefox het lastigst met het opsporen en adresseren van de foutmeldingen. Sommige foutmeldingen verwijzen niet naar een regel in de geladen html code maar naar een bestand dat niet benaderd kan worden. Zoals op deze site bijvoorbeeld het bestand onloadwff.js, een bestand dat te maken heeft met de lastpass extensie. Via de csp headers is deze melding niet op te lossen; wel door de extensie uit te schakelen.

Plugins van wordpress

WordPress plugins geven meer functionaliteit aan de installatie van je website. Het is te vergelijken met apps voor je telefoon. Wanneer je een plugin installeert, dan voeg je een stukje functionaliteit toe aan jouw website. Er zijn verschillende plugins. Een hebben we al genoemd, wordfence als firewall van je website. Zo heb je plugins voor social media knoppen, voor statistieken, om spam tegen te gaan, om je website sneller te maken of je website veiliger te maken zoals http headers. Volgende plugins gebruik ik op mijn website Adagia.

  • Smart password pages: neem de code [smartpwpages] op in de hoofdpagina (bv de verwijzingspagina) en maak een nieuwe pagina (kind-pagina) die onder deze hoofdpagina valt. Dit kun je in de instellingen aan de rechterkant van de pagina instellen).
  • Contact Form 7: het contact email adres waarin de reacties van het ingevulde formulier worden opgevangen, is gelijk aan het adres dat is ingesteld in de algemene instellingen van het menu. Je kunt ervoor kiezen om gebruik te maken van recaptcha van Google. Dan toont de site een recaptcha symbool aan de rechteronderzijde van de pagina. Wil je liever niet Google gebruiken, dan kun je ook van de akismet antispam plugin gebuirken.
  • Akismet Antispam. Een standaard plugin die erop toeziet dat spam reacties op formulieren weggefilterd worden. Je kunt de controle op de naam en afzender al laten checken voordat het formulier geaccepteerd wordt. Zo ben je er vroegtijdig bij. Geef bijvoorbeeld voor een eenvoudig formulier het volgende op:
<label> Je naam (verplicht)
[text* your-name akismet:author] </label>

<label> Je e-mailadres (verplicht)
[email* your-email akismet:author_email] </label>

<label> Onderwerp
[text your-subject akismet:subject] </label>

<label> Je bericht
[textarea your-message] </label>

[submit "Verzenden"]
  • All 404 redirect to homepage. Hiermee kun je alle opgegeven links zonder achterliggende webpagina op je domeinnaam afvangen en terugleiden naar bijvoorbeeld je homepage.
  • Embed Plus voor YouTube. Praktisch om individuele youtube filmpjes met schermafbeelding in te voegen.
  • GDPR (AVG) Cookie Compliance: Hiermee kun je een cookie melding tonen met mogelijkheid om de bezoeker naar het privacybeleid te verwijzen. De plugin biedt de mogelijkheid om bepaalde cookies aan of uit te zetten.
  • Yoast SEO plugin: Een plugin die helpt om de site beter vindbaar te maken voor zoekmachines. Met behulp van de snippet kun je een samenvatting geven van de kernboodschap van de pagina. Yoast helpt ook om de leesbaarheid te verbeteren. Tot slot kun je met Yoast een sitemap index (xml) aanmaken van je website die je kunt uploaden naar Google Console of Bing Webmaster.
  • Autoptimize plugin(*): veel bestanden, zoals css en javascript bestanden staan op verschillende plekken in het html script. Autoptimize vergroot de snelheid in het weergeven van de site door de code op de juiste plek in te passen (hoofd van de pagina of juist inline  plaatsen of het laden ervan uitstellen). Dit geldt ook voor afbeeldingen en javascript bestanden. Je kunt ook niet-kritische wordpress emoji tekst weghalen en bepaalde font-bestanden vooraf in laden. Het verbetert de prestaties enorm. Zie ook deze test mogelijkheden van Pagespeed Insights.
  • UpdraftPlus – Backup/Restore: Met UpdraftPlus kun je een back-up van je site laten maken. Meerdere backups naar de cloud zijn mogelijk. Mocht je site vastlopen, dan kun je eenvoudig met deze plugin herstellen.
  • Wordfence: je wilt je site niet zonder firewall laten opereren. Elke dag vinden talloze inlogpogingen plaats om toegang te krijgen tot de server en deze voor andere doeleinden in te zetten. Wordfence bevat een firewall en een malware scanner die geïntegreerd binnen wordpress ervoor zorgen dat de nieuwste bedreigingen, malware signatures en kwaardaardige IP adressen geblokkeerd worden. Mag dus niet ontbreken.
  • WP Optimize(*): WP-Optimize is een performance plugin die de database opschoont, afbeeldingen comprimeert en caching op de site instelt (dit kun je ook zelf doen, zie hieronder). Samen met Autoptimize geeft deze plugin aanzienlijke prestatie- en comfortverbetering aan de bezoekers van de site. 
  • Cache Enabler: Naast de cache instellingen voor de browser (expiry headers en cache control headers in .htaccess bestand), is het voor de snelheid van de website bevorderlijk om page caching in te stellen. Deze plugin doet alleen dat (en dus niets anders). Zet alle vinkjes aan bij het cache gedrag, bij cache uitsluitingen voer je de pagina ID op die je niet wilt cachen. Bijvoorbeeld de actuele weerswaarnemingen (post ID kun je vinden in de url van de betreffende pagina wanneer je deze pagina bewerkt).
  • JSON Content Importer: wanneer je data uit een JSON bestand moet converteren naar toonbare data. Bijvoorbeeld bij het laden van actuele waarnemingsdata uit de API van weathercloud (zie ook actuele waarnemingen).

Een alternatief voor de plugins WP Optimize en Autoptimize is Hummingbird plugin: deze laat toe dat ik zelf de cache en compressie (gzip) instel, via .htaccess configuratiebestand. Het overige zware werk (css en js optimalisatie) laat ik aan de plugin over.

(*) Inmiddels zijn de betreffende plugins niet meer actief. Het levert teveel fouten op bij het laden van de pagina’s in combinatie met een hoog veiligheidsniveau door middel van security headers. Ergens moet je een afweging maken tussen veiligheid en prestaties.

Ipv6 bereikbaarheid

In de DNS instellingen van de webhoster heb je al een AAAA record aangemaakt die verwijst naar het ipv6 adres van de NAS. Dat wil nog niet zeggen dat daarmee je site ook bereikbaar is voro bezoekers die via ipv6 protocol op internet zoeken. Hardenize en Internet.nl geven scores aan de veiligheid en bereikbaarheid van sites, zowel onder ipv4 als ipv6 standaard. Verbeter de bereikbaarheid van de site ook naar de toekomst toe en zorg ervoor dat je bereikbaar bent voor beide protocollen.

Configureer ipv6 in het modem/router (in mijn geval de Fritzbox router) waarmee je toegang tot internet hebt. Gebruik je twee routers, zet dan de tweede router (in mijn geval de Netgear router) op ‘automatisch doorvoeren’ van de ipv6 adressen die de eerste router aan de aangesloten apparaten toekent, dus ook voor die apparaten die met de tweede router verbonden zijn. Voor Fritzbox gelden de volgende instellingen:

  • schakel ipv6 support in.
  • stel in dat automatisch en globaal adres onderhandeld wordt (‘Automatically negotiate a global address’).
  • geef bij de instellingen aan onder home network –> network settings aan –> ipv6 addresses: ‘use native ipv6 connection; assign unique local addresses’.
  • De FRITZ!Box verzorgt de standaard internet verbinding met een hoge prioriteit. Daarmee zijn de ipv6 adressen bepaald door de Fritzbox router.
  • Schakel de optie uit: ‘Allow IPv6 prefixes announced by other IPv6 routers in the home network’.
  • Schakel de optie in: ‘Also announce DNSv6 server via router advertisement’.
  • Schakel de DHCPv6 server in bij de menu optie: FRITZ!Box for the home network; ‘Assign DNS server, prefix (IA_PD) and IPv6 address (IA_NA)’.
  • Stuur de ipv6 poorten voor http (80), https (443) en mail (25) door naar het ipv6 adres van de NAS zelf. Dit is essentieel. Ook al staan de ipv4 poorten open; je moet een separate poort doorleiding maken voor ipv6. Anders is je site niet bereikbaar voor ipv6.

Test op hardenize.com en nl.internet.nl. En pas zonodig de instellingen aan. Bekijk hier de testrapporten van hardenize en internet.nl voor Adagia.

Cache instellen

Om de laadsnelheid van terugkerende bezoekers te verbeteren, kun je browser caching instellen. De server geeft dan aan de client-browser aan dat de pagina tijdelijk in het geheugen van de browser kan worden opgeslagen. Daarmee wordt de server niet (opnieuw) belast met verzoeken om data op te halen. De data zijn niet veranderd, dus waarom zou je deze dan opnieuw opvragen? Hierdoor checkt en downloadt de browser in de tussentijd de gecachte bestanden niet meer, waardoor nog maar een klein deel van je website hoeft te worden ingeladen.

Makkelijker en sneller is het om deze uit het geheugen van de client-computer te halen via de browser. Met de Pagespeed tool van Google of de test tool van Gmetrix kun je de snelheid van je site testen. Je zult zien dat caching een hogere laadprestatie toont. Er zijn vele plugins in WordPress die caching van plaatjes, videos, pagina’s e.d. optimaliseren. Maar niet altijd werken deze plugins. Daarom kun je het ook zelf instellen via het eerder genoemde .htaccess bestand.

Er zijn vele voorbeelden op internet om caching in te stellen. Je kunt het beste via de moderne cache headers, Cache-Control headers, de instellingen voor het tijdelijk opslaan van bestanden configureren. De Expires-headers is een ouderwetser alternatief. Voeg de code aan het .htaccess bestand (onder web/wordpress) alsook aan het httpd.conf bestand (onder /usr/local/etc/apache22/conf/httpd22.conf).

# BROWSER CACHING USING CACHE-CONTROL HEADERS
<ifModule mod_headers.c>
# One year for image, audio and video files
<filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|mp3|mpeg|wav|png|svg|swf|webp)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

# One month for JavaScript, fonts and PDF files
<filesMatch ".(js|pdf|otf|ttf|woff|woff2)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

# One week for CSS files
<filesMatch ".(css)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>

<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=3600, private, must-revalidate"
</filesMatch>
</ifModule>

Tenslotte is een test op webpagetest.org inzichtelijk in die zin dat het goed weergeeft hoe je je website kunt verbeteren. 

Compressie via gzip

Na het instellen van de cache kan je website worden gemaakt door de resources die nodig zijn te comprimeren. Het protocol hiertoe is gzip compressie. Webservers en browsers zijn hierop ingericht. Het betekent dat bestanden als een zip-bestand, maar dan in het format gzip, gecomprimeerd worden, voordat deze aan de browser toegestuurd worden. Zie ook dit plaatje met dank aan kinsta.com.

Dat betekent minder data-overdracht en dus een snellere weergave op het scherm van de browser.  GZIP is gebaseerd op het DEFLATE algoritme. Deze term heb je nodig om in het .htaccess configuratiebestand de instellingen aan te passen. Voeg in het bestand onderaand de volgende code toe.

# BEGIN Gzip compression
<IfModule mod_filter.c>
        <IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
                AddType application/vnd.ms-fontobject .eot
                AddType font/ttf .ttf
                AddType font/otf .otf
                AddType font/x-woff .woff
                AddType image/svg+xml .svg

                AddOutputFilterByType DEFLATE application/javascript
                AddOutputFilterByType DEFLATE application/rss+xml
                AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
                AddOutputFilterByType DEFLATE application/x-font
                AddOutputFilterByType DEFLATE application/x-font-opentype
                AddOutputFilterByType DEFLATE application/x-font-otf
                AddOutputFilterByType DEFLATE application/x-font-truetype
                AddOutputFilterByType DEFLATE application/x-font-ttf
                AddOutputFilterByType DEFLATE application/x-font-woff
                AddOutputFilterByType DEFLATE application/x-javascript
                AddOutputFilterByType DEFLATE application/xhtml+xml
                AddOutputFilterByType DEFLATE application/xml
                AddOutputFilterByType DEFLATE font/opentype
                AddOutputFilterByType DEFLATE font/otf
                AddOutputFilterByType DEFLATE font/ttf
                AddOutputFilterByType DEFLATE font/woff
                AddOutputFilterByType DEFLATE font/woff2
                AddOutputFilterByType DEFLATE image/svg+xml
                AddOutputFilterByType DEFLATE image/x-icon
                AddOutputFilterByType DEFLATE text/css
                AddOutputFilterByType DEFLATE text/html
                AddOutputFilterByType DEFLATE text/javascript
                AddOutputFilterByType DEFLATE text/plain
                AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
                BrowserMatch ^Mozilla/4 gzip-only-text/html
                BrowserMatch ^Mozilla/4\.0[678] no-gzip
                BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
                Header append Vary: User-Agent
        </IfModule>
</IfModule>
# END Gzip compression

Na opslaan van het .htaccess bestand, laad je de pagina van je website opnieuw en controleer je in de console of de header content: gzip weergegeven wordt. Zie ook volgende figuur.

Naast het verzenden van bestanden via gzip-encoding, kun je de snelheid van laden vergroten door ervoor te zorgen dat afbeeldingen in een efficiënt format zijn opgeslagen. Niet in jpg, png of gif format, maar in het moderne webp format: dit biedt superieure ‘lossless’ compressie voor afbeeldingen op webpagina’s. Met gebruik van webp, kun je kleinere en rijkere afbeeldingen maken waardoor de snelheid van je website verbetert. Webp afbeeldingen zijn circa 26% kleiner in omvang in vergelijking met het png formaat (dit format wordt gebruikt voor het weergeven van de grafieken in de maandoverzichten). En circa 25-35% kleiner dan jpg afbeeldingen. Het webp format wordt ondersteund in diverse browsers zoals Google Chrome, Firefox, Edge, Opera en Brave. De media bibliotheek van wordpress ondersteunt helaas niet webp format, maar met een aanpassing van het functions.php bestand, kun je dit wel mogelijk maken. Zie hiervoor de uitleg op mariushosting.com.

PhP versie

Nog een laatste ding: Synology installeert niet de laatste pakketversie van apache en php, de pakketten die nodig zijn om de webserver voor wordpress te laten draaien. PHP (PHP: Hypertext Preprocessor) is een scripttaal, die bedoeld is om op webservers dynamische webpagina’s te creëren. Wil je de laatste php versie gebruiken, bijvoorbeeld php7.3 in plaats van php7.2, dan moet je een aanpassing doen in het besturingssysteem met behulp van SSH toegang. Dit doet Synology niet vanzelf, of heel traag. Verander dan in het bestand wordpress.conf de term ‘php72’ door ‘php73’. Het bestand is te vinden onder /usr/local/etc/apache22/sites-enabled/wordpress.conf.

FastCgiExternalServer /php-fpm-wordpress-handler -socket /run/php-fpm/php73-fpm.sock -idle-timeout 3600
ScriptAlias /php-fpm-wordpress-handler.fcgi /php-fpm-wordpress-handler

<Directory "/var/services/web/wordpress">
<IfModule fastcgi_module>
AddHandler php-fastcgi .php .php3 .php4 .php5 .php7 .phtml
Action php-fastcgi /php-fpm-wordpress-handler.fcgi
</IfModule>
</Directory>

Om de instellingen van kracht te laten zijn, kun je de webserver opnieuw opstarten. Deze is apache 2.2 of 2.4 (afhankelijk van de versie die webstation package gebruikt). Het commando voor een herstart kun je via SSH ingeven: synoservice –restart pkgctl-Apache2.2. Helaas staat het wordpress pakket niet toe om gebruik te maken van apache 2.4 versie en moet je het dus nog helaas met de apache 2.2. versie doen. Synology is niet snel met het updaten van de wordpress versie. De huidige door Synology via de Package Center beschikbaar gestelde wordpress versie (januari 2021) is versie 5.3. Je kunt ervoor kiezen om een latere versie te installeren. Dit kun je handmatig doen via de package site van synology. Download de laatste *.spk versie en installeer deze handmatig in het Package Center menu.

Let wel op bij het aanbrengen van wijzigingen in de plugins of thema’s. Je kunt snel fouten maken die veroorzaakt worden door een wijziging in het .htaccess bestand. Hierin staat de verwijzing naar de map waarin de wordpress databases, tabellen, plugins, thema’s en dergelijke te vinden zijn.

Zorg ervoor dat je een backup van het .htaccess bestand regelmatig maakt. Deze wordt namelijk niet meegenomen in de backup van UpdraftPlus. 

Preloading

Niet alleen door het implementeren van een cache beleid maak je de site sneller. Ook door het vooraf inladen van grote bestanden. Dit kunnen stijl (css), javascript (js), font of media bestanden zijn. Het laden van de font kan al snel 200kB in beslag nemen. De site heeft deze font sowieso nodig. Je kunt dit instellen in de html code van het thema. Deze is te vinden in het bestand headers.php onder web/wordpress/wp-content/themes/hestia/header.php. Kopieer het bestand eerst naar je lokale omgeving voordat je wijzigingen aanbrengt. Vervolgens voeg je de onderstaande regel toe. De font is die van deze site: deze aanpassen al naar gelang benodigd is. Dit kun je vaststellen via de pagespeed tool van Google Insight. Maak voor de zekerheid een backup van het headers.php bestand voordat je het aangepaste bestand vanuit je lokale omgeving uploadt naar de website. Als je de aanpassingen in het header.php bestand niet terugziet in de console van firefox of chrome, dan maakt de browser nog gebruik van de cache. Pas dan in dit geval tijdelijk de cache instellingen in het ‘.htacces’ configuratiebestand aan naar bijvoorbeeld 5 sec voor font en html bestanden. Dan worden de wijzigingen alsnog doorgevoerd in de browser.

<link rel="preload" href="/assets/font-awesome/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>

Subresource integrity

Deze website adagia.eu maakt ook gebruik van stijlbestanden die de website vooraf laadt:

 <link rel="stylesheet" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C500%2C700%7CRoboto+Slab%3A400%2C700&amp;display=swap" crossorigin="anonymous">

Aan de link kun je zien dat er gebruik wordt gemaakt van een content delivery network (CDN). De lettertypen worden geladen via google. Een CD wordt voornamelijk ingezet voor stijlbestanden (css), javascript (js) en lettertype/font bestanden. Lekker snel en praktisch omdat je de bestanden niet zelf hoeft op te slaan, bij te houden, aan te passen, etc. En natuurlijk spaart het bandbreedte uit: je maakt je website sneller hierdoor. Het heeft wel als nadeel dat je de CDN provider vertrouwt bij het laden van de inhoud. Mogelijk kan er toch met de inhoud geknoeid zijn: een zeer laag risico want het gaat om een gerenommeerde provider en miljoenen sites maken er gebruik van. Maar toch. Subresource Integrity (SRI) maakt het mogelijk om de integriteit van het CSS of JS bestand te controleren. Stel dat de CDN site gecompromitteerd is, dan zou een aanvaller de inhoud van het bestand kunnen aanpassen en miljoenen sites kunnen besmetten met een XSS aanval.

Met SRI wordt de sha256 hash waarde van het bestand gekoppeld aan het uit te voeren script. Als de browser vaststelt dat de opgegeven waarde niet overeenkomt met de waarde van het via de CDN ontvangen bestand, dan blokkeert de browser de uitvoering van het bestand. Hoe doe je dit? In de link tag voer je een integrity variabele op met de sha256 hash waarde van het bestand: zie ook de aangepaste link hieronder.

<link rel="stylesheet" id="ao_optimized_gfonts" href="https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C500%2C700%7CRoboto+Slab%3A400%2C700&subset=latin%2Clatin-ext&ver=3.0.8" integrity="sha256-oq9GY76............JnqII/TeDUvGbjT8=" crossorigin="anonymous">

Subresource Integrity is dus een veilige manier om te borgen dat de juiste bestanden ingeladen worden! Een check op de sha256 waarde kun je het beste opvragen via de developer console in de browser. Wanneer niet de bij het bestand behorende sha256 waarde is opgegeven, geeft de console de juiste waarde aan. Er zit wel een addertje onder het gras: Google maakt gebruik van user agent sniffing. Dat betekent dat afhankelijk van de (browser) client die het (css) bestand opvraagt, een ander css bestand wordt teruggestuurd. Met andere woorden, één sha256 waarde volstaat niet.


0 reacties

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.