From 33cf6c87e899b54865fe6f1d82b5dab469e7a5fe Mon Sep 17 00:00:00 2001
From: Chris Sauve <chrismsauve@gmail.com>
Date: Wed, 23 Oct 2024 14:27:02 -0400
Subject: [PATCH] Move headers to be server-only in default templates

---
 .changeset/honest-ghosts-obey.md              |   7 +
 packages/browser/package.json                 |   1 +
 packages/browser/source/headers.ts            | 916 ++++++++++++++++++
 packages/browser/source/server.ts             |   1 +
 packages/browser/tsconfig.json                |   6 +-
 packages/create/templates/app-basic/App.tsx   |   7 +-
 .../templates/app-basic/foundation/html.ts    |   2 +-
 .../app-basic/foundation/html/HTML.test.tsx   |  46 -
 .../app-basic/foundation/html/HTML.tsx        | 159 ---
 .../app-basic/foundation/html/Head.test.tsx   |  42 +
 .../app-basic/foundation/html/Head.tsx        |  34 +
 .../create/templates/app-basic/server.tsx     |  90 +-
 .../create/templates/app-empty/server.tsx     |   3 +-
 packages/create/templates/app-graphql/App.tsx |   7 +-
 .../templates/app-graphql/foundation/html.ts  |   2 +-
 .../app-graphql/foundation/html/HTML.test.tsx |  46 -
 .../app-graphql/foundation/html/HTML.tsx      | 159 ---
 .../app-graphql/foundation/html/Head.test.tsx |  42 +
 .../app-graphql/foundation/html/Head.tsx      |  34 +
 .../create/templates/app-graphql/server.tsx   |  96 +-
 packages/create/templates/app-trpc/App.tsx    |   7 +-
 .../templates/app-trpc/foundation/html.ts     |   2 +-
 .../app-trpc/foundation/html/HTML.test.tsx    |  46 -
 .../app-trpc/foundation/html/HTML.tsx         | 159 ---
 .../app-trpc/foundation/html/Head.test.tsx    |  42 +
 .../app-trpc/foundation/html/Head.tsx         |  34 +
 packages/create/templates/app-trpc/server.tsx |  99 +-
 .../source/server/hooks/cache-control.ts      | 112 +--
 .../server/hooks/content-security-policy.ts   | 438 +--------
 .../source/server/hooks/permissions-policy.ts | 296 +-----
 .../server/hooks/strict-transport-security.ts |  50 +-
 pnpm-lock.yaml                                |   3 +
 32 files changed, 1467 insertions(+), 1521 deletions(-)
 create mode 100644 .changeset/honest-ghosts-obey.md
 create mode 100644 packages/browser/source/headers.ts
 delete mode 100644 packages/create/templates/app-basic/foundation/html/HTML.test.tsx
 delete mode 100644 packages/create/templates/app-basic/foundation/html/HTML.tsx
 create mode 100644 packages/create/templates/app-basic/foundation/html/Head.test.tsx
 create mode 100644 packages/create/templates/app-basic/foundation/html/Head.tsx
 delete mode 100644 packages/create/templates/app-graphql/foundation/html/HTML.test.tsx
 delete mode 100644 packages/create/templates/app-graphql/foundation/html/HTML.tsx
 create mode 100644 packages/create/templates/app-graphql/foundation/html/Head.test.tsx
 create mode 100644 packages/create/templates/app-graphql/foundation/html/Head.tsx
 delete mode 100644 packages/create/templates/app-trpc/foundation/html/HTML.test.tsx
 delete mode 100644 packages/create/templates/app-trpc/foundation/html/HTML.tsx
 create mode 100644 packages/create/templates/app-trpc/foundation/html/Head.test.tsx
 create mode 100644 packages/create/templates/app-trpc/foundation/html/Head.tsx

diff --git a/.changeset/honest-ghosts-obey.md b/.changeset/honest-ghosts-obey.md
new file mode 100644
index 000000000..d13ca3599
--- /dev/null
+++ b/.changeset/honest-ghosts-obey.md
@@ -0,0 +1,7 @@
+---
+'@quilted/preact-browser': patch
+'@quilted/browser': patch
+'@quilted/create': patch
+---
+
+Move headers to be server-only in default templates
diff --git a/packages/browser/package.json b/packages/browser/package.json
index f49931738..647c0f05f 100644
--- a/packages/browser/package.json
+++ b/packages/browser/package.json
@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@quilted/assets": "workspace:^0.1.5",
+    "@quilted/http": "workspace:^0.3.0",
     "@quilted/signals": "workspace:^0.2.1",
     "js-cookie": "^3.0.0"
   },
diff --git a/packages/browser/source/headers.ts b/packages/browser/source/headers.ts
new file mode 100644
index 000000000..c85b0eb50
--- /dev/null
+++ b/packages/browser/source/headers.ts
@@ -0,0 +1,916 @@
+import type {
+  ContentSecurityPolicySandboxAllow,
+  ContentSecurityPolicySpecialSource,
+} from '@quilted/http';
+
+export type {
+  ContentSecurityPolicySandboxAllow,
+  ContentSecurityPolicySpecialSource,
+  ContentSecurityPolicyDirective,
+  CrossOriginEmbedderPolicyHeaderValue,
+  CrossOriginOpenerPolicyHeaderValue,
+  CrossOriginResourcePolicyHeaderValue,
+  PermissionsPolicyDirective,
+  PermissionsPolicySpecialSource,
+} from '@quilted/http';
+
+const SPECIAL_SOURCES = new Set(['*', 'self', 'src']);
+
+// The recommendation for being added to Google’s preload list is
+// two years. See https://hstspreload.org/ for details.
+const STRICT_TRANSPORT_SECURITY_DEFAULT_MAX_AGE = 63_072_000;
+
+/**
+ * Options for controlling the Cache-Control header of the current
+ * response.
+ *
+ * @see https://csswizardry.com/2019/03/cache-control-for-civilians/
+ */
+export type CacheControlOptions =
+  | {
+      /**
+       * Whether this cache control directive applies only to “private”
+       * caches, which is typically the end user’s browser cache for
+       * applications using Quilt. When not set, the cache-control directive
+       * will be set to `public`, which allows all caches (including CDNs,
+       * proxies, and the like) to cache the content.
+       */
+      private?: true;
+      /**
+       * Completely disable caching of this response. Passing this option
+       * sets the `Cache-Control` header to `no-store`.
+       */
+      cache: false;
+      maxAge?: never;
+      immutable?: never;
+      revalidate?: never;
+    }
+  | {
+      /**
+       * Whether this cache control directive applies only to “private”
+       * caches, which is typically the end user’s browser cache for
+       * applications using Quilt. When not set, the cache-control directive
+       * will be set to `public`, which allows all caches (including CDNs,
+       * proxies, and the like) to cache the content.
+       */
+      private?: true;
+      cache?: never;
+      /**
+       * The number of seconds, from the time of this request, that
+       * the content is considered “fresh”.
+       */
+      maxAge?: number;
+      immutable?: never;
+      /**
+       * Controls how clients should revalidate their cached content.
+       * If this option is set to `true`, the resulting `Cache-Control`
+       * header will have the `must-revalidate` directive, which asks
+       * clients to revalidate their content after the `maxAge` period
+       * has expired.
+       *
+       * If you instead pass `{allowStale: number}`, the resulting
+       * `Cache-Control` header will have the `stale-while-revalidate`
+       * directive, which allows caches that support it to use the stale
+       * version from the cache while they perform revalidation in the
+       * background.
+       */
+      revalidate?: boolean | {allowStale: number};
+    }
+  | {
+      /**
+       * Whether this cache control directive applies only to “private”
+       * caches, which is typically the end user’s browser cache for
+       * applications using Quilt. When not set, the cache-control directive
+       * will be set to `public`, which allows all caches (including CDNs,
+       * proxies, and the like) to cache the content.
+       */
+      private?: true;
+      cache?: never;
+      maxAge?: number;
+      /**
+       * Declares that this request is immutable. This means that it is
+       * assumed to never change, and clients will never attempt to
+       * revalidate the content. Be careful when using this option!
+       */
+      immutable?: boolean;
+      revalidate?: never;
+    };
+
+export function cacheControlHeader(options: CacheControlOptions) {
+  let headerValue = '';
+
+  const {
+    private: isPrivate,
+    cache,
+    immutable,
+    maxAge = immutable ? 31536000 : undefined,
+    revalidate,
+  } = options;
+
+  headerValue = isPrivate ? 'private' : 'public';
+
+  const appendToHeader = (value: string) => {
+    headerValue = `${headerValue}, ${value}`;
+  };
+
+  if (cache === false) {
+    appendToHeader('no-store');
+  }
+
+  if (maxAge === 0 && revalidate === true) {
+    appendToHeader('no-cache');
+  } else if (typeof maxAge === 'number' || revalidate) {
+    appendToHeader(`max-age=${maxAge ?? 0}`);
+
+    if (revalidate === true) {
+      appendToHeader('must-revalidate');
+    } else if (typeof revalidate === 'object') {
+      appendToHeader(`stale-while-revalidate=${revalidate.allowStale}`);
+    }
+  }
+
+  if (immutable) appendToHeader('immutable');
+
+  return headerValue;
+}
+
+/**
+ * Options for creating a content security policy.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+ */
+export interface ContentSecurityPolicyOptions {
+  /**
+   * Sets the child-src content security policy directive, which determines what sources
+   * are allowed for nested browsing contexts, including workers and iframes.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/child-src
+   */
+  childSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the connect-src content security policy directive, which determines what sources
+   * can be connected to from script sources (for example, when using `fetch()`).
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
+   */
+  connectSources?: (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the default-src content security policy directive, which determines what sources
+   * are allowed for resources where a more specific policy has not been set.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src
+   */
+  defaultSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the font-src content security policy directive, which determines what sources
+   * are allowed for fonts used on this page.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src
+   */
+  fontSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the frame-src content security policy directive, which determines what sources
+   * are allowed for frames embedded in this page.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
+   */
+  frameSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the img-src content security policy directive, which determines what sources
+   * are allowed for images.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
+   */
+  imageSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the manifest-src content security policy directive, which determines what sources
+   * are allowed for the app manifest for this page.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/manifest-src
+   */
+  manifestSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the media-src content security policy directive, which determines what sources
+   * are allowed for audio and video.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/media-src
+   */
+  mediaSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the object-src content security policy directive, which determines what sources
+   * are allowed for `<object>`, `<embed>`, and `<applet>` elements.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/object-src
+   */
+  objectSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the prefetch-src content security policy directive, which determines what sources
+   * are allowed for prefetching and prerendering.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/prefetch-src
+   */
+  prefetchSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the script-src content security policy directive, which determines what sources
+   * are allowed for scripts.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
+   */
+  scriptSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the script-src-elem content security policy directive, which determines what sources
+   * are allowed for `script` elements.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src-elem
+   */
+  scriptElementSources?:
+    | false
+    | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the script-src-attr content security policy directive, which determines what sources
+   * are allowed for inline event handlers.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src-attr
+   */
+  scriptAttributeSources?:
+    | false
+    | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the style-src content security policy directive, which determines what sources
+   * are allowed for stylesheets.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+   */
+  styleSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the style-src-elem content security policy directive, which determines what sources
+   * are allowed for stylesheet elements.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-elem
+   */
+  styleElementSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the style-src-attr content security policy directive, which determines what sources
+   * are allowed for inline styles.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-attr
+   */
+  styleAttributeSources?:
+    | false
+    | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the worker-src content security policy directive, which determines what sources
+   * are allowed for workers created by this page.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src
+   */
+  workerSources?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the base-uri content security policy directive, which determines the sources that can
+   * be used in the document’s `<base>` element.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/base-uri
+   */
+  baseUri?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Apply restrictions to the abilities of this HTML page using the `sandbox`
+   * content security policy directive. When set to `true`, the `sandbox` header
+   * is set without any exceptions. You can also pass an allow-list of capabilities
+   * to this option to apply the sandbox, with some features enabled.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox
+   */
+  sandbox?: boolean | ContentSecurityPolicySandboxAllow[];
+
+  /**
+   * Sets the form-action content security policy directive, which determines the sources
+   * that can be the targets of form submissions on this page.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/form-action
+   */
+  formActions?:
+    | false
+    | (
+        | ContentSecurityPolicySpecialSource.Self
+        | ContentSecurityPolicySpecialSource.UnsafeEval
+        | ContentSecurityPolicySpecialSource.UnsafeHashes
+        | ContentSecurityPolicySpecialSource.UnsafeInline
+        | ContentSecurityPolicySpecialSource.None
+        | string
+      )[];
+
+  /**
+   * Sets the frame-ancestors content security policy directive, which determines what sources
+   * can embed this page.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
+   */
+  frameAncestors?:
+    | false
+    | (
+        | ContentSecurityPolicySpecialSource.Self
+        | ContentSecurityPolicySpecialSource.None
+        | string
+      )[];
+
+  /**
+   * Sets the navigate-to content security policy directive, which determines what
+   * sources the page can navigate to.
+   *
+   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
+   * all sources.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/navigate-to
+   */
+  navigateTo?: false | (ContentSecurityPolicySpecialSource | string)[];
+
+  /**
+   * Sets the report-uri content security policy directive which controls the URL
+   * the browser will report to when content security policy violations occur.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/navigate-to
+   */
+  reportUri?: string;
+
+  /**
+   * Sets the `report-to` group that the browser will report content security
+   * policy violations to. You will typically need to use this in conjunction
+   * with setting the `Report-To` header, using either `useResponseHeader()` or
+   * `<ResponseHeader />`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to
+   */
+  reportTo?: string;
+
+  /**
+   * Sets the `block-all-mixed-content` content security policy directive, which
+   * prevents insecure content from loading on when the page uses HTTP.
+   *
+   * @deprecated Use the `upgradeInsecureRequests` option instead.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content
+   */
+  blockAllMixedContent?: boolean;
+
+  /**
+   * Instructs the browser to upgrade any insecure requests made by the page as
+   * if they had been secure requests.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
+   */
+  upgradeInsecureRequests?: boolean;
+
+  /**
+   * Determines what resources the browser will require sub-resource integrity (SRI)
+   * checks before loading.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for
+   */
+  requireSriFor?: ('style' | 'script')[];
+
+  /**
+   * Determines what resources will only accept “trusted types” in potential XSS
+   * vectors, like when setting `Element.innerHTML`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for
+   */
+  requireTrustedTypesFor?: 'script'[];
+}
+
+export function contentSecurityPolicyHeader(
+  options: ContentSecurityPolicyOptions = {},
+) {
+  let headerValue = '';
+
+  const {
+    baseUri,
+    blockAllMixedContent,
+    childSources,
+    connectSources,
+    defaultSources,
+    fontSources,
+    formActions,
+    frameAncestors,
+    frameSources,
+    imageSources,
+    manifestSources,
+    mediaSources,
+    navigateTo,
+    objectSources,
+    prefetchSources,
+    reportTo,
+    reportUri,
+    requireSriFor,
+    requireTrustedTypesFor,
+    sandbox,
+    scriptAttributeSources,
+    scriptElementSources,
+    scriptSources,
+    styleAttributeSources,
+    styleElementSources,
+    styleSources,
+    upgradeInsecureRequests,
+    workerSources,
+  } = options;
+
+  const appendContent = (content: string) => {
+    if (headerValue.length === 0) {
+      headerValue = content;
+    } else {
+      headerValue += `; ${content}`;
+    }
+  };
+
+  const addDirective = (directive: string, value?: string) =>
+    appendContent(`${directive}${value ? ` ${value}` : ''}`);
+
+  const addSourcesDirective = (
+    directive: string,
+    value?: boolean | string[],
+  ) => {
+    if (value == null) return;
+
+    if (value === false) {
+      addDirective(directive, "'none'");
+    } else if (Array.isArray(value)) {
+      if (value.length === 0) {
+        addDirective(directive, "'none'");
+      } else {
+        addDirective(directive, value.join(' '));
+      }
+    }
+  };
+
+  addSourcesDirective('default-src', defaultSources);
+  addSourcesDirective('connect-src', connectSources);
+  addSourcesDirective('child-src', childSources);
+  addSourcesDirective('font-src', fontSources);
+  addSourcesDirective('form-action', formActions);
+  addSourcesDirective('frame-ancestors', frameAncestors);
+  addSourcesDirective('frame-src', frameSources);
+  addSourcesDirective('img-src', imageSources);
+  addSourcesDirective('manifest-src', manifestSources);
+  addSourcesDirective('media-src', mediaSources);
+  addSourcesDirective('object-src', objectSources);
+  addSourcesDirective('prefetch-src', prefetchSources);
+  addSourcesDirective('script-src', scriptSources);
+  addSourcesDirective('script-src-attr', scriptAttributeSources);
+  addSourcesDirective('script-src-elem', scriptElementSources);
+  addSourcesDirective('style-src', styleSources);
+  addSourcesDirective('style-src-attr', styleAttributeSources);
+  addSourcesDirective('style-src-elem', styleElementSources);
+  addSourcesDirective('worker-src', workerSources);
+
+  addSourcesDirective('base-uri', baseUri);
+  addSourcesDirective('navigate-to', navigateTo);
+
+  if (sandbox === true) {
+    addDirective('sandbox');
+  } else if (Array.isArray(sandbox)) {
+    if (sandbox.length === 0) {
+      addDirective('sandbox');
+    } else {
+      addDirective('sandbox', sandbox.join(' '));
+    }
+  }
+
+  if (requireSriFor && requireSriFor.length > 0) {
+    addDirective('require-sri-for', requireSriFor.join(' '));
+  }
+
+  if (requireTrustedTypesFor && requireTrustedTypesFor.length > 0) {
+    addDirective(
+      'require-trusted-types-for',
+      requireTrustedTypesFor.map((type) => `'${type}'`).join(' '),
+    );
+  }
+
+  if (blockAllMixedContent) addDirective('block-all-mixed-content');
+  if (upgradeInsecureRequests) addDirective('upgrade-insecure-requests');
+
+  if (reportTo) addDirective('report-to', reportTo);
+  if (reportUri) addDirective('report-uri', reportUri);
+
+  return headerValue;
+}
+
+import type {PermissionsPolicySpecialSource} from '@quilted/http';
+
+/**
+ * Options for creating a content security policy.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+ */
+export interface PermissionsPolicyOptions {
+  /**
+   * Controls whether the current document is allowed to gather information about the acceleration of
+   * the device through the Accelerometer interface.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/accelerometer
+   */
+  accelerometer?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to gather information
+   * about the amount of light in the environment around the device through
+   * the AmbientLightSensor interface.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/ambient-light-sensor
+   */
+  ambientLightSensor?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to autoplay media requested through the
+   * HTMLMediaElement interface. This includes both the use of the `autoplay`
+   * attribute on `<video>` and `<audio>` elements, and the `HTMLMediaElement.play()`
+   * method.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/autoplay
+   */
+  autoplay?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use video input devices.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/camera
+   */
+  camera?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether or not the current document is permitted to use the
+   * `getDisplayMedia()` method to capture screen contents.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/display-capture
+   */
+  displayCapture?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to set document.domain.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/document-domain
+   */
+  documentDomain?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use the Encrypted
+   * Media Extensions API (EME).
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/encrypted-media
+   */
+  encryptedMedia?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether tasks should execute in frames while they're not being
+   * rendered (e.g. if an iframe is hidden or display: none).
+   */
+  executionWhileNotRendered?:
+    | false
+    | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether tasks should execute in frames while they're outside of
+   * the visible viewport.
+   */
+  executionWhileOutOfViewport?:
+    | false
+    | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use
+   * `Element.requestFullScreen()`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/fullscreen
+   */
+  fullScreen?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use the Gamepad API.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/gamepad
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API
+   */
+  gamepad?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use the
+   * Geolocation Interface.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/geolocation
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Geolocation
+   */
+  geolocation?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to gather information
+   * about the orientation of the device through the Gyroscope interface.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/gyroscope
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope
+   */
+  gyroscope?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the user will be tracked and categorized using Google’s
+   * “Federated Learning of Cohorts” initiative.
+   *
+   * @default false
+   * @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
+   */
+  interestCohort?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to gather information
+   * about the orientation of the device through the Magnetometer interface.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/magnetometer
+   */
+  magnetometer?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use audio input devices.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/microphone
+   */
+  microphone?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use the Web MIDI API.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/midi
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API
+   */
+  midi?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls the availability of mechanisms that enables the page author
+   * to take control over the behavior of spatial navigation, or to cancel
+   * it outright.
+   */
+  navigationOverride?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use the Payment Request API.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/payment
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API
+   */
+  payment?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to play a video in a Picture-in-Picture mode.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/picture-in-picture
+   */
+  pictureInPicture?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use the Web
+   * Authentication API to retrieve already stored public-key credentials.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/publickey-credentials-get
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
+   */
+  publicKeyCredentialsGet?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to make synchronous XMLHttpRequest requests.
+   *
+   * @default false
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/sync-xhr
+   */
+  syncXhr?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether the current document is allowed to use the WebUSB API.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/usb
+   * @see https://wicg.github.io/webusb/
+   */
+  usb?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether or not the current document is allowed to use the
+   * `Navigator.share()` API to share text, links, images, and other content
+   * to arbitrary destinations of user's choice.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/web-share
+   */
+  webShare?: false | (PermissionsPolicySpecialSource | string)[];
+
+  /**
+   * Controls whether or not the current document is allowed to use the WebXR
+   * Device API to interact with a WebXR session.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API
+   */
+  xrSpatialTracking?: false | (PermissionsPolicySpecialSource | string)[];
+}
+
+export function permissionsPolicyHeader(options: PermissionsPolicyOptions) {
+  let headerValue = '';
+
+  const {
+    accelerometer,
+    ambientLightSensor,
+    autoplay,
+    camera,
+    displayCapture,
+    documentDomain,
+    encryptedMedia,
+    executionWhileNotRendered,
+    executionWhileOutOfViewport,
+    fullScreen,
+    gamepad,
+    geolocation,
+    gyroscope,
+    interestCohort = false,
+    magnetometer,
+    microphone,
+    midi,
+    navigationOverride,
+    payment,
+    pictureInPicture,
+    publicKeyCredentialsGet,
+    syncXhr = false,
+    usb,
+    webShare,
+    xrSpatialTracking,
+  } = options;
+
+  const addDirective = (directive: string, value?: boolean | string[]) => {
+    if (value == null) return;
+
+    if (headerValue.length !== 0) headerValue += ', ';
+
+    if (value === false) {
+      headerValue += `${directive}=()`;
+    } else if (Array.isArray(value)) {
+      if (value.length === 0) {
+        headerValue += `${directive}=()`;
+      } else {
+        headerValue += `${directive}=(${value
+          .map((value) =>
+            SPECIAL_SOURCES.has(value) ? value : JSON.stringify(value),
+          )
+          .join(' ')})`;
+      }
+    }
+  };
+
+  addDirective('interest-cohort', interestCohort);
+  addDirective('accelerometer', accelerometer);
+  addDirective('ambient-light-sensor', ambientLightSensor);
+  addDirective('autoplay', autoplay);
+  addDirective('camera', camera);
+  addDirective('display-capture', displayCapture);
+  addDirective('document-domain', documentDomain);
+  addDirective('encrypted-media', encryptedMedia);
+  addDirective('execution-while-not-rendered', executionWhileNotRendered);
+  addDirective('execution-while-out-of-viewport', executionWhileOutOfViewport);
+  addDirective('fullscreen', fullScreen);
+  addDirective('gamepad', gamepad);
+  addDirective('geolocation', geolocation);
+  addDirective('gyroscope', gyroscope);
+  addDirective('interest-cohort', interestCohort);
+  addDirective('magnetometer', magnetometer);
+  addDirective('microphone', microphone);
+  addDirective('midi', midi);
+  addDirective('navigation-override', navigationOverride);
+  addDirective('payment', payment);
+  addDirective('picture-in-picture', pictureInPicture);
+  addDirective('publickey-credentials-get', publicKeyCredentialsGet);
+  addDirective('sync-xhr', syncXhr);
+  addDirective('usb', usb);
+  addDirective('web-share', webShare);
+  addDirective('xr-spatial-tracking', xrSpatialTracking);
+
+  return headerValue;
+}
+
+/**
+ * Options for creating a content security policy.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+ */
+export interface StrictTransportSecurityOptions {
+  /**
+   * The time, in seconds, that the browser should remember that a site is only to
+   * be accessed using HTTPS.
+   *
+   * @default 63_072_000
+   */
+  maxAge?: number;
+
+  /**
+   * Applies this rule to all of the site’s subdomains.
+   *
+   * @default true
+   */
+  includeSubDomains?: boolean;
+
+  /**
+   * Allows this site to be added to an HSTS preload service,
+   * which browsers can use to determine ahead of time what sites
+   * should default to being accessed via HTTPS.
+   *
+   * @default true
+   */
+  preload?: boolean;
+}
+
+export function strictTransportSecurityHeader(
+  options: StrictTransportSecurityOptions = {},
+) {
+  let headerValue = '';
+
+  const {
+    maxAge = STRICT_TRANSPORT_SECURITY_DEFAULT_MAX_AGE,
+    includeSubDomains = true,
+    preload = true,
+  } = options;
+
+  headerValue = String(maxAge);
+
+  if (includeSubDomains) headerValue += `; includeSubDomains`;
+  if (preload) headerValue += `; preload`;
+
+  return headerValue;
+}
diff --git a/packages/browser/source/server.ts b/packages/browser/source/server.ts
index 5fa5b460e..4d3ef95f5 100644
--- a/packages/browser/source/server.ts
+++ b/packages/browser/source/server.ts
@@ -16,6 +16,7 @@ import {encode} from './encoding.ts';
 import {CookieString} from './shared/cookies.ts';
 
 export * from './types.ts';
+export * from './headers.ts';
 
 export class BrowserResponse implements BrowserDetails {
   readonly title = new BrowserResponseTitle();
diff --git a/packages/browser/tsconfig.json b/packages/browser/tsconfig.json
index 9f8401fb1..b9165122d 100644
--- a/packages/browser/tsconfig.json
+++ b/packages/browser/tsconfig.json
@@ -1,4 +1,8 @@
 {
   "extends": "@quilted/typescript/tsconfig.package.json",
-  "references": [{"path": "../assets"}, {"path": "../signals"}]
+  "references": [
+    {"path": "../assets"},
+    {"path": "../http"},
+    {"path": "../signals"}
+  ]
 }
diff --git a/packages/create/templates/app-basic/App.tsx b/packages/create/templates/app-basic/App.tsx
index 185cfe73d..e789d7ab9 100644
--- a/packages/create/templates/app-basic/App.tsx
+++ b/packages/create/templates/app-basic/App.tsx
@@ -4,7 +4,7 @@ import {NotFound} from '@quilted/quilt/server';
 import {Navigation} from '@quilted/quilt/navigation';
 import {Localization} from '@quilted/quilt/localize';
 
-import {HTML} from './foundation/html.ts';
+import {Head} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
 import {Home} from './features/home.ts';
@@ -41,9 +41,8 @@ const routes = [
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
-      <HTML>
-        <Navigation router={context.router} routes={routes} context={context} />
-      </HTML>
+      <Head />
+      <Navigation router={context.router} routes={routes} context={context} />
     </AppContext>
   );
 }
diff --git a/packages/create/templates/app-basic/foundation/html.ts b/packages/create/templates/app-basic/foundation/html.ts
index 4b307d8bc..af771dbeb 100644
--- a/packages/create/templates/app-basic/foundation/html.ts
+++ b/packages/create/templates/app-basic/foundation/html.ts
@@ -1 +1 @@
-export {HTML} from './html/HTML.tsx';
+export {Head} from './html/Head.tsx';
diff --git a/packages/create/templates/app-basic/foundation/html/HTML.test.tsx b/packages/create/templates/app-basic/foundation/html/HTML.test.tsx
deleted file mode 100644
index 575022a53..000000000
--- a/packages/create/templates/app-basic/foundation/html/HTML.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {
-  CacheControl,
-  ContentSecurityPolicy,
-  SearchRobots,
-  Viewport,
-} from '@quilted/quilt/server';
-
-import {renderApp} from '~/tests/render.ts';
-
-import {HTML} from './HTML.tsx';
-
-describe('<HTML />', () => {
-  it('includes a responsive viewport tag', async () => {
-    const head = await renderApp(<HTML />);
-
-    expect(head).toContainPreactComponent(Viewport, {
-      cover: true,
-    });
-  });
-
-  it('prevents search robots from indexing the application', async () => {
-    const head = await renderApp(<HTML />);
-
-    expect(head).toContainPreactComponent(SearchRobots, {
-      index: false,
-      follow: false,
-    });
-  });
-
-  it('does not cache the response', async () => {
-    const headers = await renderApp(<HTML />);
-
-    expect(headers).toContainPreactComponent(CacheControl, {
-      cache: false,
-    });
-  });
-
-  it('adds a content security policy with a strict default policy', async () => {
-    const headers = await renderApp(<HTML />);
-
-    expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
-      defaultSources: ["'self'"],
-    });
-  });
-});
diff --git a/packages/create/templates/app-basic/foundation/html/HTML.tsx b/packages/create/templates/app-basic/foundation/html/HTML.tsx
deleted file mode 100644
index 383892ed1..000000000
--- a/packages/create/templates/app-basic/foundation/html/HTML.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import type {RenderableProps} from 'preact';
-import Env from 'quilt:module/env';
-import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
-import {
-  CacheControl,
-  ResponseHeader,
-  ContentSecurityPolicy,
-  PermissionsPolicy,
-  SearchRobots,
-  StrictTransportSecurity,
-  Viewport,
-} from '@quilted/quilt/server';
-
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function HTML({children}: RenderableProps<{}>) {
-  return (
-    <>
-      <Headers />
-      <Head />
-      {children}
-    </>
-  );
-}
-
-function Headers() {
-  const {url} = useBrowserRequest();
-  const isHttps = new URL(url).protocol === 'https:';
-
-  return (
-    <>
-      {/*
-       * Disables the cache for this page, which is generally the best option
-       * when dealing with authenticated content. If your site doesn’t have
-       * authentication, or you have a better cache policy that works for your
-       * app or deployment, make sure to update this component accordingly!
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-       */}
-      <CacheControl cache={false} />
-
-      {/*
-       * Sets a strict content security policy for this page. If you load
-       * assets from other origins, or want to allow some more dangerous
-       * resource loading techniques like `eval`, you can change the
-       * `defaultSources` to be less restrictive, or add additional items
-       * to the allowlist for more specific directives.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-       */}
-      <ContentSecurityPolicy
-        reportOnly={Env.MODE === 'development'}
-        // By default, only allow sources from the page’s origin.
-        defaultSources={["'self'"]}
-        // In development, allow connections to local websockets for hot reloading.
-        connectSources={
-          Env.MODE === 'development'
-            ? ["'self'", `${isHttps ? 'ws' : 'wss'}://localhost:*`]
-            : undefined
-        }
-        // Includes `'unsafe-inline'` because CSS is often necessary in development,
-        // and can be difficult to avoid in production.
-        styleSources={["'self'", "'unsafe-inline'"]}
-        // Includes `data:` so that an inline image can be used for the favicon.
-        // If you do not use the `emoji` or `blank` favicons in your app, and you
-        // do not load any other images as data URIs, you can remove this directive.
-        imageSources={["'self'", 'data:']}
-        // Don’t allow this page to be rendered as a frame from a different origin.
-        frameAncestors={false}
-        // Ensure that all requests made by this page are made over https, unless
-        // it is being served over http (typically, during local development)
-        upgradeInsecureRequests={isHttps}
-      />
-
-      {/*
-       * Sets a strict permissions policy for this page, which limits access
-       * to some native browser features.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
-       */}
-      <PermissionsPolicy
-        // Disables Google’s Federated Learning of Cohorts (“FLoC”) tracking initiative.
-        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
-        interestCohort={false}
-        // Don’t use synchronous XHRs!
-        // @see https://featurepolicy.info/policies/sync-xhr
-        syncXhr={false}
-        // Disables access to a few device APIs that are infrequently used
-        // and prone to abuse. If your application uses these APIs intentionally,
-        // feel free to remove the prop, or pass an array containing the origins
-        // that should be allowed to use this feature (e.g., `['self']` to allow
-        // only the main page’s origin).
-        camera={false}
-        microphone={false}
-        geolocation={false}
-      />
-
-      {/*
-       * Instructs browsers to only load this page over HTTPS using the
-       * `Strict-Transport-Security` header.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
-       */}
-      {isHttps && <StrictTransportSecurity />}
-
-      {/*
-       * Controls how much information about the current page is included in
-       * requests (through the `Referer` header). The default value
-       * (strict-origin-when-cross-origin) means that only the origin is included
-       * for cross-origin requests, while the origin, path, and querystring
-       * are included for same-origin requests.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
-       */}
-      <ResponseHeader
-        name="Referrer-Policy"
-        value="strict-origin-when-cross-origin"
-      />
-
-      {/*
-       * Instructs browsers to respect the MIME type in the `Content-Type` header.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
-       */}
-      <ResponseHeader name="X-Content-Type-Options" value="nosniff" />
-    </>
-  );
-}
-
-function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}
diff --git a/packages/create/templates/app-basic/foundation/html/Head.test.tsx b/packages/create/templates/app-basic/foundation/html/Head.test.tsx
new file mode 100644
index 000000000..a02800340
--- /dev/null
+++ b/packages/create/templates/app-basic/foundation/html/Head.test.tsx
@@ -0,0 +1,42 @@
+import {describe, it, expect} from 'vitest';
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+import {renderApp} from '~/tests/render.ts';
+
+import {Head} from './Head.tsx';
+
+describe('<Head />', () => {
+  it('sets the default title', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Title, {
+      children: 'App',
+    });
+  });
+
+  it('uses a fun, emoji favicon', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Favicon, {
+      emoji: '🧶',
+    });
+  });
+
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Viewport, {
+      cover: true,
+    });
+  });
+
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+});
diff --git a/packages/create/templates/app-basic/foundation/html/Head.tsx b/packages/create/templates/app-basic/foundation/html/Head.tsx
new file mode 100644
index 000000000..9751660b0
--- /dev/null
+++ b/packages/create/templates/app-basic/foundation/html/Head.tsx
@@ -0,0 +1,34 @@
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+// This component sets default `<head>` details of the HTML page. If you need
+// to customize any of these details based on conditions or application data, you
+// can render these same components deeper in the application to override these defaults.
+//
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}
diff --git a/packages/create/templates/app-basic/server.tsx b/packages/create/templates/app-basic/server.tsx
index a4b9a4243..0ee78575c 100644
--- a/packages/create/templates/app-basic/server.tsx
+++ b/packages/create/templates/app-basic/server.tsx
@@ -1,7 +1,16 @@
 import '@quilted/quilt/globals';
+
 import {RequestRouter} from '@quilted/quilt/request-router';
-import {renderAppToHTMLResponse} from '@quilted/quilt/server';
 import {Router} from '@quilted/quilt/navigation';
+import {
+  renderAppToHTMLResponse,
+  cacheControlHeader,
+  contentSecurityPolicyHeader,
+  permissionsPolicyHeader,
+  strictTransportSecurityHeader,
+} from '@quilted/quilt/server';
+
+import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';
@@ -11,15 +20,92 @@ import {App} from './App.tsx';
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
-// For all GET requests, render our React application.
+// For all GET requests, render our Preact application.
 router.get(async (request) => {
   const context = {
     router: new Router(request.url),
   } satisfies AppContext;
 
+  const isHttps = request.url.startsWith('https://');
+
   const response = await renderAppToHTMLResponse(<App context={context} />, {
     request,
     assets,
+    headers: {
+      // Controls how much information about the current page is included in
+      // requests (through the `Referer` header). The default value
+      // (strict-origin-when-cross-origin) means that only the origin is included
+      // for cross-origin requests, while the origin, path, and querystring
+      // are included for same-origin requests.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
+      'Referrer-Policy': 'strict-origin-when-cross-origin',
+
+      // Disables the cache for this page, which is generally the best option
+      // when dealing with authenticated content. If your site doesn't have
+      // authentication, or you have a better cache policy that works for your
+      // app or deployment, make sure to update this component accordingly!
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+      'Cache-Control': cacheControlHeader({
+        cache: false,
+      }),
+
+      // Sets a strict content security policy for this page. If you load
+      // assets from other origins, or want to allow some more dangerous
+      // resource loading techniques like `eval`, you can change the
+      // `defaultSources` to be less restrictive, or add additional items
+      // to the allowlist for more specific directives.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+      'Content-Security-Policy': contentSecurityPolicyHeader({
+        // By default, only allow sources from the page's origin.
+        defaultSources: ["'self'"],
+        // In development, allow connections to local websockets for hot reloading.
+        connectSources:
+          Env.MODE === 'development'
+            ? ["'self'", `${isHttps ? 'ws' : 'wss'}://localhost:*`]
+            : undefined,
+        // Includes `'unsafe-inline'` because CSS is often necessary in development,
+        // and can be difficult to avoid in production.
+        styleSources: ["'self'", "'unsafe-inline'"],
+        // Includes `data:` so that an inline image can be used for the favicon.
+        // If you do not use the `emoji` or `blank` favicons in your app, and you
+        // do not load any other images as data URIs, you can remove this directive.
+        imageSources: ["'self'", 'data:'],
+        // Don't allow this page to be rendered as a frame from a different origin.
+        frameAncestors: false,
+        // Ensure that all requests made by this page are made over https, unless
+        // it is being served over http (typically, during local development)
+        upgradeInsecureRequests: isHttps,
+      }),
+
+      // Sets a strict permissions policy for this page, which limits access
+      // to some native browser features.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
+      'Permissions-Policy': permissionsPolicyHeader({
+        // Disables Google's Federated Learning of Cohorts ("FLoC") tracking initiative.
+        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
+        interestCohort: false,
+        // Don't use synchronous XHRs!
+        // @see https://featurepolicy.info/policies/sync-xhr
+        syncXhr: false,
+        // Disables access to a few device APIs that are infrequently used
+        // and prone to abuse. If your application uses these APIs intentionally,
+        // feel free to remove the prop, or pass an array containing the origins
+        // that should be allowed to use this feature (e.g., `['self']` to allow
+        // only the main page's origin).
+        camera: false,
+        microphone: false,
+        geolocation: false,
+      }),
+
+      // Instructs browsers to only load this page over HTTPS.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
+      'Strict-Transport-Security': strictTransportSecurityHeader(),
+    },
   });
 
   return response;
diff --git a/packages/create/templates/app-empty/server.tsx b/packages/create/templates/app-empty/server.tsx
index 58c8dd2b6..bd4203884 100644
--- a/packages/create/templates/app-empty/server.tsx
+++ b/packages/create/templates/app-empty/server.tsx
@@ -1,4 +1,5 @@
 import '@quilted/quilt/globals';
+
 import {RequestRouter} from '@quilted/quilt/request-router';
 import {renderAppToHTMLResponse} from '@quilted/quilt/server';
 import {BrowserAssets} from 'quilt:module/assets';
@@ -8,7 +9,7 @@ import {App} from './App.tsx';
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
-// For all GET requests, render our React application.
+// For all GET requests, render our Preact application.
 router.get(async (request) => {
   const response = await renderAppToHTMLResponse(<App />, {
     request,
diff --git a/packages/create/templates/app-graphql/App.tsx b/packages/create/templates/app-graphql/App.tsx
index 1008cbbc5..36f271eb3 100644
--- a/packages/create/templates/app-graphql/App.tsx
+++ b/packages/create/templates/app-graphql/App.tsx
@@ -5,7 +5,7 @@ import {GraphQLContext} from '@quilted/quilt/graphql';
 import {Navigation} from '@quilted/quilt/navigation';
 import {Localization} from '@quilted/quilt/localize';
 
-import {HTML} from './foundation/html.ts';
+import {Head} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
 import {Home, homeQuery} from './features/home.ts';
@@ -42,9 +42,8 @@ const routes = [
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
-      <HTML>
-        <Navigation router={context.router} routes={routes} context={context} />
-      </HTML>
+      <Head />
+      <Navigation router={context.router} routes={routes} context={context} />
     </AppContext>
   );
 }
diff --git a/packages/create/templates/app-graphql/foundation/html.ts b/packages/create/templates/app-graphql/foundation/html.ts
index 4b307d8bc..af771dbeb 100644
--- a/packages/create/templates/app-graphql/foundation/html.ts
+++ b/packages/create/templates/app-graphql/foundation/html.ts
@@ -1 +1 @@
-export {HTML} from './html/HTML.tsx';
+export {Head} from './html/Head.tsx';
diff --git a/packages/create/templates/app-graphql/foundation/html/HTML.test.tsx b/packages/create/templates/app-graphql/foundation/html/HTML.test.tsx
deleted file mode 100644
index 575022a53..000000000
--- a/packages/create/templates/app-graphql/foundation/html/HTML.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {
-  CacheControl,
-  ContentSecurityPolicy,
-  SearchRobots,
-  Viewport,
-} from '@quilted/quilt/server';
-
-import {renderApp} from '~/tests/render.ts';
-
-import {HTML} from './HTML.tsx';
-
-describe('<HTML />', () => {
-  it('includes a responsive viewport tag', async () => {
-    const head = await renderApp(<HTML />);
-
-    expect(head).toContainPreactComponent(Viewport, {
-      cover: true,
-    });
-  });
-
-  it('prevents search robots from indexing the application', async () => {
-    const head = await renderApp(<HTML />);
-
-    expect(head).toContainPreactComponent(SearchRobots, {
-      index: false,
-      follow: false,
-    });
-  });
-
-  it('does not cache the response', async () => {
-    const headers = await renderApp(<HTML />);
-
-    expect(headers).toContainPreactComponent(CacheControl, {
-      cache: false,
-    });
-  });
-
-  it('adds a content security policy with a strict default policy', async () => {
-    const headers = await renderApp(<HTML />);
-
-    expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
-      defaultSources: ["'self'"],
-    });
-  });
-});
diff --git a/packages/create/templates/app-graphql/foundation/html/HTML.tsx b/packages/create/templates/app-graphql/foundation/html/HTML.tsx
deleted file mode 100644
index 383892ed1..000000000
--- a/packages/create/templates/app-graphql/foundation/html/HTML.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import type {RenderableProps} from 'preact';
-import Env from 'quilt:module/env';
-import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
-import {
-  CacheControl,
-  ResponseHeader,
-  ContentSecurityPolicy,
-  PermissionsPolicy,
-  SearchRobots,
-  StrictTransportSecurity,
-  Viewport,
-} from '@quilted/quilt/server';
-
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function HTML({children}: RenderableProps<{}>) {
-  return (
-    <>
-      <Headers />
-      <Head />
-      {children}
-    </>
-  );
-}
-
-function Headers() {
-  const {url} = useBrowserRequest();
-  const isHttps = new URL(url).protocol === 'https:';
-
-  return (
-    <>
-      {/*
-       * Disables the cache for this page, which is generally the best option
-       * when dealing with authenticated content. If your site doesn’t have
-       * authentication, or you have a better cache policy that works for your
-       * app or deployment, make sure to update this component accordingly!
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-       */}
-      <CacheControl cache={false} />
-
-      {/*
-       * Sets a strict content security policy for this page. If you load
-       * assets from other origins, or want to allow some more dangerous
-       * resource loading techniques like `eval`, you can change the
-       * `defaultSources` to be less restrictive, or add additional items
-       * to the allowlist for more specific directives.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-       */}
-      <ContentSecurityPolicy
-        reportOnly={Env.MODE === 'development'}
-        // By default, only allow sources from the page’s origin.
-        defaultSources={["'self'"]}
-        // In development, allow connections to local websockets for hot reloading.
-        connectSources={
-          Env.MODE === 'development'
-            ? ["'self'", `${isHttps ? 'ws' : 'wss'}://localhost:*`]
-            : undefined
-        }
-        // Includes `'unsafe-inline'` because CSS is often necessary in development,
-        // and can be difficult to avoid in production.
-        styleSources={["'self'", "'unsafe-inline'"]}
-        // Includes `data:` so that an inline image can be used for the favicon.
-        // If you do not use the `emoji` or `blank` favicons in your app, and you
-        // do not load any other images as data URIs, you can remove this directive.
-        imageSources={["'self'", 'data:']}
-        // Don’t allow this page to be rendered as a frame from a different origin.
-        frameAncestors={false}
-        // Ensure that all requests made by this page are made over https, unless
-        // it is being served over http (typically, during local development)
-        upgradeInsecureRequests={isHttps}
-      />
-
-      {/*
-       * Sets a strict permissions policy for this page, which limits access
-       * to some native browser features.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
-       */}
-      <PermissionsPolicy
-        // Disables Google’s Federated Learning of Cohorts (“FLoC”) tracking initiative.
-        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
-        interestCohort={false}
-        // Don’t use synchronous XHRs!
-        // @see https://featurepolicy.info/policies/sync-xhr
-        syncXhr={false}
-        // Disables access to a few device APIs that are infrequently used
-        // and prone to abuse. If your application uses these APIs intentionally,
-        // feel free to remove the prop, or pass an array containing the origins
-        // that should be allowed to use this feature (e.g., `['self']` to allow
-        // only the main page’s origin).
-        camera={false}
-        microphone={false}
-        geolocation={false}
-      />
-
-      {/*
-       * Instructs browsers to only load this page over HTTPS using the
-       * `Strict-Transport-Security` header.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
-       */}
-      {isHttps && <StrictTransportSecurity />}
-
-      {/*
-       * Controls how much information about the current page is included in
-       * requests (through the `Referer` header). The default value
-       * (strict-origin-when-cross-origin) means that only the origin is included
-       * for cross-origin requests, while the origin, path, and querystring
-       * are included for same-origin requests.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
-       */}
-      <ResponseHeader
-        name="Referrer-Policy"
-        value="strict-origin-when-cross-origin"
-      />
-
-      {/*
-       * Instructs browsers to respect the MIME type in the `Content-Type` header.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
-       */}
-      <ResponseHeader name="X-Content-Type-Options" value="nosniff" />
-    </>
-  );
-}
-
-function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}
diff --git a/packages/create/templates/app-graphql/foundation/html/Head.test.tsx b/packages/create/templates/app-graphql/foundation/html/Head.test.tsx
new file mode 100644
index 000000000..a02800340
--- /dev/null
+++ b/packages/create/templates/app-graphql/foundation/html/Head.test.tsx
@@ -0,0 +1,42 @@
+import {describe, it, expect} from 'vitest';
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+import {renderApp} from '~/tests/render.ts';
+
+import {Head} from './Head.tsx';
+
+describe('<Head />', () => {
+  it('sets the default title', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Title, {
+      children: 'App',
+    });
+  });
+
+  it('uses a fun, emoji favicon', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Favicon, {
+      emoji: '🧶',
+    });
+  });
+
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Viewport, {
+      cover: true,
+    });
+  });
+
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+});
diff --git a/packages/create/templates/app-graphql/foundation/html/Head.tsx b/packages/create/templates/app-graphql/foundation/html/Head.tsx
new file mode 100644
index 000000000..9751660b0
--- /dev/null
+++ b/packages/create/templates/app-graphql/foundation/html/Head.tsx
@@ -0,0 +1,34 @@
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+// This component sets default `<head>` details of the HTML page. If you need
+// to customize any of these details based on conditions or application data, you
+// can render these same components deeper in the application to override these defaults.
+//
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}
diff --git a/packages/create/templates/app-graphql/server.tsx b/packages/create/templates/app-graphql/server.tsx
index 9515aa720..65966b4c8 100644
--- a/packages/create/templates/app-graphql/server.tsx
+++ b/packages/create/templates/app-graphql/server.tsx
@@ -2,6 +2,15 @@ import '@quilted/quilt/globals';
 
 import {RequestRouter, JSONResponse} from '@quilted/quilt/request-router';
 import {Router} from '@quilted/quilt/navigation';
+import {
+  renderAppToHTMLResponse,
+  cacheControlHeader,
+  contentSecurityPolicyHeader,
+  permissionsPolicyHeader,
+  strictTransportSecurityHeader,
+} from '@quilted/quilt/server';
+
+import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';
@@ -22,18 +31,12 @@ router.post('/api/graphql', async (request) => {
   return new JSONResponse(result);
 });
 
-// For all GET requests, render our React application.
+// For all GET requests, render our Preact application.
 router.get(async (request) => {
-  const [
-    {App},
-    {performGraphQLOperation},
-    {GraphQLCache},
-    {renderAppToHTMLResponse},
-  ] = await Promise.all([
+  const [{App}, {performGraphQLOperation}, {GraphQLCache}] = await Promise.all([
     import('./App.tsx'),
     import('./server/graphql.ts'),
     import('@quilted/quilt/graphql'),
-    import('@quilted/quilt/server'),
   ]);
 
   const context = {
@@ -44,9 +47,86 @@ router.get(async (request) => {
     },
   } satisfies AppContext;
 
+  const isHttps = request.url.startsWith('https://');
+
   const response = await renderAppToHTMLResponse(<App context={context} />, {
     request,
     assets,
+    headers: {
+      // Controls how much information about the current page is included in
+      // requests (through the `Referer` header). The default value
+      // (strict-origin-when-cross-origin) means that only the origin is included
+      // for cross-origin requests, while the origin, path, and querystring
+      // are included for same-origin requests.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
+      'Referrer-Policy': 'strict-origin-when-cross-origin',
+
+      // Disables the cache for this page, which is generally the best option
+      // when dealing with authenticated content. If your site doesn't have
+      // authentication, or you have a better cache policy that works for your
+      // app or deployment, make sure to update this component accordingly!
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+      'Cache-Control': cacheControlHeader({
+        cache: false,
+      }),
+
+      // Sets a strict content security policy for this page. If you load
+      // assets from other origins, or want to allow some more dangerous
+      // resource loading techniques like `eval`, you can change the
+      // `defaultSources` to be less restrictive, or add additional items
+      // to the allowlist for more specific directives.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+      'Content-Security-Policy': contentSecurityPolicyHeader({
+        // By default, only allow sources from the page's origin.
+        defaultSources: ["'self'"],
+        // In development, allow connections to local websockets for hot reloading.
+        connectSources:
+          Env.MODE === 'development'
+            ? ["'self'", `${isHttps ? 'ws' : 'wss'}://localhost:*`]
+            : undefined,
+        // Includes `'unsafe-inline'` because CSS is often necessary in development,
+        // and can be difficult to avoid in production.
+        styleSources: ["'self'", "'unsafe-inline'"],
+        // Includes `data:` so that an inline image can be used for the favicon.
+        // If you do not use the `emoji` or `blank` favicons in your app, and you
+        // do not load any other images as data URIs, you can remove this directive.
+        imageSources: ["'self'", 'data:'],
+        // Don't allow this page to be rendered as a frame from a different origin.
+        frameAncestors: false,
+        // Ensure that all requests made by this page are made over https, unless
+        // it is being served over http (typically, during local development)
+        upgradeInsecureRequests: isHttps,
+      }),
+
+      // Sets a strict permissions policy for this page, which limits access
+      // to some native browser features.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
+      'Permissions-Policy': permissionsPolicyHeader({
+        // Disables Google's Federated Learning of Cohorts ("FLoC") tracking initiative.
+        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
+        interestCohort: false,
+        // Don't use synchronous XHRs!
+        // @see https://featurepolicy.info/policies/sync-xhr
+        syncXhr: false,
+        // Disables access to a few device APIs that are infrequently used
+        // and prone to abuse. If your application uses these APIs intentionally,
+        // feel free to remove the prop, or pass an array containing the origins
+        // that should be allowed to use this feature (e.g., `['self']` to allow
+        // only the main page's origin).
+        camera: false,
+        microphone: false,
+        geolocation: false,
+      }),
+
+      // Instructs browsers to only load this page over HTTPS.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
+      'Strict-Transport-Security': strictTransportSecurityHeader(),
+    },
   });
 
   return response;
diff --git a/packages/create/templates/app-trpc/App.tsx b/packages/create/templates/app-trpc/App.tsx
index 0de1dbf02..f0f42b3f6 100644
--- a/packages/create/templates/app-trpc/App.tsx
+++ b/packages/create/templates/app-trpc/App.tsx
@@ -6,7 +6,7 @@ import {Localization} from '@quilted/quilt/localize';
 
 import {ReactQueryContext} from '@quilted/react-query';
 
-import {HTML} from './foundation/html.ts';
+import {Head} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
 import {Home} from './features/home.ts';
@@ -44,9 +44,8 @@ const routes = [
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
-      <HTML>
-        <Navigation router={context.router} routes={routes} context={context} />
-      </HTML>
+      <Head />
+      <Navigation router={context.router} routes={routes} context={context} />
     </AppContext>
   );
 }
diff --git a/packages/create/templates/app-trpc/foundation/html.ts b/packages/create/templates/app-trpc/foundation/html.ts
index 4b307d8bc..af771dbeb 100644
--- a/packages/create/templates/app-trpc/foundation/html.ts
+++ b/packages/create/templates/app-trpc/foundation/html.ts
@@ -1 +1 @@
-export {HTML} from './html/HTML.tsx';
+export {Head} from './html/Head.tsx';
diff --git a/packages/create/templates/app-trpc/foundation/html/HTML.test.tsx b/packages/create/templates/app-trpc/foundation/html/HTML.test.tsx
deleted file mode 100644
index 575022a53..000000000
--- a/packages/create/templates/app-trpc/foundation/html/HTML.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {describe, it, expect} from 'vitest';
-import {
-  CacheControl,
-  ContentSecurityPolicy,
-  SearchRobots,
-  Viewport,
-} from '@quilted/quilt/server';
-
-import {renderApp} from '~/tests/render.ts';
-
-import {HTML} from './HTML.tsx';
-
-describe('<HTML />', () => {
-  it('includes a responsive viewport tag', async () => {
-    const head = await renderApp(<HTML />);
-
-    expect(head).toContainPreactComponent(Viewport, {
-      cover: true,
-    });
-  });
-
-  it('prevents search robots from indexing the application', async () => {
-    const head = await renderApp(<HTML />);
-
-    expect(head).toContainPreactComponent(SearchRobots, {
-      index: false,
-      follow: false,
-    });
-  });
-
-  it('does not cache the response', async () => {
-    const headers = await renderApp(<HTML />);
-
-    expect(headers).toContainPreactComponent(CacheControl, {
-      cache: false,
-    });
-  });
-
-  it('adds a content security policy with a strict default policy', async () => {
-    const headers = await renderApp(<HTML />);
-
-    expect(headers).toContainPreactComponent(ContentSecurityPolicy, {
-      defaultSources: ["'self'"],
-    });
-  });
-});
diff --git a/packages/create/templates/app-trpc/foundation/html/HTML.tsx b/packages/create/templates/app-trpc/foundation/html/HTML.tsx
deleted file mode 100644
index 383892ed1..000000000
--- a/packages/create/templates/app-trpc/foundation/html/HTML.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import type {RenderableProps} from 'preact';
-import Env from 'quilt:module/env';
-import {Title, Favicon, useBrowserRequest} from '@quilted/quilt/browser';
-import {
-  CacheControl,
-  ResponseHeader,
-  ContentSecurityPolicy,
-  PermissionsPolicy,
-  SearchRobots,
-  StrictTransportSecurity,
-  Viewport,
-} from '@quilted/quilt/server';
-
-// This component sets details of the HTML page. If you need to customize
-// any of these details based on conditions like the active route, or some
-// state about the user, you can move these components to wherever in your
-// application you can read that state.
-//
-// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
-export function HTML({children}: RenderableProps<{}>) {
-  return (
-    <>
-      <Headers />
-      <Head />
-      {children}
-    </>
-  );
-}
-
-function Headers() {
-  const {url} = useBrowserRequest();
-  const isHttps = new URL(url).protocol === 'https:';
-
-  return (
-    <>
-      {/*
-       * Disables the cache for this page, which is generally the best option
-       * when dealing with authenticated content. If your site doesn’t have
-       * authentication, or you have a better cache policy that works for your
-       * app or deployment, make sure to update this component accordingly!
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
-       */}
-      <CacheControl cache={false} />
-
-      {/*
-       * Sets a strict content security policy for this page. If you load
-       * assets from other origins, or want to allow some more dangerous
-       * resource loading techniques like `eval`, you can change the
-       * `defaultSources` to be less restrictive, or add additional items
-       * to the allowlist for more specific directives.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-       */}
-      <ContentSecurityPolicy
-        reportOnly={Env.MODE === 'development'}
-        // By default, only allow sources from the page’s origin.
-        defaultSources={["'self'"]}
-        // In development, allow connections to local websockets for hot reloading.
-        connectSources={
-          Env.MODE === 'development'
-            ? ["'self'", `${isHttps ? 'ws' : 'wss'}://localhost:*`]
-            : undefined
-        }
-        // Includes `'unsafe-inline'` because CSS is often necessary in development,
-        // and can be difficult to avoid in production.
-        styleSources={["'self'", "'unsafe-inline'"]}
-        // Includes `data:` so that an inline image can be used for the favicon.
-        // If you do not use the `emoji` or `blank` favicons in your app, and you
-        // do not load any other images as data URIs, you can remove this directive.
-        imageSources={["'self'", 'data:']}
-        // Don’t allow this page to be rendered as a frame from a different origin.
-        frameAncestors={false}
-        // Ensure that all requests made by this page are made over https, unless
-        // it is being served over http (typically, during local development)
-        upgradeInsecureRequests={isHttps}
-      />
-
-      {/*
-       * Sets a strict permissions policy for this page, which limits access
-       * to some native browser features.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
-       */}
-      <PermissionsPolicy
-        // Disables Google’s Federated Learning of Cohorts (“FLoC”) tracking initiative.
-        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
-        interestCohort={false}
-        // Don’t use synchronous XHRs!
-        // @see https://featurepolicy.info/policies/sync-xhr
-        syncXhr={false}
-        // Disables access to a few device APIs that are infrequently used
-        // and prone to abuse. If your application uses these APIs intentionally,
-        // feel free to remove the prop, or pass an array containing the origins
-        // that should be allowed to use this feature (e.g., `['self']` to allow
-        // only the main page’s origin).
-        camera={false}
-        microphone={false}
-        geolocation={false}
-      />
-
-      {/*
-       * Instructs browsers to only load this page over HTTPS using the
-       * `Strict-Transport-Security` header.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
-       */}
-      {isHttps && <StrictTransportSecurity />}
-
-      {/*
-       * Controls how much information about the current page is included in
-       * requests (through the `Referer` header). The default value
-       * (strict-origin-when-cross-origin) means that only the origin is included
-       * for cross-origin requests, while the origin, path, and querystring
-       * are included for same-origin requests.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
-       */}
-      <ResponseHeader
-        name="Referrer-Policy"
-        value="strict-origin-when-cross-origin"
-      />
-
-      {/*
-       * Instructs browsers to respect the MIME type in the `Content-Type` header.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
-       */}
-      <ResponseHeader name="X-Content-Type-Options" value="nosniff" />
-    </>
-  );
-}
-
-function Head() {
-  return (
-    <>
-      {/* Sets the default `<title>` for this application. */}
-      <Title>App</Title>
-
-      {/*
-       * Sets the default favicon used by the application. You can
-       * change this to a different emoji, make it `blank`, or pass
-       * a URL with the `source` prop.
-       */}
-      <Favicon emoji="🧶" />
-
-      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
-      <Viewport cover />
-
-      {/*
-       * Disables all search indexing for this application. If you are
-       * building an unauthenticated app, you probably want to remove
-       * this component, or update it to control how your site is indexed
-       * by search engines.
-       */}
-      <SearchRobots index={false} follow={false} />
-    </>
-  );
-}
diff --git a/packages/create/templates/app-trpc/foundation/html/Head.test.tsx b/packages/create/templates/app-trpc/foundation/html/Head.test.tsx
new file mode 100644
index 000000000..a02800340
--- /dev/null
+++ b/packages/create/templates/app-trpc/foundation/html/Head.test.tsx
@@ -0,0 +1,42 @@
+import {describe, it, expect} from 'vitest';
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+import {renderApp} from '~/tests/render.ts';
+
+import {Head} from './Head.tsx';
+
+describe('<Head />', () => {
+  it('sets the default title', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Title, {
+      children: 'App',
+    });
+  });
+
+  it('uses a fun, emoji favicon', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Favicon, {
+      emoji: '🧶',
+    });
+  });
+
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Viewport, {
+      cover: true,
+    });
+  });
+
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+});
diff --git a/packages/create/templates/app-trpc/foundation/html/Head.tsx b/packages/create/templates/app-trpc/foundation/html/Head.tsx
new file mode 100644
index 000000000..9751660b0
--- /dev/null
+++ b/packages/create/templates/app-trpc/foundation/html/Head.tsx
@@ -0,0 +1,34 @@
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+// This component sets default `<head>` details of the HTML page. If you need
+// to customize any of these details based on conditions or application data, you
+// can render these same components deeper in the application to override these defaults.
+//
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}
diff --git a/packages/create/templates/app-trpc/server.tsx b/packages/create/templates/app-trpc/server.tsx
index c0a9ac477..76ed90563 100644
--- a/packages/create/templates/app-trpc/server.tsx
+++ b/packages/create/templates/app-trpc/server.tsx
@@ -1,5 +1,16 @@
 import '@quilted/quilt/globals';
+
 import {RequestRouter} from '@quilted/quilt/request-router';
+import {Router} from '@quilted/quilt/navigation';
+import {
+  renderAppToHTMLResponse,
+  cacheControlHeader,
+  contentSecurityPolicyHeader,
+  permissionsPolicyHeader,
+  strictTransportSecurityHeader,
+} from '@quilted/quilt/server';
+
+import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import {createDirectClient} from '@quilted/trpc/server';
@@ -27,13 +38,10 @@ router.any(
 
 // For all GET requests, render our React application.
 router.get(async (request) => {
-  const [{App}, {renderAppToHTMLResponse}, {Router}, {QueryClient}] =
-    await Promise.all([
-      import('./App.tsx'),
-      import('@quilted/quilt/server'),
-      import('@quilted/quilt/navigation'),
-      import('@tanstack/react-query'),
-    ]);
+  const [{App}, {QueryClient}] = await Promise.all([
+    import('./App.tsx'),
+    import('@tanstack/react-query'),
+  ]);
 
   const context = {
     router: new Router(request.url),
@@ -41,9 +49,86 @@ router.get(async (request) => {
     queryClient: new QueryClient(),
   } satisfies AppContext;
 
+  const isHttps = request.url.startsWith('https://');
+
   const response = await renderAppToHTMLResponse(<App context={context} />, {
     request,
     assets,
+    headers: {
+      // Controls how much information about the current page is included in
+      // requests (through the `Referer` header). The default value
+      // (strict-origin-when-cross-origin) means that only the origin is included
+      // for cross-origin requests, while the origin, path, and querystring
+      // are included for same-origin requests.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
+      'Referrer-Policy': 'strict-origin-when-cross-origin',
+
+      // Disables the cache for this page, which is generally the best option
+      // when dealing with authenticated content. If your site doesn't have
+      // authentication, or you have a better cache policy that works for your
+      // app or deployment, make sure to update this component accordingly!
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+      'Cache-Control': cacheControlHeader({
+        cache: false,
+      }),
+
+      // Sets a strict content security policy for this page. If you load
+      // assets from other origins, or want to allow some more dangerous
+      // resource loading techniques like `eval`, you can change the
+      // `defaultSources` to be less restrictive, or add additional items
+      // to the allowlist for more specific directives.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+      'Content-Security-Policy': contentSecurityPolicyHeader({
+        // By default, only allow sources from the page's origin.
+        defaultSources: ["'self'"],
+        // In development, allow connections to local websockets for hot reloading.
+        connectSources:
+          Env.MODE === 'development'
+            ? ["'self'", `${isHttps ? 'ws' : 'wss'}://localhost:*`]
+            : undefined,
+        // Includes `'unsafe-inline'` because CSS is often necessary in development,
+        // and can be difficult to avoid in production.
+        styleSources: ["'self'", "'unsafe-inline'"],
+        // Includes `data:` so that an inline image can be used for the favicon.
+        // If you do not use the `emoji` or `blank` favicons in your app, and you
+        // do not load any other images as data URIs, you can remove this directive.
+        imageSources: ["'self'", 'data:'],
+        // Don't allow this page to be rendered as a frame from a different origin.
+        frameAncestors: false,
+        // Ensure that all requests made by this page are made over https, unless
+        // it is being served over http (typically, during local development)
+        upgradeInsecureRequests: isHttps,
+      }),
+
+      // Sets a strict permissions policy for this page, which limits access
+      // to some native browser features.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
+      'Permissions-Policy': permissionsPolicyHeader({
+        // Disables Google's Federated Learning of Cohorts ("FLoC") tracking initiative.
+        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
+        interestCohort: false,
+        // Don't use synchronous XHRs!
+        // @see https://featurepolicy.info/policies/sync-xhr
+        syncXhr: false,
+        // Disables access to a few device APIs that are infrequently used
+        // and prone to abuse. If your application uses these APIs intentionally,
+        // feel free to remove the prop, or pass an array containing the origins
+        // that should be allowed to use this feature (e.g., `['self']` to allow
+        // only the main page's origin).
+        camera: false,
+        microphone: false,
+        geolocation: false,
+      }),
+
+      // Instructs browsers to only load this page over HTTPS.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
+      'Strict-Transport-Security': strictTransportSecurityHeader(),
+    },
   });
 
   return response;
diff --git a/packages/preact-browser/source/server/hooks/cache-control.ts b/packages/preact-browser/source/server/hooks/cache-control.ts
index 7863a5fb7..09516f0fe 100644
--- a/packages/preact-browser/source/server/hooks/cache-control.ts
+++ b/packages/preact-browser/source/server/hooks/cache-control.ts
@@ -1,81 +1,9 @@
+import {
+  cacheControlHeader,
+  type CacheControlOptions,
+} from '@quilted/browser/server';
 import {useBrowserResponseAction} from './browser-response-action.ts';
 
-/**
- * Options for controlling the Cache-Control header of the current
- * response.
- *
- * @see https://csswizardry.com/2019/03/cache-control-for-civilians/
- */
-export type CacheControlOptions =
-  | {
-      /**
-       * Whether this cache control directive applies only to “private”
-       * caches, which is typically the end user’s browser cache for
-       * applications using Quilt. When not set, the cache-control directive
-       * will be set to `public`, which allows all caches (including CDNs,
-       * proxies, and the like) to cache the content.
-       */
-      private?: true;
-      /**
-       * Completely disable caching of this response. Passing this option
-       * sets the `Cache-Control` header to `no-store`.
-       */
-      cache: false;
-      maxAge?: never;
-      immutable?: never;
-      revalidate?: never;
-    }
-  | {
-      /**
-       * Whether this cache control directive applies only to “private”
-       * caches, which is typically the end user’s browser cache for
-       * applications using Quilt. When not set, the cache-control directive
-       * will be set to `public`, which allows all caches (including CDNs,
-       * proxies, and the like) to cache the content.
-       */
-      private?: true;
-      cache?: never;
-      /**
-       * The number of seconds, from the time of this request, that
-       * the content is considered “fresh”.
-       */
-      maxAge?: number;
-      immutable?: never;
-      /**
-       * Controls how clients should revalidate their cached content.
-       * If this option is set to `true`, the resulting `Cache-Control`
-       * header will have the `must-revalidate` directive, which asks
-       * clients to revalidate their content after the `maxAge` period
-       * has expired.
-       *
-       * If you instead pass `{allowStale: number}`, the resulting
-       * `Cache-Control` header will have the `stale-while-revalidate`
-       * directive, which allows caches that support it to use the stale
-       * version from the cache while they perform revalidation in the
-       * background.
-       */
-      revalidate?: boolean | {allowStale: number};
-    }
-  | {
-      /**
-       * Whether this cache control directive applies only to “private”
-       * caches, which is typically the end user’s browser cache for
-       * applications using Quilt. When not set, the cache-control directive
-       * will be set to `public`, which allows all caches (including CDNs,
-       * proxies, and the like) to cache the content.
-       */
-      private?: true;
-      cache?: never;
-      maxAge?: number;
-      /**
-       * Declares that this request is immutable. This means that it is
-       * assumed to never change, and clients will never attempt to
-       * revalidate the content. Be careful when using this option!
-       */
-      immutable?: boolean;
-      revalidate?: never;
-    };
-
 /**
  * A hook to set the `Cache-Control` header on the response. If you provide
  * a string, this value will be used directly as the header value. Alternatively,
@@ -91,37 +19,7 @@ export function useCacheControl(value: string | CacheControlOptions) {
     if (typeof value === 'string') {
       normalizedValue = value;
     } else {
-      const {
-        private: isPrivate,
-        cache,
-        immutable,
-        maxAge = immutable ? 31536000 : undefined,
-        revalidate,
-      } = value;
-
-      normalizedValue = isPrivate ? 'private' : 'public';
-
-      const appendToHeader = (value: string) => {
-        normalizedValue = `${normalizedValue}, ${value}`;
-      };
-
-      if (cache === false) {
-        appendToHeader('no-store');
-      }
-
-      if (maxAge === 0 && revalidate === true) {
-        appendToHeader('no-cache');
-      } else if (typeof maxAge === 'number' || revalidate) {
-        appendToHeader(`max-age=${maxAge ?? 0}`);
-
-        if (revalidate === true) {
-          appendToHeader('must-revalidate');
-        } else if (typeof revalidate === 'object') {
-          appendToHeader(`stale-while-revalidate=${revalidate.allowStale}`);
-        }
-      }
-
-      if (immutable) appendToHeader('immutable');
+      normalizedValue = cacheControlHeader(value);
     }
 
     response.headers.append('Cache-Control', normalizedValue);
diff --git a/packages/preact-browser/source/server/hooks/content-security-policy.ts b/packages/preact-browser/source/server/hooks/content-security-policy.ts
index 5ab319ab4..48f3892b8 100644
--- a/packages/preact-browser/source/server/hooks/content-security-policy.ts
+++ b/packages/preact-browser/source/server/hooks/content-security-policy.ts
@@ -1,7 +1,7 @@
-import type {
-  ContentSecurityPolicySandboxAllow,
-  ContentSecurityPolicySpecialSource,
-} from '@quilted/http';
+import {
+  contentSecurityPolicyHeader,
+  type ContentSecurityPolicyOptions,
+} from '@quilted/browser/server';
 
 import {useBrowserResponseAction} from './browser-response-action.ts';
 
@@ -10,320 +10,8 @@ import {useBrowserResponseAction} from './browser-response-action.ts';
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
  */
-export interface ContentSecurityPolicyOptions {
-  /**
-   * Sets the child-src content security policy directive, which determines what sources
-   * are allowed for nested browsing contexts, including workers and iframes.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/child-src
-   */
-  childSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the connect-src content security policy directive, which determines what sources
-   * can be connected to from script sources (for example, when using `fetch()`).
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
-   */
-  connectSources?: (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the default-src content security policy directive, which determines what sources
-   * are allowed for resources where a more specific policy has not been set.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src
-   */
-  defaultSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the font-src content security policy directive, which determines what sources
-   * are allowed for fonts used on this page.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src
-   */
-  fontSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the frame-src content security policy directive, which determines what sources
-   * are allowed for frames embedded in this page.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
-   */
-  frameSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the img-src content security policy directive, which determines what sources
-   * are allowed for images.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
-   */
-  imageSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the manifest-src content security policy directive, which determines what sources
-   * are allowed for the app manifest for this page.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/manifest-src
-   */
-  manifestSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the media-src content security policy directive, which determines what sources
-   * are allowed for audio and video.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/media-src
-   */
-  mediaSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the object-src content security policy directive, which determines what sources
-   * are allowed for `<object>`, `<embed>`, and `<applet>` elements.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/object-src
-   */
-  objectSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the prefetch-src content security policy directive, which determines what sources
-   * are allowed for prefetching and prerendering.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/prefetch-src
-   */
-  prefetchSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the script-src content security policy directive, which determines what sources
-   * are allowed for scripts.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
-   */
-  scriptSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the script-src-elem content security policy directive, which determines what sources
-   * are allowed for `script` elements.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src-elem
-   */
-  scriptElementSources?:
-    | false
-    | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the script-src-attr content security policy directive, which determines what sources
-   * are allowed for inline event handlers.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src-attr
-   */
-  scriptAttributeSources?:
-    | false
-    | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the style-src content security policy directive, which determines what sources
-   * are allowed for stylesheets.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
-   */
-  styleSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the style-src-elem content security policy directive, which determines what sources
-   * are allowed for stylesheet elements.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-elem
-   */
-  styleElementSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the style-src-attr content security policy directive, which determines what sources
-   * are allowed for inline styles.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-attr
-   */
-  styleAttributeSources?:
-    | false
-    | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the worker-src content security policy directive, which determines what sources
-   * are allowed for workers created by this page.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src
-   */
-  workerSources?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the base-uri content security policy directive, which determines the sources that can
-   * be used in the document’s `<base>` element.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/base-uri
-   */
-  baseUri?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Apply restrictions to the abilities of this HTML page using the `sandbox`
-   * content security policy directive. When set to `true`, the `sandbox` header
-   * is set without any exceptions. You can also pass an allow-list of capabilities
-   * to this option to apply the sandbox, with some features enabled.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox
-   */
-  sandbox?: boolean | ContentSecurityPolicySandboxAllow[];
-
-  /**
-   * Sets the form-action content security policy directive, which determines the sources
-   * that can be the targets of form submissions on this page.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/form-action
-   */
-  formActions?:
-    | false
-    | (
-        | ContentSecurityPolicySpecialSource.Self
-        | ContentSecurityPolicySpecialSource.UnsafeEval
-        | ContentSecurityPolicySpecialSource.UnsafeHashes
-        | ContentSecurityPolicySpecialSource.UnsafeInline
-        | ContentSecurityPolicySpecialSource.None
-        | string
-      )[];
-
-  /**
-   * Sets the frame-ancestors content security policy directive, which determines what sources
-   * can embed this page.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
-   */
-  frameAncestors?:
-    | false
-    | (
-        | ContentSecurityPolicySpecialSource.Self
-        | ContentSecurityPolicySpecialSource.None
-        | string
-      )[];
-
-  /**
-   * Sets the navigate-to content security policy directive, which determines what
-   * sources the page can navigate to.
-   *
-   * Passing `false` or an empty array is equivalent to passing `["'none'"]`, disallowing
-   * all sources.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/navigate-to
-   */
-  navigateTo?: false | (ContentSecurityPolicySpecialSource | string)[];
-
-  /**
-   * Sets the report-uri content security policy directive which controls the URL
-   * the browser will report to when content security policy violations occur.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/navigate-to
-   */
-  reportUri?: string;
-
-  /**
-   * Sets the `report-to` group that the browser will report content security
-   * policy violations to. You will typically need to use this in conjunction
-   * with setting the `Report-To` header, using either `useResponseHeader()` or
-   * `<ResponseHeader />`.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/report-to
-   */
-  reportTo?: string;
-
-  /**
-   * Sets the `block-all-mixed-content` content security policy directive, which
-   * prevents insecure content from loading on when the page uses HTTP.
-   *
-   * @deprecated Use the `upgradeInsecureRequests` option instead.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content
-   */
-  blockAllMixedContent?: boolean;
-
-  /**
-   * Instructs the browser to upgrade any insecure requests made by the page as
-   * if they had been secure requests.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
-   */
-  upgradeInsecureRequests?: boolean;
-
-  /**
-   * Determines what resources the browser will require sub-resource integrity (SRI)
-   * checks before loading.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for
-   */
-  requireSriFor?: ('style' | 'script')[];
-
-  /**
-   * Determines what resources will only accept “trusted types” in potential XSS
-   * vectors, like when setting `Element.innerHTML`.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for
-   */
-  requireTrustedTypesFor?: 'script'[];
-
+export interface UseContentSecurityPolicyOptions
+  extends ContentSecurityPolicyOptions {
   /**
    * Whether the content security policy should be set to “report-only” mode.
    * In this mode, violations of the policy are reported, but content can
@@ -342,7 +30,7 @@ export interface ContentSecurityPolicyOptions {
  * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
  */
 export function useContentSecurityPolicy(
-  value: string | ContentSecurityPolicyOptions,
+  value: string | UseContentSecurityPolicyOptions,
 ) {
   if (typeof document === 'object') return;
 
@@ -353,117 +41,9 @@ export function useContentSecurityPolicy(
     if (typeof value === 'string') {
       normalizedValue = value;
     } else {
-      const {
-        baseUri,
-        blockAllMixedContent,
-        childSources,
-        connectSources,
-        defaultSources,
-        fontSources,
-        formActions,
-        frameAncestors,
-        frameSources,
-        imageSources,
-        manifestSources,
-        mediaSources,
-        navigateTo,
-        objectSources,
-        prefetchSources,
-        reportTo,
-        reportUri,
-        requireSriFor,
-        requireTrustedTypesFor,
-        sandbox,
-        scriptAttributeSources,
-        scriptElementSources,
-        scriptSources,
-        styleAttributeSources,
-        styleElementSources,
-        styleSources,
-        upgradeInsecureRequests,
-        workerSources,
-        reportOnly = false,
-      } = value;
-
-      const appendContent = (content: string) => {
-        if (normalizedValue.length === 0) {
-          normalizedValue = content;
-        } else {
-          normalizedValue += `; ${content}`;
-        }
-      };
-
-      const addDirective = (directive: string, value?: string) =>
-        appendContent(`${directive}${value ? ` ${value}` : ''}`);
-
-      const addSourcesDirective = (
-        directive: string,
-        value?: boolean | string[],
-      ) => {
-        if (value == null) return;
-
-        if (value === false) {
-          addDirective(directive, "'none'");
-        } else if (Array.isArray(value)) {
-          if (value.length === 0) {
-            addDirective(directive, "'none'");
-          } else {
-            addDirective(directive, value.join(' '));
-          }
-        }
-      };
-
-      addSourcesDirective('default-src', defaultSources);
-      addSourcesDirective('connect-src', connectSources);
-      addSourcesDirective('child-src', childSources);
-      addSourcesDirective('font-src', fontSources);
-      addSourcesDirective('form-action', formActions);
-      addSourcesDirective('frame-ancestors', frameAncestors);
-      addSourcesDirective('frame-src', frameSources);
-      addSourcesDirective('img-src', imageSources);
-      addSourcesDirective('manifest-src', manifestSources);
-      addSourcesDirective('media-src', mediaSources);
-      addSourcesDirective('object-src', objectSources);
-      addSourcesDirective('prefetch-src', prefetchSources);
-      addSourcesDirective('script-src', scriptSources);
-      addSourcesDirective('script-src-attr', scriptAttributeSources);
-      addSourcesDirective('script-src-elem', scriptElementSources);
-      addSourcesDirective('style-src', styleSources);
-      addSourcesDirective('style-src-attr', styleAttributeSources);
-      addSourcesDirective('style-src-elem', styleElementSources);
-      addSourcesDirective('worker-src', workerSources);
-
-      addSourcesDirective('base-uri', baseUri);
-      addSourcesDirective('navigate-to', navigateTo);
-
-      if (sandbox === true) {
-        addDirective('sandbox');
-      } else if (Array.isArray(sandbox)) {
-        if (sandbox.length === 0) {
-          addDirective('sandbox');
-        } else {
-          addDirective('sandbox', sandbox.join(' '));
-        }
-      }
-
-      if (requireSriFor && requireSriFor.length > 0) {
-        addDirective('require-sri-for', requireSriFor.join(' '));
-      }
-
-      if (requireTrustedTypesFor && requireTrustedTypesFor.length > 0) {
-        addDirective(
-          'require-trusted-types-for',
-          requireTrustedTypesFor.map((type) => `'${type}'`).join(' '),
-        );
-      }
-
-      if (blockAllMixedContent) addDirective('block-all-mixed-content');
-      if (upgradeInsecureRequests) addDirective('upgrade-insecure-requests');
-
-      if (reportTo) addDirective('report-to', reportTo);
-      if (reportUri) addDirective('report-uri', reportUri);
+      normalizedValue = contentSecurityPolicyHeader(value);
 
-      if (reportOnly) {
+      if (value.reportOnly) {
         header = 'Content-Security-Policy-Report-Only';
       }
     }
diff --git a/packages/preact-browser/source/server/hooks/permissions-policy.ts b/packages/preact-browser/source/server/hooks/permissions-policy.ts
index 359123566..a73c434e8 100644
--- a/packages/preact-browser/source/server/hooks/permissions-policy.ts
+++ b/packages/preact-browser/source/server/hooks/permissions-policy.ts
@@ -1,219 +1,9 @@
-import type {PermissionsPolicySpecialSource} from '@quilted/http';
+import {
+  permissionsPolicyHeader,
+  type PermissionsPolicyOptions,
+} from '@quilted/browser/server';
 import {useBrowserResponseAction} from './browser-response-action.ts';
 
-/**
- * Options for creating a content security policy.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
- */
-export interface PermissionsPolicyOptions {
-  /**
-   * Controls whether the current document is allowed to gather information about the acceleration of
-   * the device through the Accelerometer interface.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/accelerometer
-   */
-  accelerometer?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to gather information
-   * about the amount of light in the environment around the device through
-   * the AmbientLightSensor interface.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/ambient-light-sensor
-   */
-  ambientLightSensor?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to autoplay media requested through the
-   * HTMLMediaElement interface. This includes both the use of the `autoplay`
-   * attribute on `<video>` and `<audio>` elements, and the `HTMLMediaElement.play()`
-   * method.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/autoplay
-   */
-  autoplay?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use video input devices.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/camera
-   */
-  camera?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether or not the current document is permitted to use the
-   * `getDisplayMedia()` method to capture screen contents.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/display-capture
-   */
-  displayCapture?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to set document.domain.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/document-domain
-   */
-  documentDomain?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use the Encrypted
-   * Media Extensions API (EME).
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/encrypted-media
-   */
-  encryptedMedia?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether tasks should execute in frames while they're not being
-   * rendered (e.g. if an iframe is hidden or display: none).
-   */
-  executionWhileNotRendered?:
-    | false
-    | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether tasks should execute in frames while they're outside of
-   * the visible viewport.
-   */
-  executionWhileOutOfViewport?:
-    | false
-    | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use
-   * `Element.requestFullScreen()`.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/fullscreen
-   */
-  fullScreen?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use the Gamepad API.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/gamepad
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API
-   */
-  gamepad?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use the
-   * Geolocation Interface.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/geolocation
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Geolocation
-   */
-  geolocation?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to gather information
-   * about the orientation of the device through the Gyroscope interface.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/gyroscope
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope
-   */
-  gyroscope?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the user will be tracked and categorized using Google’s
-   * “Federated Learning of Cohorts” initiative.
-   *
-   * @default false
-   * @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
-   */
-  interestCohort?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to gather information
-   * about the orientation of the device through the Magnetometer interface.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/magnetometer
-   */
-  magnetometer?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use audio input devices.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/microphone
-   */
-  microphone?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use the Web MIDI API.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/midi
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API
-   */
-  midi?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls the availability of mechanisms that enables the page author
-   * to take control over the behavior of spatial navigation, or to cancel
-   * it outright.
-   */
-  navigationOverride?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use the Payment Request API.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/payment
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API
-   */
-  payment?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to play a video in a Picture-in-Picture mode.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/picture-in-picture
-   */
-  pictureInPicture?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use the Web
-   * Authentication API to retrieve already stored public-key credentials.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/publickey-credentials-get
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
-   */
-  publicKeyCredentialsGet?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to make synchronous XMLHttpRequest requests.
-   *
-   * @default false
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/sync-xhr
-   */
-  syncXhr?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether the current document is allowed to use the WebUSB API.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/usb
-   * @see https://wicg.github.io/webusb/
-   */
-  usb?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether or not the current document is allowed to use the
-   * `Navigator.share()` API to share text, links, images, and other content
-   * to arbitrary destinations of user's choice.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/web-share
-   */
-  webShare?: false | (PermissionsPolicySpecialSource | string)[];
-
-  /**
-   * Controls whether or not the current document is allowed to use the WebXR
-   * Device API to interact with a WebXR session.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API
-   */
-  xrSpatialTracking?: false | (PermissionsPolicySpecialSource | string)[];
-}
-
-const SPECIAL_SOURCES = new Set(['*', 'self', 'src']);
-
 /**
  * Sets the `Permissions-Policy` header for this request.
  *
@@ -229,83 +19,7 @@ export function usePermissionsPolicy(value: string | PermissionsPolicyOptions) {
     if (typeof value === 'string') {
       normalizedValue = value;
     } else {
-      const {
-        accelerometer,
-        ambientLightSensor,
-        autoplay,
-        camera,
-        displayCapture,
-        documentDomain,
-        encryptedMedia,
-        executionWhileNotRendered,
-        executionWhileOutOfViewport,
-        fullScreen,
-        gamepad,
-        geolocation,
-        gyroscope,
-        interestCohort = false,
-        magnetometer,
-        microphone,
-        midi,
-        navigationOverride,
-        payment,
-        pictureInPicture,
-        publicKeyCredentialsGet,
-        syncXhr = false,
-        usb,
-        webShare,
-        xrSpatialTracking,
-      } = value;
-
-      const addDirective = (directive: string, value?: boolean | string[]) => {
-        if (value == null) return;
-
-        if (normalizedValue.length !== 0) normalizedValue += ', ';
-
-        if (value === false) {
-          normalizedValue += `${directive}=()`;
-        } else if (Array.isArray(value)) {
-          if (value.length === 0) {
-            normalizedValue += `${directive}=()`;
-          } else {
-            normalizedValue += `${directive}=(${value
-              .map((value) =>
-                SPECIAL_SOURCES.has(value) ? value : JSON.stringify(value),
-              )
-              .join(' ')})`;
-          }
-        }
-      };
-
-      addDirective('interest-cohort', interestCohort);
-      addDirective('accelerometer', accelerometer);
-      addDirective('ambient-light-sensor', ambientLightSensor);
-      addDirective('autoplay', autoplay);
-      addDirective('camera', camera);
-      addDirective('display-capture', displayCapture);
-      addDirective('document-domain', documentDomain);
-      addDirective('encrypted-media', encryptedMedia);
-      addDirective('execution-while-not-rendered', executionWhileNotRendered);
-      addDirective(
-        'execution-while-out-of-viewport',
-        executionWhileOutOfViewport,
-      );
-      addDirective('fullscreen', fullScreen);
-      addDirective('gamepad', gamepad);
-      addDirective('geolocation', geolocation);
-      addDirective('gyroscope', gyroscope);
-      addDirective('interest-cohort', interestCohort);
-      addDirective('magnetometer', magnetometer);
-      addDirective('microphone', microphone);
-      addDirective('midi', midi);
-      addDirective('navigation-override', navigationOverride);
-      addDirective('payment', payment);
-      addDirective('picture-in-picture', pictureInPicture);
-      addDirective('publickey-credentials-get', publicKeyCredentialsGet);
-      addDirective('sync-xhr', syncXhr);
-      addDirective('usb', usb);
-      addDirective('web-share', webShare);
-      addDirective('xr-spatial-tracking', xrSpatialTracking);
+      normalizedValue = permissionsPolicyHeader(value);
     }
 
     if (normalizedValue.length > 0) {
diff --git a/packages/preact-browser/source/server/hooks/strict-transport-security.ts b/packages/preact-browser/source/server/hooks/strict-transport-security.ts
index ebbe91836..e559cdea7 100644
--- a/packages/preact-browser/source/server/hooks/strict-transport-security.ts
+++ b/packages/preact-browser/source/server/hooks/strict-transport-security.ts
@@ -1,40 +1,9 @@
+import {
+  strictTransportSecurityHeader,
+  type StrictTransportSecurityOptions,
+} from '@quilted/browser/server';
 import {useBrowserResponseAction} from './browser-response-action.ts';
 
-/**
- * Options for creating a content security policy.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
- */
-export interface StrictTransportSecurityOptions {
-  /**
-   * The time, in seconds, that the browser should remember that a site is only to
-   * be accessed using HTTPS.
-   *
-   * @default 63_072_000
-   */
-  maxAge?: number;
-
-  /**
-   * Applies this rule to all of the site’s subdomains.
-   *
-   * @default true
-   */
-  includeSubDomains?: boolean;
-
-  /**
-   * Allows this site to be added to an HSTS preload service,
-   * which browsers can use to determine ahead of time what sites
-   * should default to being accessed via HTTPS.
-   *
-   * @default true
-   */
-  preload?: boolean;
-}
-
-// The recommendation for being added to Google’s preload list is
-// two years. See https://hstspreload.org/ for details.
-const DEFAULT_MAX_AGE = 63_072_000;
-
 /**
  * Sets the `Strict-Transport-Security` header for this request. When no
  * value is passed, this component uses the recommended value from https://hstspreload.org/,
@@ -57,16 +26,7 @@ export function useStrictTransportSecurity(
     if (typeof value === 'string') {
       normalizedValue = value;
     } else {
-      const {
-        maxAge = DEFAULT_MAX_AGE,
-        includeSubDomains = true,
-        preload = true,
-      } = value;
-
-      normalizedValue = String(maxAge);
-
-      if (includeSubDomains) normalizedValue += `; includeSubDomains`;
-      if (preload) normalizedValue += `; preload`;
+      normalizedValue = strictTransportSecurityHeader(value);
     }
 
     if (normalizedValue.length > 0) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e75b654da..b7d3a7d65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -219,6 +219,9 @@ importers:
       '@quilted/assets':
         specifier: workspace:^0.1.5
         version: link:../assets
+      '@quilted/http':
+        specifier: workspace:^0.3.0
+        version: link:../http
       '@quilted/signals':
         specifier: workspace:^0.2.1
         version: link:../signals