HTTP Security Headers - Strengthen your website security

<div class="atitle" style="font-size:200% !important">HTTP Security Headers</div>
<div class="atitle2">Strengthen your website security 
<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/24-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">Overview 
<ul style="font-size: 60%">
<li>HTTP Security Headers</li>
<li>The Headers</li>
<li>Demo: configure!</li>
<li>Questions</li>
</ul>
 </div>

---

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

----

## HTTP Header

<ul>
<li>Metadata = Communication between server & client<ul>
 <li class="fragment">HTTP Status - HTTP Version, Status Code (200 success, 404 not found)</li>
 <li class="fragment">General Headers - date, cache-control</li>
 <li class="fragment">Request Headers - User-Agent, Cookie</li>
 <li class="fragment">Response Headers - Server, Content-Type</li>
 <li class="fragment">Entity Headers - Content-Encoding, Content-Language, Last-Modified</li>
 <li class="fragment">Security Headers - [in this presentation]</li>
 <li class="fragment">Custom Headers - password: Open sesame</li>
</ul></li>
</ul>

----

### How to see 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;">
Use Google Chrome > 
Inspect > 
Network > 
click "your HTML page" > 
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/24-http-security-headers/response-headers.png">
</div>
</div>

----

## HTTP Security Headers

<ul>
<li>Communicate what a browser 
can expect from the website</li>
<li class="fragment">= extra security</li>
<li class="fragment">change settings & cache!!!</li>
<li class="fragment">more 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">checking: <a href="https://securityheaders.com" target="_blank">securityheaders.com</a></li>
<li class="fragment">checking: <a href="https://observatory.mozilla.org/" target="_blank">observatory.mozilla.org</a></li>
</ul>

----

### HTTP Security Headers (HSH) - Where?

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

----

### HSH - Server configuration

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

Only 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/24-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">The Headers</div>

----

### The HTTP Security Headers

<ul>
 <li>X-Frame-Options</li>
 <li>Referrer-Policy</li>
 <li>X-Content-Type-Options</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-Frame-Options</div>

----

## X-Frame-Options - Issue

<ul style="font-size:100%">
<li>Your nice website</li>
<li class="fragment">is loaded on other website in an iframe</li>
<li class="fragment">with invisible layer on top</li> 
<li class="fragment">visitor tries to click button original website... </li> 
</ul>

----

## X-Frame-Options - Issue

<ul style="font-size:100%">
<li>Clickjacking</li>
<li class="fragment">Malicious website displays transparent iframe over a legitimate webpage</li>
<li class="fragment">tricking the user into clicking on elements
 of the hidden page</li> 
</ul>

----

## X-Frame-Options - Solution

<ul style="font-size:100%">
<li>Do not allow your website 
to be loaded via iframe</li>
<li class="fragment">"x-frame-options: SAMEORIGIN"</li>
</ul>

---

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

----

## Referrer-Policy - Issue

<ul style="font-size:100%">
<li>Your nice website</li>
<li class="fragment">links to external website</li>
<li class="fragment">visitor clicks on link to external website</li> 
<li class="fragment">external website knows where visitor came from... </li> 
</ul>

----

## Referrer-Policy - Issue

<ul style="font-size:100%">
<li>Your visitor clicks on a hyperlink to another site</li>
<li class="fragment">browser communicates where you come from to new site (via referrer in HTTP header) </li> 
<li class="fragment">Issue: your website https, target website http = "downgrade" of the connection for the visitor</li>
</ul>

----

## Referrer-Policy - Solution

<ul style="font-size:100%">
<li>Disable referrer</li>
<li class="fragment">"Referrer Policy: no-referrer-when-downgrade"</li>
</ul>

---

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

----

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

<ul style="font-size:100%">
<li>Visitor visits your nice website</li>
<li class="fragment">in a second tab they open another website</li>
<li class="fragment">the second website might have code</li> 
<li class="fragment">that influences the first tab... </li> 
</ul>

----

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

<ul style="font-size:100%">
<li>Instructs browser to restrict conditions 
how new browsing context (new window or tab) can be created or interacted with</li>
<li class="fragment">"Cross-Origin-Opener-Policy: same-origin"</li>
</ul>

---

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

----

### X-Content-Type-Options - Issue

<ul style="font-size:100%">
<li>A visitor on your nice website</li>
<li class="fragment">uploads an example.png file</li> 
<li class="fragment">that contains JavaScript</li>
<li class="fragment">visitor 2 opens page with example.png</li> 
<li class="fragment">the browser loads that example.png</li> 
<li class="fragment">sees the file as JavaScript and executes it</li> 
</ul>

----

### X-Content-Type-Options - Solution

<ul style="font-size:100%">
<li>Disable content determination via MIME</li>
<li class="fragment">"X-Content-Type-Options: nosniff"</li>
</ul>

---

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

----

## Permissions-Policy - Issue

<ul style="font-size:100%">
<li>your nice website</li> 
<li class="fragment">loads other website in iframe</li> 
<li class="fragment">your visitor gets access camera request</li>
<li class="fragment">thinks it's yours and allowes it</li>
<li class="fragment">other website has access to camera</li> 
</ul>

----

### Permissions-Policy - Solution

<ul style="font-size:100%">
<li>configure which features are allowed to be used</li>
<li class="fragment">by website, frames, or iframe embedded content</li>
<li class="fragment">(formerly known as Feature Policy)</li>
<li class="fragment">Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()</li>
</ul>

---

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

----

### Strict-Transport-Security - Issue

<ul style="font-size:100%">
<li>your nice website</li> 
<li class="fragment">always uses https</li> 
<li class="fragment">hence, the connection is encrypted</li>
<li class="fragment">one day, https changed to http</li>
<li class="fragment">because of a Man-(or Female)-in-the-Middle attack</li> 
<li class="fragment">the communication of form input not safe</li> 
</ul>

----

### Strict-Transport-Security - Issue

<ul style="font-size:100%">
<li>Traffic to your site is protected via SSL/TLS (https)</li>
<li class="fragment">Due to some technical difficulty, the website is served without SSL/TLS (as http)</li>
<li class="fragment">The returning visitor expects https and submits a form with personal details</li>
</ul>

----

#### Strict-Transport-Security - Solution

<ul style="font-size:100%">
<li>Be strict and enforce https</li>
<li class="fragment">Deny the returning visitor's browser to use http</li>
<li class="fragment">strict-transport-security: max-age=15768000 (convert all HTTP requests on this 
website to HTTPS in the next 6 months)</li>
</ul>

---

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

----

### Content-Security-Policy - Issue

<ul style="font-size:100%">
<li>your nice website</li> 
<li class="fragment">has an old 3rd party comments extension</li> 
<li class="fragment">which has a vulnerability</li> 
<li class="fragment">a bad visitor adds comment</li>
<li class="fragment">with malicious JavaScript</li>
<li class="fragment">another visitor reads the comment</li>
<li class="fragment">and browser automatically executes the JavaScript</li>
</ul>

----

### Content-Security-Policy - Solution

<ul style="font-size:100%">
<li>Be strict</li>
<li class="fragment">specify what internal/external sources you allow</li>
<li class="fragment">like Javascript, CSS, images etc</li>
<li class="fragment">Content-Security-Policy: default-src 'self'; script-src 'self' 
'unsafe-inline' stats.db8.nl/matomo.js; style-src 'self' 'unsafe-inline'; connect-src 'self' stats.db8.nl/matomo.php; img-src 'self' 
data: https://i.ytimg.com; base-uri 'self'; form-action 'self'; style-src-attr 'self' 'unsafe-inline'; style-src-elem 'self' 
'unsafe-inline'; frame-src 'self' www.youtube.com</li>
</ul>

----

### Content-Security-Policy - Solution

<ul style="font-size:100%">
<li>script-src - JavaScript</li>
<li class="fragment">'self' - from website itself (using same scheme, host, and port)</li>
<li class="fragment">'unsafe-inline' (not the most secure!) - permits inline JavaScript and event-handling HTML attributes (like onclick)</li>
<li class="fragment">example.com/matomo.js explicitly allows loading the JavaScript file matomo.js from example.com</li>
</ul>

----

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

<ul style="font-size:100%">
<li>Nonce (number used once) - unique token generated by server for each HTTP response<ul style="font-size:75%">
 <li class="fragment">Content-Security-Policy: script-src 'nonce-YourUniqueNonceValue';</li>
 <li class="fragment">or inline JS: < script nonce="YourUniqueNonceValue"> 
 // Your inline script here < /script ></li>
</ul>
</li>
<li class="fragment">Script Hashes - allow script to execute if content matches cryptographic hash specified in CSP<ul style="font-size:75%">
 <li class="fragment">Content-Security-Policy: script-src 'sha256-abc123';</li></ul>
</li>
</ul>

----

### Content-Security-Policy - How to config?

<ul style="font-size:100%">
<li>Switch on CSP with "Report Only"</li>
<li class="fragment">Use Google Chrome > Inspect > Console</li>
<li class="fragment">Check and solve errors</li>
<li class="fragment">Take extra care: CAPTCHA, Youtube videos, Google Maps/OpenStreetMap, etc</li>
</ul>

---

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

----

### Cross-Origin Resource Sharing - Issue

<ul style="font-size:100%">
<li>your nice website</li> 
<li class="fragment">a registered user is logged in</li> 
<li class="fragment">did not log out and visits malicious website</li>
<li class="fragment">malicious website posts form to your website</li>
<li class="fragment">together with session cookie of registered user</li>
</ul>

----

### Cross-Origin Resource Sharing

<ul style="font-size:100%">
<li>same-origin policy = too strict for access to resources 
(like fonts, APIs, or scripts) hosted on different domains</li>
<li class="fragment">CORS = safely relax this policy under controlled conditions</li>
<li class="fragment">In Global Configuration: Server > Web Services > Enable CORS</li>
</ul>

---

---

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

----

## Photo Credits

<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/lines-of-html-codes-4hbJ-eymZ1o</li>
<li>https://unsplash.com/photos/guard-standing-near-brown-wall-qTLyiHW1nIc</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/woman-smelling-bouquet-of-purple-lavender-Wv9Bn8te3as</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>
<li>https://unsplash.com/photos/question-mark-neon-signage-8xAA0f9yQnE</li>
</ul>

</section>