From 39399b75b86a82bc249aa8063e9ae878d0a0935b Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Thu, 11 Apr 2024 17:11:24 -0700
Subject: [PATCH 01/16] use a content-security-policy in development

---
 vercel.json    | 13 +++++++++++++
 vite.config.ts | 25 +++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/vercel.json b/vercel.json
index ac33c67793..be97e34e95 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,6 +1,19 @@
 {
   "buildCommand": "API_MODE=msw npm run build && cp mockServiceWorker.js dist/",
   "outputDirectory": "dist",
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "content-security-policy",
+          "value": "default-src 'self'; style-src 'unsafe-inline' 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'"
+        },
+        { "key": "x-content-type-options", "value": "nosniff" },
+        { "key": "x-frame-options", "value": "DENY" }
+      ]
+    }
+  ],
   "rewrites": [
     {
       "source": "/viewscript.js",
diff --git a/vite.config.ts b/vite.config.ts
index 5d96f3875b..1c30db656c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { randomBytes } from 'crypto'
 import { resolve } from 'path'
 import basicSsl from '@vitejs/plugin-basic-ssl'
 import react from '@vitejs/plugin-react-swc'
@@ -13,6 +14,8 @@ import { createHtmlPlugin } from 'vite-plugin-html'
 import tsconfigPaths from 'vite-tsconfig-paths'
 import { z } from 'zod'
 
+import vercelConfig from './vercel.json'
+
 const ApiMode = z.enum(['msw', 'dogfood', 'nexus'])
 
 const apiModeResult = ApiMode.default('nexus').safeParse(process.env.API_MODE)
@@ -67,6 +70,11 @@ const previewMetaTag = [
   },
 ]
 
+const headers = Object.fromEntries(
+  vercelConfig.headers[0].headers.map(({ key, value }) => [key, value])
+)
+const cspNonce = randomBytes(8).toString('hex')
+
 // see https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
   build: {
@@ -79,6 +87,8 @@ export default defineConfig(({ mode }) => ({
         app: 'index.html',
       },
     },
+    // prevent inlining assets as `data:`, which is not permitted by our Content-Security-Policy
+    assetsInlineLimit: 0,
   },
   define: {
     'process.env.MSW': JSON.stringify(apiMode === 'msw'),
@@ -99,8 +109,20 @@ export default defineConfig(({ mode }) => ({
     react(),
     apiMode === 'dogfood' && basicSsl(),
   ],
+  html: {
+    cspNonce:
+      mode === 'production'
+        ? // don't include a placeholder nonce in production
+          undefined
+        : // use a CSP nonce to avoid needing to permit 'unsafe-inline' in dev mode
+          cspNonce,
+  },
   server: {
     port: 4000,
+    headers: {
+      ...headers,
+      'content-security-policy': `${headers['content-security-policy']}; script-src 'nonce-${cspNonce}' 'self'`,
+    },
     // these only get hit when MSW doesn't intercept the request
     proxy: {
       '/v1': {
@@ -119,6 +141,9 @@ export default defineConfig(({ mode }) => ({
       },
     },
   },
+  preview: {
+    headers: headers,
+  },
   test: {
     environment: 'jsdom',
     setupFiles: ['test/unit/setup.ts'],

From f93d6161f61498bfb7a7006ff27c9f2e0cf152e4 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 12 Apr 2024 13:39:36 -0500
Subject: [PATCH 02/16] cram things in a bit

---
 vite.config.ts | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 1c30db656c..860236bf1d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -70,10 +70,11 @@ const previewMetaTag = [
   },
 ]
 
-const headers = Object.fromEntries(
-  vercelConfig.headers[0].headers.map(({ key, value }) => [key, value])
-)
+// vercel config is source of truth for headers
+const vercelHeaders = vercelConfig.headers[0].headers
+const headers = Object.fromEntries(vercelHeaders.map((h) => [h.key, h.value]))
 const cspNonce = randomBytes(8).toString('hex')
+const cspWithNonce = `${headers['content-security-policy']}; script-src 'nonce-${cspNonce}' 'self'`
 
 // see https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -110,19 +111,13 @@ export default defineConfig(({ mode }) => ({
     apiMode === 'dogfood' && basicSsl(),
   ],
   html: {
-    cspNonce:
-      mode === 'production'
-        ? // don't include a placeholder nonce in production
-          undefined
-        : // use a CSP nonce to avoid needing to permit 'unsafe-inline' in dev mode
-          cspNonce,
+    // don't include a placeholder nonce in production.
+    // use a CSP nonce in dev to avoid needing to permit 'unsafe-inline'
+    cspNonce: mode === 'production' ? undefined : cspNonce,
   },
   server: {
     port: 4000,
-    headers: {
-      ...headers,
-      'content-security-policy': `${headers['content-security-policy']}; script-src 'nonce-${cspNonce}' 'self'`,
-    },
+    headers: { ...headers, 'content-security-policy': cspWithNonce },
     // these only get hit when MSW doesn't intercept the request
     proxy: {
       '/v1': {
@@ -141,9 +136,7 @@ export default defineConfig(({ mode }) => ({
       },
     },
   },
-  preview: {
-    headers: headers,
-  },
+  preview: { headers },
   test: {
     environment: 'jsdom',
     setupFiles: ['test/unit/setup.ts'],

From 36353d80717cf55c614a27105ee0da1e0e72679d Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 12 Apr 2024 13:59:21 -0500
Subject: [PATCH 03/16] playwright test for dev mode headers

---
 test/e2e/meta.e2e.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 test/e2e/meta.e2e.ts

diff --git a/test/e2e/meta.e2e.ts b/test/e2e/meta.e2e.ts
new file mode 100644
index 0000000000..5e9210300b
--- /dev/null
+++ b/test/e2e/meta.e2e.ts
@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+
+test('CSP headers', async ({ page }) => {
+  // doesn't matter what page we go to
+  const response = await page.goto('/')
+  expect(response?.headers()).toMatchObject({
+    // note nonce is represented as [0-9a-f]+
+    'content-security-policy': expect.stringMatching(
+      /^default-src 'self'; style-src 'unsafe-inline' 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'nonce-[0-9a-f]+' 'self'$/
+    ),
+    'x-content-type-options': 'nosniff',
+    'x-frame-options': 'DENY',
+  })
+})

From d2706f53418aea9f34bd985b2fe0d7ca1b35f3a3 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 12 Apr 2024 14:11:44 -0500
Subject: [PATCH 04/16] fix license, add draft docs/csp-headers.md

---
 docs/csp-headers.md  | 18 ++++++++++++++++++
 test/e2e/meta.e2e.ts |  7 +++++++
 2 files changed, 25 insertions(+)
 create mode 100644 docs/csp-headers.md

diff --git a/docs/csp-headers.md b/docs/csp-headers.md
new file mode 100644
index 0000000000..df8b7a2e4d
--- /dev/null
+++ b/docs/csp-headers.md
@@ -0,0 +1,18 @@
+# CSP headers in development and on Vercel
+
+Note: production headers are set server-side in Nexus. The headers set in this repo are meant to match what is set there (and should be kept in sync as far as possible) but real header changes must be made in the Omicron repo.
+
+The base headers are defined in `vercel.json` and then imported into `vite.config.ts` to avoid repeating them.
+
+The `content-security-policy` is based on the recommendation by the [OWASP Secure Headers Project](https://owasp.org/www-project-secure-headers/index.html) (click the "Best Practices" tab). The directives:
+
+- `default-src 'self'`: By default, restrict all resources to same-origin.
+- `style-src 'unsafe-inline' 'self'`: Restrict CSS to same-origin and inline use. `style=` attributes on React elements seem to count as inline.
+- `frame-src 'none'`: Disallow nested browsing contexts (`<frame>` and `<iframe>`).
+- `object-src 'none'`: Disallow `<object>` and `<embed>`.
+- `form-action 'none'`: Disallow submitting any forms with an `action` attribute (none of our forms are the traditional kind and instead post to the server in JS).
+- `frame-ancestors 'none'`: Disallow embedding this site with things like `<iframe>`; used to prevent click-jacking attacks.
+
+In development mode, an additional `script-src` CSP directive is added which references a randomly-generated nonce. [Vite injects this in the generated index.html](https://vitejs.dev/guide/features.html#content-security-policy-csp) so that the dev-mode scripts can load. We do this instead of allowing `'unsafe-inline'` because I'm not sure whether tests run against dev bits or not, and this helps get dev builds much closer to production.
+
+Also set are `x-content-type-options: nosniff` and `x-frame-options: DENY`.
diff --git a/test/e2e/meta.e2e.ts b/test/e2e/meta.e2e.ts
index 5e9210300b..3c5f267b75 100644
--- a/test/e2e/meta.e2e.ts
+++ b/test/e2e/meta.e2e.ts
@@ -1,3 +1,10 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
 import { expect, test } from '@playwright/test'
 
 test('CSP headers', async ({ page }) => {

From 40eff1f190d3ea188c26f3856c2d293afab1120a Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 12 Apr 2024 15:40:30 -0500
Subject: [PATCH 05/16] add preview script to package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 5c9b3449f8..8daa2282ad 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "start:msw": "API_MODE=msw vite",
     "start:nexus": "API_MODE=nexus vite",
     "start:dogfood": "API_MODE=dogfood vite",
+    "preview": "API_MODE=msw npm run build && cp mockServiceWorker.js dist/ && vite preview",
     "dev": "API_MODE=msw vite",
     "start:mock-api": "node -r esbuild-register ./tools/start_mock_api.ts",
     "build": "vite build",

From a30b5f642c449f5ebb00de49dea6e364d037e57e Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 12 Apr 2024 16:15:00 -0500
Subject: [PATCH 06/16] comment explaining why we use the nonce thing, add
 justification to doc

---
 docs/csp-headers.md | 10 +++++++---
 vite.config.ts      | 13 +++++++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/docs/csp-headers.md b/docs/csp-headers.md
index df8b7a2e4d..1d24947dc8 100644
--- a/docs/csp-headers.md
+++ b/docs/csp-headers.md
@@ -1,8 +1,12 @@
-# CSP headers in development and on Vercel
+# CSP headers in local dev and on Vercel
 
-Note: production headers are set server-side in Nexus. The headers set in this repo are meant to match what is set there (and should be kept in sync as far as possible) but real header changes must be made in the Omicron repo.
+## Why
 
-The base headers are defined in `vercel.json` and then imported into `vite.config.ts` to avoid repeating them.
+Production CSP headers are set server-side in Nexus, so why should we set the headers on Vercel and the Vite dev server too? We are not _that_ concerned about security in those environments. The main reason is so we can know as early as possible in the development process whether a given CSP directive breaks something the web console.
+
+## What
+
+The base headers are defined in `vercel.json` and imported into `vite.config.ts` to avoid repeating them.
 
 The `content-security-policy` is based on the recommendation by the [OWASP Secure Headers Project](https://owasp.org/www-project-secure-headers/index.html) (click the "Best Practices" tab). The directives:
 
diff --git a/vite.config.ts b/vite.config.ts
index 860236bf1d..68b66e281b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -73,8 +73,17 @@ const previewMetaTag = [
 // vercel config is source of truth for headers
 const vercelHeaders = vercelConfig.headers[0].headers
 const headers = Object.fromEntries(vercelHeaders.map((h) => [h.key, h.value]))
+
+// This is only needed for local dev to avoid breaking Vite's script injection.
+// Rather than use unsafe-inline all the time, the nonce approach is much more
+// narrowly scoped and lets us make sure everything *else* works fine without
+// unsafe-inline.
 const cspNonce = randomBytes(8).toString('hex')
-const cspWithNonce = `${headers['content-security-policy']}; script-src 'nonce-${cspNonce}' 'self'`
+const csp = headers['content-security-policy']
+const devHeaders = {
+  ...headers,
+  'content-security-policy': `${csp}; script-src 'nonce-${cspNonce}' 'self'`,
+}
 
 // see https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
@@ -117,7 +126,7 @@ export default defineConfig(({ mode }) => ({
   },
   server: {
     port: 4000,
-    headers: { ...headers, 'content-security-policy': cspWithNonce },
+    headers: devHeaders,
     // these only get hit when MSW doesn't intercept the request
     proxy: {
       '/v1': {

From 22f40bbfc2aabb39646f5f40f8b79b5e817f47ce Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Fri, 12 Apr 2024 15:04:41 -0700
Subject: [PATCH 07/16] remove style-src 'unsafe-inline' :)

---
 vercel.json    | 2 +-
 vite.config.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/vercel.json b/vercel.json
index be97e34e95..7dc20c6f83 100644
--- a/vercel.json
+++ b/vercel.json
@@ -7,7 +7,7 @@
       "headers": [
         {
           "key": "content-security-policy",
-          "value": "default-src 'self'; style-src 'unsafe-inline' 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'"
+          "value": "default-src 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'"
         },
         { "key": "x-content-type-options", "value": "nosniff" },
         { "key": "x-frame-options", "value": "DENY" }
diff --git a/vite.config.ts b/vite.config.ts
index 68b66e281b..10e9fdd553 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -82,7 +82,7 @@ const cspNonce = randomBytes(8).toString('hex')
 const csp = headers['content-security-policy']
 const devHeaders = {
   ...headers,
-  'content-security-policy': `${csp}; script-src 'nonce-${cspNonce}' 'self'`,
+  'content-security-policy': `${csp}; script-src 'nonce-${cspNonce}' 'self'; style-src 'nonce-${cspNonce}' 'self'`,
 }
 
 // see https://vitejs.dev/config/

From 06e13cd5b60f4f950c861e1f4544ea6fb69a228c Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Fri, 12 Apr 2024 15:07:39 -0700
Subject: [PATCH 08/16] fix the docs and test

---
 docs/csp-headers.md  | 3 +--
 test/e2e/meta.e2e.ts | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/csp-headers.md b/docs/csp-headers.md
index 1d24947dc8..3d59333e6a 100644
--- a/docs/csp-headers.md
+++ b/docs/csp-headers.md
@@ -11,12 +11,11 @@ The base headers are defined in `vercel.json` and imported into `vite.config.ts`
 The `content-security-policy` is based on the recommendation by the [OWASP Secure Headers Project](https://owasp.org/www-project-secure-headers/index.html) (click the "Best Practices" tab). The directives:
 
 - `default-src 'self'`: By default, restrict all resources to same-origin.
-- `style-src 'unsafe-inline' 'self'`: Restrict CSS to same-origin and inline use. `style=` attributes on React elements seem to count as inline.
 - `frame-src 'none'`: Disallow nested browsing contexts (`<frame>` and `<iframe>`).
 - `object-src 'none'`: Disallow `<object>` and `<embed>`.
 - `form-action 'none'`: Disallow submitting any forms with an `action` attribute (none of our forms are the traditional kind and instead post to the server in JS).
 - `frame-ancestors 'none'`: Disallow embedding this site with things like `<iframe>`; used to prevent click-jacking attacks.
 
-In development mode, an additional `script-src` CSP directive is added which references a randomly-generated nonce. [Vite injects this in the generated index.html](https://vitejs.dev/guide/features.html#content-security-policy-csp) so that the dev-mode scripts can load. We do this instead of allowing `'unsafe-inline'` because I'm not sure whether tests run against dev bits or not, and this helps get dev builds much closer to production.
+In development mode, additional `script-src` and `style-src` CSP directives are added which reference a randomly-generated nonce. [Vite injects this in the generated index.html](https://vitejs.dev/guide/features.html#content-security-policy-csp) so that the dev-mode scripts and stylesheets can load. We do this instead of allowing `'unsafe-inline'` because I'm not sure whether tests run against dev bits or not, and this helps get dev builds much closer to production.
 
 Also set are `x-content-type-options: nosniff` and `x-frame-options: DENY`.
diff --git a/test/e2e/meta.e2e.ts b/test/e2e/meta.e2e.ts
index 3c5f267b75..b4ce1f47db 100644
--- a/test/e2e/meta.e2e.ts
+++ b/test/e2e/meta.e2e.ts
@@ -13,7 +13,7 @@ test('CSP headers', async ({ page }) => {
   expect(response?.headers()).toMatchObject({
     // note nonce is represented as [0-9a-f]+
     'content-security-policy': expect.stringMatching(
-      /^default-src 'self'; style-src 'unsafe-inline' 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'nonce-[0-9a-f]+' 'self'$/
+      /^default-src 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'nonce-[0-9a-f]+' 'self'; style-src 'nonce-[0-9a-f]+' 'self'$/
     ),
     'x-content-type-options': 'nosniff',
     'x-frame-options': 'DENY',

From b7625208a497d4e46654779d5515e4377df0e830 Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Mon, 15 Apr 2024 09:07:03 -0700
Subject: [PATCH 09/16] apply patch for react-focus-guards

---
 .../@radix-ui+react-focus-guards+1.0.1.patch   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 patches/@radix-ui+react-focus-guards+1.0.1.patch

diff --git a/patches/@radix-ui+react-focus-guards+1.0.1.patch b/patches/@radix-ui+react-focus-guards+1.0.1.patch
new file mode 100644
index 0000000000..0cf665f9c0
--- /dev/null
+++ b/patches/@radix-ui+react-focus-guards+1.0.1.patch
@@ -0,0 +1,18 @@
+Upstream PR: https://github.com/radix-ui/primitives/pull/2840
+
+diff --git a/node_modules/@radix-ui/react-focus-guards/dist/index.mjs b/node_modules/@radix-ui/react-focus-guards/dist/index.mjs
+index cb0f892..4e56fb8 100644
+--- a/node_modules/@radix-ui/react-focus-guards/dist/index.mjs
++++ b/node_modules/@radix-ui/react-focus-guards/dist/index.mjs
+@@ -27,7 +27,10 @@ function $3db38b7d1fb3fe6a$var$createFocusGuard() {
+     const element = document.createElement('span');
+     element.setAttribute('data-radix-focus-guard', '');
+     element.tabIndex = 0;
+-    element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none';
++    element.style.outline = 'none';
++    element.style.opacity = '0';
++    element.style.position = 'fixed';
++    element.style.pointerEvents = 'none';
+     return element;
+ }
+ const $3db38b7d1fb3fe6a$export$be92b6f5f03c0fe9 = $3db38b7d1fb3fe6a$export$ac5b58043b79449b;

From e04e9875e9dd3e5a5c0d19c1a1150fd1a50add1a Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Mon, 15 Apr 2024 12:24:52 -0700
Subject: [PATCH 10/16] patch global styles out of react-remove-scroll

---
 patches/react-remove-scroll+2.5.5.patch | 47 +++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 patches/react-remove-scroll+2.5.5.patch

diff --git a/patches/react-remove-scroll+2.5.5.patch b/patches/react-remove-scroll+2.5.5.patch
new file mode 100644
index 0000000000..c743c0adff
--- /dev/null
+++ b/patches/react-remove-scroll+2.5.5.patch
@@ -0,0 +1,47 @@
+diff --git a/node_modules/react-remove-scroll/dist/es2015/SideEffect.js b/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
+index 08eda83..e3ef7cb 100644
+--- a/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
++++ b/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
+@@ -1,7 +1,4 @@
+-import { __spreadArray } from "tslib";
+ import * as React from 'react';
+-import { RemoveScrollBar } from 'react-remove-scroll-bar';
+-import { styleSingleton } from 'react-style-singleton';
+ import { nonPassive } from './aggresiveCapture';
+ import { handleScroll, locationCouldBeScrolled } from './handleScroll';
+ export var getTouchXY = function (event) {
+@@ -20,23 +17,11 @@ export function RemoveScrollSideCar(props) {
+     var touchStartRef = React.useRef([0, 0]);
+     var activeAxis = React.useRef();
+     var id = React.useState(idCounter++)[0];
+-    var Style = React.useState(function () { return styleSingleton(); })[0];
++    var Style = React.useState({})[0];
+     var lastProps = React.useRef(props);
+     React.useEffect(function () {
+         lastProps.current = props;
+     }, [props]);
+-    React.useEffect(function () {
+-        if (props.inert) {
+-            document.body.classList.add("block-interactivity-".concat(id));
+-            var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
+-            allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); });
+-            return function () {
+-                document.body.classList.remove("block-interactivity-".concat(id));
+-                allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); });
+-            };
+-        }
+-        return;
+-    }, [props.inert, props.lockRef.current, props.shards]);
+     var shouldCancelEvent = React.useCallback(function (event, parent) {
+         if ('touches' in event && event.touches.length === 2) {
+             return !lastProps.current.allowPinchZoom;
+@@ -139,8 +124,5 @@ export function RemoveScrollSideCar(props) {
+             document.removeEventListener('touchstart', scrollTouchStart, nonPassive);
+         };
+     }, []);
+-    var removeScrollBar = props.removeScrollBar, inert = props.inert;
+-    return (React.createElement(React.Fragment, null,
+-        inert ? React.createElement(Style, { styles: generateStyle(id) }) : null,
+-        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
++    return (React.createElement(React.Fragment, null));
+ }

From 673ff39fc6f0f0dda5000ec91126fd4b0d2880aa Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Mon, 15 Apr 2024 12:46:01 -0700
Subject: [PATCH 11/16] `patch-package --reverse` before vercel caches it

---
 vercel.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vercel.json b/vercel.json
index 7dc20c6f83..f75b18a842 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,5 +1,5 @@
 {
-  "buildCommand": "API_MODE=msw npm run build && cp mockServiceWorker.js dist/",
+  "buildCommand": "API_MODE=msw npm run build && cp mockServiceWorker.js dist/ && npx patch-package --reverse",
   "outputDirectory": "dist",
   "headers": [
     {

From eb67e2c4a7729f0c45f70fec09fab32c83fafb38 Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Mon, 15 Apr 2024 12:40:44 -0700
Subject: [PATCH 12/16] patch out the other react-remove-scroll-bar reference

---
 patches/react-remove-scroll+2.5.5.patch | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/patches/react-remove-scroll+2.5.5.patch b/patches/react-remove-scroll+2.5.5.patch
index c743c0adff..2030a52c9e 100644
--- a/patches/react-remove-scroll+2.5.5.patch
+++ b/patches/react-remove-scroll+2.5.5.patch
@@ -45,3 +45,23 @@ index 08eda83..e3ef7cb 100644
 -        removeScrollBar ? React.createElement(RemoveScrollBar, { gapMode: "margin" }) : null));
 +    return (React.createElement(React.Fragment, null));
  }
+diff --git a/node_modules/react-remove-scroll/dist/es2015/UI.js b/node_modules/react-remove-scroll/dist/es2015/UI.js
+index 26c94a8..75d91ae 100644
+--- a/node_modules/react-remove-scroll/dist/es2015/UI.js
++++ b/node_modules/react-remove-scroll/dist/es2015/UI.js
+@@ -1,6 +1,5 @@
+ import { __assign, __rest } from "tslib";
+ import * as React from 'react';
+-import { fullWidthClassName, zeroRightClassName } from 'react-remove-scroll-bar/constants';
+ import { useMergeRefs } from 'use-callback-ref';
+ import { effectCar } from './medium';
+ var nothing = function () {
+@@ -29,8 +28,4 @@ RemoveScroll.defaultProps = {
+     removeScrollBar: true,
+     inert: false,
+ };
+-RemoveScroll.classNames = {
+-    fullWidth: fullWidthClassName,
+-    zeroRight: zeroRightClassName,
+-};
+ export { RemoveScroll };

From a48a0cc18416da4acf78e053c4e918999bd7f3aa Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Mon, 15 Apr 2024 13:27:06 -0700
Subject: [PATCH 13/16] save another 31 bytes, why not

---
 patches/react-remove-scroll+2.5.5.patch | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/patches/react-remove-scroll+2.5.5.patch b/patches/react-remove-scroll+2.5.5.patch
index 2030a52c9e..9f3b2f250c 100644
--- a/patches/react-remove-scroll+2.5.5.patch
+++ b/patches/react-remove-scroll+2.5.5.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-remove-scroll/dist/es2015/SideEffect.js b/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
-index 08eda83..e3ef7cb 100644
+index 08eda83..e48ccd6 100644
 --- a/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
 +++ b/node_modules/react-remove-scroll/dist/es2015/SideEffect.js
 @@ -1,7 +1,4 @@
@@ -10,10 +10,11 @@ index 08eda83..e3ef7cb 100644
  import { nonPassive } from './aggresiveCapture';
  import { handleScroll, locationCouldBeScrolled } from './handleScroll';
  export var getTouchXY = function (event) {
-@@ -20,23 +17,11 @@ export function RemoveScrollSideCar(props) {
+@@ -19,24 +16,11 @@ export function RemoveScrollSideCar(props) {
+     var shouldPreventQueue = React.useRef([]);
      var touchStartRef = React.useRef([0, 0]);
      var activeAxis = React.useRef();
-     var id = React.useState(idCounter++)[0];
+-    var id = React.useState(idCounter++)[0];
 -    var Style = React.useState(function () { return styleSingleton(); })[0];
 +    var Style = React.useState({})[0];
      var lastProps = React.useRef(props);
@@ -35,7 +36,7 @@ index 08eda83..e3ef7cb 100644
      var shouldCancelEvent = React.useCallback(function (event, parent) {
          if ('touches' in event && event.touches.length === 2) {
              return !lastProps.current.allowPinchZoom;
-@@ -139,8 +124,5 @@ export function RemoveScrollSideCar(props) {
+@@ -139,8 +123,5 @@ export function RemoveScrollSideCar(props) {
              document.removeEventListener('touchstart', scrollTouchStart, nonPassive);
          };
      }, []);

From 5d0e6fbab9cf8e48bc9e6c642b15ab20db207bae Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Tue, 23 Apr 2024 10:09:07 -0700
Subject: [PATCH 14/16] Revert "remove style-src 'unsafe-inline' :)"

This reverts commit 22f40bbfc2aabb39646f5f40f8b79b5e817f47ce.
---
 vercel.json    | 2 +-
 vite.config.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/vercel.json b/vercel.json
index f75b18a842..8a6ed0f9b2 100644
--- a/vercel.json
+++ b/vercel.json
@@ -7,7 +7,7 @@
       "headers": [
         {
           "key": "content-security-policy",
-          "value": "default-src 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'"
+          "value": "default-src 'self'; style-src 'unsafe-inline' 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'"
         },
         { "key": "x-content-type-options", "value": "nosniff" },
         { "key": "x-frame-options", "value": "DENY" }
diff --git a/vite.config.ts b/vite.config.ts
index 10e9fdd553..68b66e281b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -82,7 +82,7 @@ const cspNonce = randomBytes(8).toString('hex')
 const csp = headers['content-security-policy']
 const devHeaders = {
   ...headers,
-  'content-security-policy': `${csp}; script-src 'nonce-${cspNonce}' 'self'; style-src 'nonce-${cspNonce}' 'self'`,
+  'content-security-policy': `${csp}; script-src 'nonce-${cspNonce}' 'self'`,
 }
 
 // see https://vitejs.dev/config/

From 21b5ca36ad11ca6243f41ec613b97dec4eaa1181 Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Tue, 23 Apr 2024 10:12:20 -0700
Subject: [PATCH 15/16] Revert "fix the docs and test"

This reverts commit 06e13cd5b60f4f950c861e1f4544ea6fb69a228c.
---
 docs/csp-headers.md  | 3 ++-
 test/e2e/meta.e2e.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/csp-headers.md b/docs/csp-headers.md
index 3d59333e6a..1d24947dc8 100644
--- a/docs/csp-headers.md
+++ b/docs/csp-headers.md
@@ -11,11 +11,12 @@ The base headers are defined in `vercel.json` and imported into `vite.config.ts`
 The `content-security-policy` is based on the recommendation by the [OWASP Secure Headers Project](https://owasp.org/www-project-secure-headers/index.html) (click the "Best Practices" tab). The directives:
 
 - `default-src 'self'`: By default, restrict all resources to same-origin.
+- `style-src 'unsafe-inline' 'self'`: Restrict CSS to same-origin and inline use. `style=` attributes on React elements seem to count as inline.
 - `frame-src 'none'`: Disallow nested browsing contexts (`<frame>` and `<iframe>`).
 - `object-src 'none'`: Disallow `<object>` and `<embed>`.
 - `form-action 'none'`: Disallow submitting any forms with an `action` attribute (none of our forms are the traditional kind and instead post to the server in JS).
 - `frame-ancestors 'none'`: Disallow embedding this site with things like `<iframe>`; used to prevent click-jacking attacks.
 
-In development mode, additional `script-src` and `style-src` CSP directives are added which reference a randomly-generated nonce. [Vite injects this in the generated index.html](https://vitejs.dev/guide/features.html#content-security-policy-csp) so that the dev-mode scripts and stylesheets can load. We do this instead of allowing `'unsafe-inline'` because I'm not sure whether tests run against dev bits or not, and this helps get dev builds much closer to production.
+In development mode, an additional `script-src` CSP directive is added which references a randomly-generated nonce. [Vite injects this in the generated index.html](https://vitejs.dev/guide/features.html#content-security-policy-csp) so that the dev-mode scripts can load. We do this instead of allowing `'unsafe-inline'` because I'm not sure whether tests run against dev bits or not, and this helps get dev builds much closer to production.
 
 Also set are `x-content-type-options: nosniff` and `x-frame-options: DENY`.
diff --git a/test/e2e/meta.e2e.ts b/test/e2e/meta.e2e.ts
index b4ce1f47db..3c5f267b75 100644
--- a/test/e2e/meta.e2e.ts
+++ b/test/e2e/meta.e2e.ts
@@ -13,7 +13,7 @@ test('CSP headers', async ({ page }) => {
   expect(response?.headers()).toMatchObject({
     // note nonce is represented as [0-9a-f]+
     'content-security-policy': expect.stringMatching(
-      /^default-src 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'nonce-[0-9a-f]+' 'self'; style-src 'nonce-[0-9a-f]+' 'self'$/
+      /^default-src 'self'; style-src 'unsafe-inline' 'self'; frame-src 'none'; object-src 'none'; form-action 'none'; frame-ancestors 'none'; script-src 'nonce-[0-9a-f]+' 'self'$/
     ),
     'x-content-type-options': 'nosniff',
     'x-frame-options': 'DENY',

From 273514d09832a449f42157d00e551074d86549a3 Mon Sep 17 00:00:00 2001
From: iliana etaoin <iliana@oxide.computer>
Date: Tue, 23 Apr 2024 10:16:19 -0700
Subject: [PATCH 16/16] update docs

---
 docs/csp-headers.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/csp-headers.md b/docs/csp-headers.md
index 1d24947dc8..23998480c7 100644
--- a/docs/csp-headers.md
+++ b/docs/csp-headers.md
@@ -11,7 +11,7 @@ The base headers are defined in `vercel.json` and imported into `vite.config.ts`
 The `content-security-policy` is based on the recommendation by the [OWASP Secure Headers Project](https://owasp.org/www-project-secure-headers/index.html) (click the "Best Practices" tab). The directives:
 
 - `default-src 'self'`: By default, restrict all resources to same-origin.
-- `style-src 'unsafe-inline' 'self'`: Restrict CSS to same-origin and inline use. `style=` attributes on React elements seem to count as inline.
+- `style-src 'unsafe-inline' 'self'`: Restrict CSS to same-origin and inline use. See #2183 for eventually removing `'unsafe-inline'`
 - `frame-src 'none'`: Disallow nested browsing contexts (`<frame>` and `<iframe>`).
 - `object-src 'none'`: Disallow `<object>` and `<embed>`.
 - `form-action 'none'`: Disallow submitting any forms with an `action` attribute (none of our forms are the traditional kind and instead post to the server in JS).