HTTP Security Headers: Versterk de beveiliging van je Joomla website

<div class="atitle" style="font-size:200% !important">HTTP Security Headers</div>
<div class="atitle2">Versterk de beveiliging van je website 
<img height="300" style="border:0;background:transparent;margin-right:20px;
 box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);" data-src="images/25-joomla-http-security-headers/strong-boy.png"> 
by Peter Martin / <a href="https://db8.nl" target="_blank">db8.nl</a>
 
slides: <a href="https://petermartin.nl" target="_blank">https://petermartin.nl</a>
<style>.atitle{text-shadow: 2px 2px 2px #000;background:#111111;}
.atitle2{text-shadow: 2px 2px 2px #000;;background:#111111;}
</style>
<div style="margin: 0 auto;">
<a href="https://db8.nl" title="Joomla Specialist db8 Nijmegen" target="_blank">
 <img height="50" style="border:0;background:transparent;margin-right:20px;
 box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);" data-src="images/db8-logo.svg">
</a>
</div>
</div>

---

<div class="title">
Overzicht 
<ul style="font-size: 60%"> 
<li>HTTP-beveiligingsheaders</li>
<li>De headers</li> 
<li>Demo: configureren!</li>
<li>Vragen</li> 
</ul> </div>

---

<div class="title">HTTP Security Headers</div>

----

## HTTP Header

<ul> 
<li>Metadata = Communicatie tussen server en client<ul> 
<li class="fragment">HTTP-status - HTTP-versie, statuscode (200 succes, 404 niet gevonden)</li>
<li class="fragment">Algemene headers - datum, cache-control</li> 
<li class="fragment">Verzoek headers - User-Agent, Cookie</li> 
<li class="fragment">Respons headers - Server, Content-Type</li> 
<li class="fragment">Entiteit headers - Content-Encoding, Content-Language, Last-Modified</li> 
<li class="fragment">Beveiligingsheaders - [in deze presentatie]</li> 
<li class="fragment">Custom headers - password: Open sesame</li> </ul>
</li> </ul>

----

### Hoe bekijk je HTTP-headers

<div class="box" style="float:left;width:1200px;font-size:smaller;text-align:left;"> 
<div class="box" style="float:left;width:400px;font-size:smaller;text-align:left;"> Gebruik Google Chrome > 
Inspect > Network > klik op “HTML-pagina” > 
Headers </div>
<div class="box fragment" style="float:left;width:800px;font-size:smaller;text-align:left;">
<img style="border:0px;width:450px" src="images/25-joomla-http-security-headers/response-headers.png">
</div>
</div>

----

## HTTP Security Headers

<ul> <li>Communiceren wat een browser mag verwachten van de website</li> 
<li class="fragment">= extra beveiliging</li> 
<li class="fragment">instellingen wijzigen? Denk aan cache!!!</li> 
<li class="fragment">meer info: <a href="https://the-best-website.com/en/is-also/for-administrators/security/http-security-headers" target="_blank">the-best-website.com</a></li> 
<li class="fragment">controleren: <a href="https://securityheaders.com" target="_blank">securityheaders.com</a></li> 
<li class="fragment">controleren: <a href="https://observatory.mozilla.org/" target="_blank">observatory.mozilla.org</a></li> </ul>

----

### HTTP Security Headers (HSH) - Waar instellen?

- Server configuration
- .htaccess
- PHP
- HTML (alleen CSP)
- Joomla core plugin

----

### HSH - Server configuratie

in Nginx
```txt
add_header X-Content-Security-Level "topsecret" always;
```

----

### HSH - .htaccess

```txt
Header set X-Content-Security-Level "topsecret"
```

----

### HSH - PHP

```php
header('X-Content-Security-Level: topsecret');
```

### HSH - HTML

Alleen CSP...
```html
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://example.com">
```

----

### HSH - Joomla core plugin

<div class="box" style="float:left;width:1900px;font-size:smaller;text-align:left;">
<div class="box" style="float:left;width:400px;font-size:smaller;text-align:left;">
System > Plugins > System - HTTP Headers
</div>
<div class="box fragment" style="float:left;width:1410px;font-size:smaller;text-align:left;">
<img style="border:0px;width:450px" src="images/25-joomla-http-security-headers/system-http-headers.png">
</div>
<div class="box" style="float:left;width:400px;font-size:smaller;text-align:left;">
Google Chrome: <a href="https://chromewebstore.google.com/detail/content-security-policy-c/ahlnecfloencbkpfnpljbojmjkfgnmdc?hl=nl&pli=1" target="_blank">Content Security Policy (CSP) Generator</a>
</div>

</div>

---

<div class="title">De Headers</div>

----

### De HTTP Security Headers

<ul>
 <li>X-Content-Type-Options</li>
 <li>X-Frame-Options</li>
 <li>Referrer-Policy</li>
 <li>Cross-Origin-Opener-Policy</li>
 <li>Permissions-Policy</li>
 <li>Strict-Transport-Security</li>
 <li>Content-Security-Policy</li>
 <li>Cross-Origin Resource Sharing (CORS)</li>
</ul>

---

<div class="title">X-Content-Type-Options</div>

----

### X-Content-Type-Options - Probleem

<ul style="font-size:100%"> 
<li>Een bezoeker op je mooie website</li> 
<li class="fragment">uploadt een example.png-bestand</li> 
<li class="fragment">dat JavaScript bevat</li> 
<li class="fragment">bezoeker 2 opent de pagina met example.png</li>
<li class="fragment">de browser laadt dat example.png</li> 
<li class="fragment">ziet het bestand als JavaScript en voert het uit</li> 
</ul>

----

### X-Content-Type-Options - Oplossing

<ul style="font-size:100%"> 
<li>Schakel inhoudsbepaling via MIME uit</li> 
<li class="fragment">"X-Content-Type-Options: nosniff"</li> 
<li class="fragment">Instellen via: <ul> <li>Serverconfiguratie</li> 
<li>.htaccess</li> 
<li>web.config</li>
</ul></li> 
</ul>

---

<div class="title">X-Frame-Options</div>

----

## X-Frame-Options - Probleem

<ul style="font-size:100%"> 
<li>Je mooie website</li> 
<li class="fragment">wordt geladen op een andere website in een iframe</li> 
<li class="fragment">met een onzichtbare laag erbovenop</li> 
<li class="fragment">bezoeker probeert op een knop van de originele website te klikken...</li> 
</ul>

----

## X-Frame-Options - Probleem

<ul style="font-size:100%">
<li>Clickjacking</li>
<li class="fragment">Kwaadaardige website toont transparent iframe 
 over een legitieme webpagina</li> 
<li class="fragment">tricking de gebruiker om 
clicking on elements 
 van de verborgen pagina</li> </ul>

----

## X-Frame-Options - Oplossing

<ul style="font-size:100%"> 
<li>Sta niet toe dat je website 
wordt geladen via een iframe</li>
<li class="fragment">"x-frame-options: SAMEORIGIN"</li>
<li class="fragment">Instellen: <ul>
<li>Server configuratie</li>
<li>Plugin: System - HTTP Headers</li>
</ul></li>
</ul>

---

<div class="title">Referrer-Policy</div>

----

## Referrer-Policy - Probleem

<ul style="font-size:100%">
<li>Je mooie website</li>
<li class="fragment">linkt naar een externe website</li>
<li class="fragment">bezoeker klikt op de link naar de externe website</li> 
<li class="fragment">de externe website
weet waar de bezoeker vandaan komt...</li>
</ul>

----

## Referrer-Policy - Oplossing

<ul style="font-size:100%">
<li>Zet referrer uit</li>
<li class="fragment">"Referrer Policy: no-referrer-when-downgrade"</li>
<li class="fragment">Instellen: <ul>
<li>Server configuratie</li>
<li>Plugin: System - HTTP Headers</li>
</ul></li>
</ul>

---

<div class="title">Cross-Origin-Opener-Policy</div>

----

### Cross-Origin-Opener-Policy (COOP) Probleem

<ul style="font-size:100%"> 
<li>Bezoeker bezoekt je mooie website</li> 
<li class="fragment">in een tweede tab openen ze een andere website</li> 
<li class="fragment">de tweede website kan code bevatten</li> 
<li class="fragment">die invloed heeft op de
eerste tab...</li> 
</ul>

----

### Cross-Origin-Opener-Policy (COOP) Oplossing

<ul style="font-size:100%">
<li>Instrueert de browser om 
voorwaarden te beperken waaronder een nieuwe browsecontext
(nieuw venster of tabblad) kan worden aangemaakt of ermee kan worden gecommuniceerd</li>
<li class="fragment">"Cross-Origin-Opener-Policy: same-origin"</li>
<li class="fragment">Instellen: <ul>
<li>Server configuratie</li>
<li>Plugin: System - HTTP Headers</li>
</ul></li>
</ul>

---

<div class="title">Permissions-Policy</div>

----

## Permissions-Policy - Probleem

<ul style="font-size:100%"> 
<li>je mooie website</li> 
<li class="fragment">laadt een andere website in een iframe</li>
<li class="fragment">je bezoeker krijgt verzoek: toegang tot camera</li>
<li class="fragment">denkt dat het van jouw site komt en staat het toe</li>
<li class="fragment">de andere website krijgt toegang tot de camera</li> 
</ul>

----

### Permissions-Policy - Oplossing

<ul style="font-size:100%">
<li>configureer welke features
toegestaan zijn</li>
<li class="fragment">door de website, frames of ingesloten iframe-inhoud</li> 
<li class="fragment">(voorheen bekend als Feature Policy)</li> 
<li class="fragment">Permissions-Policy: accelerometer=(),
camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()</li> 
<li class="fragment">Instellen via: <ul> 
<li>Serverconfiguratie</li> 
<li>Plugin: System - HTTP Headers</li> </ul></li> 
</ul>

---

<div class="title">Strict-Transport-Security</div>

----

### Strict-Transport-Security - Probleem

<ul style="font-size:100%">
<li>je mooie website</li> 
<li class="fragment">gebruikt altijd https</li> 
<li class="fragment">daardoor is de verbinding versleuteld</li> 
<li class="fragment">op een dag verandert https naar http</li> 
<li class="fragment">door een Man-(of Vrouw)-in-the-Middle aanval</li> 
<li class="fragment">communicatie van formulierinvoer dan niet veilig</li> 
</ul>

----

### Strict-Transport-Security - Probleem

<ul style="font-size:100%"> 
<li>Verkeer naar je site wordt beschermd via SSL/TLS (https)</li>
<li class="fragment">Door een technisch probleem wordt de website geleverd
zonder SSL/TLS (als http)</li> 
<li class="fragment">De terugkerende bezoeker verwacht https 
en verstuurt een formulier met persoonlijke gegevens</li> 
</ul>

----

#### Strict-Transport-Security - Oplossing

<ul style="font-size:100%">
<li>Wees streng en dwing https af</li>
<li class="fragment">Weiger dat de browser van de terugkerende bezoeker http gebruikt</li> 
<li class="fragment">strict-transport-security: max-age=15768000 
(converteer alle HTTP-verzoeken op deze website naar HTTPS gedurende de komende 6 maanden)</li> 
<li class="fragment">Instellen via: <ul> <li>Serverconfiguratie</li>
<li>Plugin: System - HTTP Headers</li> </ul></li>
</ul>

---

<div class="title">Content-Security-Policy</div>

----

### Content-Security-Policy - Probleem

<ul style="font-size:100%"> 
<li>je mooie website</li> 
<li class="fragment">heeft een oude externe reactie-extensie</li> 
<li class="fragment">die een kwetsbaarheid bevat</li> 
<li class="fragment">een kwaadwillende bezoeker plaatst een reactie</li> 
<li class="fragment">met kwaadaardige JavaScript</li> 
<li class="fragment">een andere bezoeker leest de reactie</li> 
<li class="fragment">en de browser voert automatisch het JavaScript uit</li> 
</ul>

----

### Content-Security-Policy - Oplossing

<ul style="font-size:100%"> 
<li>Wees streng</li> 
<li class="fragment">specificeer welke interne/externe 
bronnen je toestaat</li>
<li class="fragment">zoals JavaScript, CSS, afbeeldingen, enzovoort</li>
<li class="fragment">Instellen via: <ul>
<li>Plugin: System - HTTP Headers</li>
</ul></li> 
</ul>

----

### Content-Security-Policy - Oplossing

<ul style="font-size:100%">
<li>script-src - JavaScript</li> 
<li class="fragment">'self' - van de website zelf (met hetzelfde schema, 
dezelfde host en poort)</li> 
<li class="fragment">'unsafe-inline'
(niet de meest veilige!) - staat inline JavaScript en event-handling
HTML-attributen toe (zoals onclick)</li> 
<li class="fragment">example.com/matomo.js
staat expliciet toe dat het JavaScript-bestand matomo.js van example.com wordt geladen</li>
</ul>

----

### Content-Security-Policy - "nonce" en "script hashes"

<ul style="font-size:100%"> 
<li>Nonce (number used once) - 
uniek token; server gegenereerd voor elke HTTP-respons<ul style="font-size:75%"> 
<li class="fragment">Content-Security-Policy: 
script-src 'nonce-YourUniqueNonceValue';</li> 
<li class="fragment">of inline JS: < 
script nonce="YourUniqueNonceValue"> // Je inline script hier < /script ></li> 
</ul> </li> 
<li class="fragment">Script Hashes -
script alleen uitgevoerd als inhoud = cryptografische
hash die in CSP is opgegeven<ul style="font-size:75%"> 
<li class="fragment">Content-Security-Policy: script-src 'sha256-abc123';</li></ul> </li> 
</ul>

----

### Content-Security-Policy - Hoe stel je het in?

<ul style="font-size:100%"> <li>Schakel CSP in met "Report Only"</li> 
<li class="fragment">Gebruik Google Chrome > Inspecteren > Console</li> 
<li class="fragment">Controleer en los fouten op</li> 
<li class="fragment">Wees extra voorzichtig met: CAPTCHA, YouTube-video’s, Google Maps/OpenStreetMap, enzovoort</li> 
</ul>

---

<div class="title">Cross-Origin Resource Sharing (CORS)</div>

----

### Cross-Origin Resource Sharing - Probleem

<ul style="font-size:100%">
<li>je mooie website</li> 
<li class="fragment">een geregistreerde gebruiker is ingelogd</li>
<li class="fragment">heeft zich niet uitgelogd en bezoekt 
een kwaadaardige website</li> 
<li class="fragment">de kwaadaardige website plaatst een formulier 
naar je website</li> <li class="fragment">samen met het 
sessiecookie van de geregistreerde gebruiker</li> 
</ul>

----

### Cross-Origin Resource Sharing

<ul style="font-size:100%"> 
<li>same-origin policy = te strikt
voor toegang tot resources (zoals lettertypen, API’s of scripts) die 
op andere domeinen worden gehost</li>
<li class="fragment">CORS = maakt het mogelijk om dit beleid op een veilige manier 
te versoepelen onder gecontroleerde omstandigheden</li> 
<li class="fragment">Instellen via: <ul>
<li>In Globale Configuratie: Server >
Webservices > CORS inschakelen</li> </ul></li> 
</ul>

---

---

<div class="title">Vragen?</div>

----

## Photo Credits

<ul style="font-size:50%">
 <li>https://unsplash.com/photos/lines-of-html-codes-4hbJ-eymZ1o</li>
 <li>https://unsplash.com/photos/boy-standing-near-dock-lVCHfXn3VME</li>
 <li>https://pixabay.com/photos/notebook-paper-pages-open-731212/</li>
 <li>https://unsplash.com/photos/guard-standing-near-brown-wall-qTLyiHW1nIc</li>
 <li>https://unsplash.com/photos/woman-smelling-bouquet-of-purple-lavender-Wv9Bn8te3as</li>
 <li>https://unsplash.com/photos/person-hand-holding-photo-frame-3_Xwxya43hE</li>
 <li>https://unsplash.com/photos/person-using-laptop-FlPc9_VocJ4</li>
 <li>https://unsplash.com/photos/gray-bottle-opener-beside-opened-bottle-voJB2goG0us</li>
 <li>https://unsplash.com/photos/no-drones-signage-on-brown-wooden-post-across-mountain-with-fogs-oMqswmrie4Y</li>
 <li>https://unsplash.com/photos/box-truck-passing-through-toll-gate-Pj6TgpS_Vt4</li>
 <li>https://unsplash.com/photos/time-lapse-photography-of-square-containers-at-night-ahi73ZN5P0Y</li>
 <li>https://unsplash.com/photos/pizza-on-white-ceramic-plate-WcV2YkM3Dls</li>
 <li>https://app.leonardo.ai/image-generation</li>

</section>