fix the docs and test

Author: iliana

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`.

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',