🐛 fix: remove flashing from header text (Firefox)

Loads a subset of the sans-serif font for the header.

Fixes #75
This commit is contained in:
welpo 2023-04-29 15:11:13 +02:00
parent 1c06c99047
commit a5981e6fdd
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
13 changed files with 218 additions and 16 deletions

View file

@ -1,7 +1,7 @@
+++
title = "Secure by default"
date = 2023-02-22
updated = 2023-04-14
updated = 2023-04-29
description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory."
[taxonomies]
@ -10,19 +10,20 @@ tags = ["security", "showcase"]
The default configuration of the theme gets an A+ score on [Mozilla Observatory](https://observatory.mozilla.org).[^1]
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 directive if you don't want to embed videos):
This is accomplished by programatically configuring Content Security Policy (CSP) headers based on a user-defined list of allowed domains in the `config.toml` file. Here's the default and recommended setup (you could remove the last directive if you don't want to embed YouTube videos):
```
[extra]
allowed_domains = [
{ directive = "img-src", domains = ["'self'", "https://*"] },
{ directive = "font-src", domains = ["'self'", "data:"] },
{ directive = "img-src", domains = ["'self'", "https://*", "data:"] },
{ directive = "script-src", domains = ["'self'"] },
{ directive = "style-src", domains = ["'self'"] },
{ directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
{ directive = "frame-src", domains = ["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.
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 the 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.