feat: allow customizable secure headers (CSP)

This commit is contained in:
welpo 2023-02-22 01:47:32 +01:00
parent a8540ab499
commit d7caa7af5f
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
7 changed files with 50 additions and 26 deletions

24
content/security.md Normal file
View file

@ -0,0 +1,24 @@
+++
title = "Secure by default"
date = "2023-02-22"
[taxonomies]
tags = ["security", "showcase"]
+++
The default configuration of the theme gets an A+ score on [Mozilla Observatory](https://observatory.mozilla.org).
This is accomplished by programatically configuring Content Security Policy (CSP) headers based on a user-defined list of allowed domains in the theme's config.toml file. Here's the default and recommended setup (you could remove the last lines if you don't want to embed videos):
```
[extra]
allowed_domains = [
{ directive = "img-src", domains = ["'self'", "https://*"] },
{ directive = "script-src", domains = ["'self'"] },
{ directive = "style-src", domains = ["'self'"] },
{ directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
]
```
The allowed_domains list specifies the URLs that the website should be able to connect to, and each domain in the list is associated with a CSP directive such as `frame-src`, `connect-src`, or `script-src`. The `templates/partials/header.html` file dynamically generates the CSP header based on this list.
This feature allows you to easily customize their website's security headers to allow for specific use cases, such as embedding YouTube videos, loading remote fonts ([not recommended](https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/)) or scripts.