An attempt to add CSP headers 🤷🏼

.eleventy.js

@@ -39,9 +39,11 @@ export default function(config) {
     // Doesnt appear to be relative from the input directory. https://github.com/11ty/eleventy/issues/2043#issuecomment-948826977
     config.addPassthroughCopy("src/img");
     config.addPassthroughCopy("src/svg");
+    config.addPassthroughCopy("src/js");
     config.addPassthroughCopy("src/twemoji/svg");
     config.addPassthroughCopy("src/.well-known");
     config.addPassthroughCopy("src/robots.txt");
+    config.addPassthroughCopy("src/_headers");
     // https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve
     config.setServerPassthroughCopyBehavior("passthrough");
 
@@ -124,7 +126,7 @@ export default function(config) {
 
         // https://github.com/markdown-it/markdown-it-emoji
         md.renderer.rules.emoji = function(token, idx) {
-            return twemoji.parse(token[idx].content, { base: "https://haxe.io/twemoji/", folder: "svg", ext: ".svg" });
+            return twemoji.parse(token[idx].content, { base: "/twemoji/", folder: "svg", ext: ".svg" });
         }
 
         return md;

src/_headers

@@ -0,0 +1,10 @@
+/*
+    X-Frame-Options: SAMEORIGIN
+    Content-Security-Policy: default-src 'self'; script-src 'self' static.cloudflareinsights.com ajax.cloudflare.com 'wasm-unsafe-eval' 'unsafe-inline'; connect-src 'self' cloudflareinsights.com; frame-ancestors 'self'; form-action 'self'; upgrade-insecure-requests
+    Reporting-Endpoints: cf-csp-endpoint="https://csp-reporting.cloudflare.com/cdn-cgi/script_monitor/report"
+    Content-Security-Policy-Report-Only: report-uri https://csp-reporting.cloudflare.com/cdn-cgi/script_monitor/report; report-to cf-csp-endpoint
+
+# See https://developers.cloudflare.com/workers/static-assets/headers/#prevent-your-workersdev-urls-showing-in-search-results
+https://:version.:subdomain.workers.dev/*
+    X-Robots-Tag: noindex
+

src/js/search.js

@@ -0,0 +1,23 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+    let search = new PagefindUI({ 
+        element: "#search", 
+        showSubResults: true,
+        sort: { date: "desc" },
+        showImages: false,
+        resetStyles: false,
+        autofocus: true
+    });
+    let url = new URL(window.location);
+    let query = new URLSearchParams(url.search);
+
+    search.triggerSearch(query.get("q"));
+
+    let input = search._pfs.$$.root
+        .querySelectorAll(".pagefind-ui__search-input")[0];
+
+    input.addEventListener("keyup", () => {
+        query.set("q", input.value);
+        url.search = query;
+        history.pushState({}, '', url);
+    });
+});

src/robots.txt

@@ -4,6 +4,7 @@ Disallow: /css/
 Disallow: /svg/
 Disallow: /favicon/
 Disallow: /twemoji/
+Disallow: /cdn-cgi/
 Sitemap: https://www.haxe.io/sitemap.xml
 
 User-agent: Twitterbot

src/search.html

@@ -7,28 +7,4 @@
 
 <script src="/pagefind/pagefind-ui.js"></script>
 <search id="search"></search>
-<script>
-    window.addEventListener('DOMContentLoaded', (event) => {
-        let search = new PagefindUI({ 
-            element: "#search", 
-            showSubResults: true,
-            sort: { date: "desc" },
-            showImages: false,
-            resetStyles: false,
-            autofocus: true
-        });
-        let url = new URL(window.location);
-        let query = new URLSearchParams(url.search);
-
-        search.triggerSearch(query.get("q"));
-
-        let input = search._pfs.$$.root
-            .querySelectorAll(".pagefind-ui__search-input")[0];
-
-        input.addEventListener("keyup", () => {
-            query.set("q", input.value);
-            url.search = query;
-            history.pushState({}, '', url);
-        });
-    });
-</script>
+<script src="/js/search.js"></script>