speculation-rules test

Author: dbushell

.gitignore

@@ -42,4 +42,5 @@ public/*
 !public/favicon.ico
 !public/manifest.webmanifest
 !public/robots.txt
+!public/speculation-rules.json
 !public/sw.js

public/_headers

@@ -8,6 +8,7 @@
   permissions-policy: browsing-topics=(),interest-cohort=()
   referrer-policy: same-origin
   x-robots-tag: noai, noimageai
+  speculation-rules: "/speculation-rules.json?v=%DEPLOY_HASH%"
 
 /assets/*
   x-robots-tag: noindex
@@ -24,3 +25,6 @@
 
 /rss.xml
   content-type: application/xml; charset=utf-8
+
+/speculation-rules.json
+  content-type: application/speculationrules+json

public/speculation-rules.json

@@ -0,0 +1,13 @@
+{
+  "prefetch": [
+    {
+      "source": "document",
+      "where": {
+        "and": [
+          { "href_matches": "/*", "relative_to": "document" }
+        ]
+      },
+      "eagerness": "moderate"
+    }
+  ]
+}

routes/(headers)/index.ts

@@ -4,7 +4,7 @@ import { authorized } from "@src/shared.ts";
 export const pattern = "/_headers";
 export const order = 9999;
 
-export const GET: HyperHandle = async ({ request, response }) => {
+export const GET: HyperHandle = async ({ request, response, platform }) => {
   if (!authorized(request)) {
     return null;
   }
@@ -17,6 +17,7 @@ export const GET: HyperHandle = async ({ request, response }) => {
     `default-src 'self'`;
   let body = await response.text();
   body = body.replace("%CONTENT_SECURITY_POLICY%", csp);
+  body = body.replaceAll("%DEPLOY_HASH%", platform.deployHash);
   response = new Response(body, response);
   response.headers.set("content-length", body.length.toString());
   return response;

src/middleware.ts

@@ -19,10 +19,14 @@ export const middleware: HyperHandle = ({ request, platform }) => {
     ["x-content-type-options", "nosniff"],
     ["permissions-policy", "browsing-topics=(),interest-cohort=()"],
     ["referrer-policy", "same-origin"],
+    ["speculation-rules", '"/speculation-rules.json"'],
     ["x-img-src", "data:"],
     // TODO - generate? - Hash for Logo inline styles
     ["x-style-src", `'sha256-kXLrG8qzlz0MMhgMvdF9YD6tca5CYXeC1iFSTHDsO8w='`],
-    // Allow WASM (search)
+    // "this.rel=`stylesheet`"
+    ["x-script-src", `'unsafe-hashes'`],
+    ["x-script-src", `'sha256-BGXQRYq/G9+8wEtSYSbQRnDRz8/8apfi/W/CUBMh9w0='`],
+    // Allow search WASM and fallback
     ["x-script-src", `'wasm-unsafe-eval'`],
     ["x-form-action", `https://duckduckgo.com`],
   ];
@@ -32,6 +36,10 @@ export const middleware: HyperHandle = ({ request, platform }) => {
     pageHeaders.push(["x-style-src", `'sha256-${style.hash}'`]);
   });
 
+  if (url.pathname.startsWith("/speculation-rules.json")) {
+    pageHeaders.push(["content-type", "application/speculationrules+json"]);
+  }
+
   // CORS headers
   if (/\/(rss|sitemap)\.xml$/.test(url.pathname)) {
     pageHeaders.push(["access-control-allow-origin", "*"]);

src/shared.ts

@@ -1,10 +1,16 @@
+const SET_HEADERS = new Set(["content-type"]);
+
 export const appendHeaders = (
   response: Response,
   headers: Array<[string, string]>,
 ) => {
   try {
     headers.forEach(([name, value]) => {
-      response.headers.append(name, value);
+      if (SET_HEADERS.has(name.toLowerCase())) {
+        response.headers.set(name, value);
+      } else {
+        response.headers.append(name, value);
+      }
     });
   } catch {
     // Ignore immutable headers