✨ feat: allow customizable secure headers (CSP)

README.md

@@ -12,9 +12,10 @@ A simple blog theme powered by [Zola](https://getzola.org). See a live preview [
 - [X] Projects page.
 - [X] Archive page.
 - [x] Tags.
-- [x] Social Links.
-- [X] Syntax highlighting.
+- [x] Social links.
+- [X] Code syntax highlighting.
 - [X] Invertible and dimmable images shortcodes.
+- [X] Customizable secure headers.
 
 See the project's roadmap [here](https://github.com/users/welpo/projects/1).
 

config.toml

@@ -43,3 +43,16 @@ socials = [
     { name = "youtube", url = "https://youtube.com/@oskerwyld", icon = "youtube" },
     { name = "spotify", url = "https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE", icon = "spotify" },
 ]
+
+# Custom security headers. What urls should your website be able to connect to?
+# You need to specify the CSP and the URLs associated with the directive.
+# Useful if you want to load remote content safely (embed YouTube videos, which needs frame-src, for example).
+# Default directive is self.
+# Default config, allows for https remote images and embedding YouTube and Vimeo content.
+# This configuration gets an A+ in Mozilla's Observatory: https://observatory.mozilla.org
+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"] },
+]

content/almost-no-js.md

@@ -1,6 +1,6 @@
 +++
 title = "Almost no JavaScript"
-date = "2022-12-03"
+date = "2023-01-06"
 [taxonomies]
 tags = ["test"]
 +++

content/lorem.md

@@ -1,20 +0,0 @@
-+++
-title = "Lorem Ipsum"
-date = "2022-06-30"
-[taxonomies]
-tags = ["test"]
-+++
-
-# Heading 1
-Who is Lauren Ipsum? Fun grid ac labels Sed sed, rhoncus nocode pixel perfect property accessibility custom code university nam lens flares exploring shades of consequat fluid science and magic In rogue pixels. Cms scelerisque editor bibendum neque et Semper grid quantum field quis visually tempor.
-
-## Heading 1.1
-Adding lens cras eget ratio Webflow generation nocode dui code screen neque responsifying cloneable frosted glass beautiful Grimur dapibus block sticky nav Est disrupt membership ecommerce augue fluid quick find responsive. Don't touch my design. Marketplace nam proofreading labels and tooltips combo. Late night coffee spill.
-
-# Heading 2
-
-Marketplace client-first 3D jello disrupt visual code superpowers visually alchemy wizardry cut to black. Fun contrast ratio agency accessibility sticky nav reverse-proxy. Sprinkling on some wow. Interaction freelance enterprise cms optimizing for IE6 cloneable making it pop logic div block McGuire Instagrimur.
-
-Designer adding lens flares symbols responsive images. Sprinkling on some wow. Proofreading labels and tooltips fluid frosted glass Webp neumorphic button the magical div block interaction SEO cms grid library superpowers accessible client-first DevLink generation nocode alt tag combo class. To set.
-
-Exploring shades of gray responsive images 3D university attributes designer nocode the magical div block. Don't touch my design. Pixel perfect component frosted glass. Cat-herding rogue pixels. Making it pop wizardry Webp generation nocode combo class reverse-proxy fun create component adding lens.

content/security.md

@@ -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.

content/toc.md

@@ -1,6 +1,6 @@
 +++
 title = "Table of Contents"
-date = "2023-01-02"
+date = "2022-11-01"
 [taxonomies]
 tags = ["test"]
 

templates/partials/header.html

@@ -55,6 +55,12 @@
     <meta property="og:description" content="{{ config.description }}">
     <meta property="og:site_name" content="{{ config.title }}">
 
-    <meta http-equiv="Content-Security-Policy" 
-    content="default-src 'self' ws://127.0.0.1:1024/; img-src 'self' https://*; script-src 'self'; style-src 'self'; font-src 'self'" />
+    <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'
+    {% if config.extra.allowed_domains %}
+        {%- for domain in config.extra.allowed_domains -%}
+            {{ domain.directive }} {{ domain.domains | join(sep=' ') }};
+        {%- endfor -%}
+    {% endif %}">
+
 </head>