@quilted/create 0.2.42 → 0.2.44

package/templates/app-basic/server.tsx

@@ -1,7 +1,16 @@
 import '@quilted/quilt/globals';
+
 import {RequestRouter} from '@quilted/quilt/request-router';
-import {renderToResponse} 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 response = await renderToResponse(<App context={context} />, {
+  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;

package/templates/app-empty/package.json

@@ -16,9 +16,9 @@
   "dependencies": {},
   "devDependencies": {
     "@quilted/quilt": "^0.8.0",
-    "preact": "^10.21.0",
-    "react": "npm:@quilted/react@^18.2.0",
-    "react-dom": "npm:@quilted/react-dom@^18.2.0"
+    "preact": "^10.26.0",
+    "react": "npm:@quilted/react@^19.0.0",
+    "react-dom": "npm:@quilted/react-dom@^19.0.0"
   },
   "sideEffects": [
     "*.css",

package/templates/app-empty/server.tsx

@@ -1,6 +1,7 @@
 import '@quilted/quilt/globals';
+
 import {RequestRouter} from '@quilted/quilt/request-router';
-import {renderToResponse} from '@quilted/quilt/server';
+import {renderAppToHTMLResponse} from '@quilted/quilt/server';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import {App} from './App.tsx';
@@ -8,9 +9,9 @@ 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 renderToResponse(<App />, {
+  const response = await renderAppToHTMLResponse(<App />, {
     request,
     assets,
   });

package/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>
   );
 }

package/templates/app-graphql/browser.tsx

@@ -20,6 +20,10 @@ const context = {
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console
-Object.assign(globalThis, {app: context});
+Object.defineProperty(globalThis, 'app', {
+  value: {context},
+  enumerable: false,
+  configurable: true,
+});
 
 hydrate(<App context={context} />);

package/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,
+    });
+  });
+});

package/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} />
+    </>
+  );
+}

package/templates/app-graphql/foundation/html.ts

@@ -1 +1 @@
-export {HTML} from './html/HTML.tsx';
+export {Head} from './html/Head.tsx';

package/templates/app-graphql/package.json

@@ -18,10 +18,10 @@
     "@quilted/graphql-tools": "^0.2.0",
     "@quilted/quilt": "^0.8.0",
     "graphql": "^16.8.0",
-    "jsdom": "^24.0.0",
-    "preact": "^10.21.0",
-    "react": "npm:@quilted/react@^18.2.0",
-    "react-dom": "npm:@quilted/react-dom@^18.2.0"
+    "jsdom": "^26.0.0",
+    "preact": "^10.26.0",
+    "react": "npm:@quilted/react@^19.0.0",
+    "react-dom": "npm:@quilted/react-dom@^19.0.0"
   },
   "sideEffects": [
     "*.css",

package/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,15 +31,13 @@ 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}, {renderToResponse}] =
-    await Promise.all([
-      import('./App.tsx'),
-      import('./server/graphql.ts'),
-      import('@quilted/quilt/graphql'),
-      import('@quilted/quilt/server'),
-    ]);
+  const [{App}, {performGraphQLOperation}, {GraphQLCache}] = await Promise.all([
+    import('./App.tsx'),
+    import('./server/graphql.ts'),
+    import('@quilted/quilt/graphql'),
+  ]);
 
   const context = {
     router: new Router(request.url),
@@ -40,9 +47,86 @@ router.get(async (request) => {
     },
   } satisfies AppContext;
 
-  const response = await renderToResponse(<App context={context} />, {
+  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;

package/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>
   );
 }

package/templates/app-trpc/browser.tsx

@@ -23,6 +23,10 @@ const context = {
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console
-Object.assign(globalThis, {app: context});
+Object.defineProperty(globalThis, 'app', {
+  value: {context},
+  enumerable: false,
+  configurable: true,
+});
 
 hydrate(<App context={context} />);

package/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,
+    });
+  });
+});

package/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} />
+    </>
+  );
+}

package/templates/app-trpc/foundation/html.ts

@@ -1 +1 @@
-export {HTML} from './html/HTML.tsx';
+export {Head} from './html/Head.tsx';

package/templates/app-trpc/package.json

@@ -22,10 +22,10 @@
     "@trpc/client": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
-    "jsdom": "^24.0.0",
-    "preact": "^10.21.0",
-    "react": "npm:@quilted/react@^18.2.0",
-    "react-dom": "npm:@quilted/react-dom@^18.2.0",
+    "jsdom": "^26.0.0",
+    "preact": "^10.26.0",
+    "react": "npm:@quilted/react@^19.0.0",
+    "react-dom": "npm:@quilted/react-dom@^19.0.0",
     "zod": "^3.22.0"
   },
   "sideEffects": [

package/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}, {renderToResponse}, {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 response = await renderToResponse(<App context={context} />, {
+  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;