CSP error on entry.client.tsx

[scefali]

I am using a modified version of Epic Stack that uses Fastify instead of Express. Here is my repo. You can run it with just npm install and npm run dev, no need to get any enviornment variables set up. I am trying to get CSP working with nonce but I'm having problems with the dynamically imported entry.client.tsx that appears like this:

        <script nonce="b177de34200dbf4e1c73b2f3c1c7ef50" type="module" async="">
            import "/@id/__x00__virtual:remix/inject-hmr-runtime";
            import "/@id/__x00__virtual:remix/browser-manifest";
            import*as route0 from "/app/root.tsx";
            import*as route1 from "/app/routes/_marketing+/index.tsx";

            window.__remixRouteModules = {
                "root": route0,
                "routes/_marketing+/index": route1
            };

            import("/app/entry.client.tsx");
        </script>

It has the right nonce value and the other scripts are loading fine, but maybe there is something weird about dynamic imports? I don't quite understand how they are supposed to work with nonces and CSP rules and obviously this is all baked into Remix. Here is the error I'm getting in the browser:

[Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-b177de34200dbf4e1c73b2f3c1c7ef50'". Either the 'unsafe-inline' keyword, a hash ('sha256-FeKBGzRHcROv0xd1BUE68Cy1yefbayaeP0AhzHm/mNo='), or a nonce ('nonce-...') is required to enable inline execution.

The setup with helmet and nonce handling is pretty much exactly the same as with Epic Stack, but for some reason I'm getting this error. All the other scripts are loading just fine but the entry.client.tsx is giving me lots of problems. What's going on here?

[scefali]

@kentcdodds Do you know how CSP works for the dynamic script import for Epic Stack? I think you might be the best equipped to answer this question.

[kentcdodds]

This is at the bottom of https://www.epicstack.dev:

<script nonce="3f9e9f44d7738456c84e842ec748c9f0" type="module" async="">
  import "/assets/manifest-5e93d00b.js";
  import * as route0 from "/assets/root-hFjxttKv.js";
  import * as route1 from "/assets/index-CsmT6xwG.js";

  window.__remixRouteModules = {"root":route0,"routes/_marketing+/index":route1};

  import("/assets/entry.client-1pyQZZ2h.js");
</script>

Seems like it's about the same situation as what you have but we have no warnings. I'm afraid I don't know why you're having issues.

[scefali]

@kentcdodds I figured it out! It's the single fetch future flag:

unstable_singleFetch: true

So, it has nothing to do with Fastify or this server file and in fact the bug would exist on Epic Stack if enabled this flag. I don't know enough about Remix internals to know why this breaks it, but it seems like something the Remix team should fix before single fetch becomes the standard.

[HriBB]

Do you pass nonce to renderToPipeableStream in entry.server.tsx?

[scefali]

@HriBB I did:

const { pipe, abort } = renderToPipeableStream(
  <NonceProvider value={nonce}>
    <RemixServer context={remixContext} url={request.url} />
  </NonceProvider>

[HriBB]

You need to pass it as a second parameter to renderToPipeableStream ;)

The part about <RemixServer> is mentioned in the single-fetch docs, but not the part about renderToPipeableStream.

Here's my working entry.server.tsx

/**
 * By default, Remix will handle generating the HTTP Response for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.server
 */

import { PassThrough } from 'node:stream'

import type { AppLoadContext, EntryContext } from '@remix-run/node'
import { createReadableStreamFromReadable } from '@remix-run/node'
import { RemixServer } from '@remix-run/react'
import { isbot } from 'isbot'
import { renderToPipeableStream } from 'react-dom/server'

import { NonceProvider } from '~/utils/nonce'

const ABORT_DELAY = 5_000

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  // This is ignored so we can keep it in the template for visibility.  Feel
  // free to delete this parameter in your app if you're not using it!
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  loadContext: AppLoadContext,
) {
  return isbot(request.headers.get('user-agent') || '')
    ? handleBotRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
        loadContext,
      )
    : handleBrowserRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
        loadContext,
      )
}

function handleBotRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  loadContext: AppLoadContext,
) {
  return new Promise((resolve, reject) => {
    let shellRendered = false
    const nonce = String(loadContext.cspNonce) ?? undefined
    const { pipe, abort } = renderToPipeableStream(
      <NonceProvider value={nonce}>
        <RemixServer
          context={remixContext}
          url={request.url}
          abortDelay={ABORT_DELAY}
          nonce={nonce}  // <<<<<<<< here
        />
      </NonceProvider>,
      {
        nonce, // <<<<<<<< here
        onAllReady() {
          shellRendered = true
          const body = new PassThrough()
          const stream = createReadableStreamFromReadable(body)

          responseHeaders.set('Content-Type', 'text/html')

          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            }),
          )

          pipe(body)
        },
        onShellError(error: unknown) {
          reject(error)
        },
        onError(error: unknown) {
          responseStatusCode = 500
          // Log streaming rendering errors from inside the shell.  Don't log
          // errors encountered during initial shell rendering since they'll
          // reject and get logged in handleDocumentRequest.
          if (shellRendered) {
            console.error(error)
          }
        },
      },
    )

    setTimeout(abort, ABORT_DELAY)
  })
}

function handleBrowserRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  loadContext: AppLoadContext,
) {
  return new Promise((resolve, reject) => {
    let shellRendered = false
    const nonce = String(loadContext.cspNonce) ?? undefined
    const { pipe, abort } = renderToPipeableStream(
      <NonceProvider value={nonce}>
        <RemixServer
          context={remixContext}
          url={request.url}
          abortDelay={ABORT_DELAY}
          nonce={nonce}  // <<<<<<<< here
        />
      </NonceProvider>,
      {
        nonce, // <<<<<<<< and here
        onShellReady() {
          shellRendered = true
          const body = new PassThrough()
          const stream = createReadableStreamFromReadable(body)

          responseHeaders.set('Content-Type', 'text/html')

          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            }),
          )

          pipe(body)
        },
        onShellError(error: unknown) {
          reject(error)
        },
        onError(error: unknown) {
          responseStatusCode = 500
          // Log streaming rendering errors from inside the shell.  Don't log
          // errors encountered during initial shell rendering since they'll
          // reject and get logged in handleDocumentRequest.
          if (shellRendered) {
            console.error(error)
          }
        },
      },
    )

    setTimeout(abort, ABORT_DELAY)
  })
}

[JustFly1984]

@HriBB Where can I look at <NonceProvider value={nonce}> code?

[HriBB]

https://github.com/epicweb-dev/epic-stack/blob/main/app%2Futils%2Fnonce-provider.ts

[JustFly1984]

I'm using cloudflare, and I can't make it work with nonce with v3_singleFetch.

createReadableStreamFromReadable is not available for import from @remix-run/cloudflare, and if I use it from @remix-run/node, I get crypto, stream package errors if I use renderToPipeableStream.

Trying to add nonce to renderToReadableStream - and getting the same error.

My server entry:

import { RemixServer } from '@remix-run/react'
import { createInstance, type i18n } from 'i18next'
import type { AppLoadContext, EntryContext } from '@remix-run/node'
import { isbot } from 'isbot'
import ReactDOMServer from 'react-dom/server'
import { I18nextProvider, initReactI18next } from 'react-i18next'

import { i18next } from 'app/i18next.server.ts'
import { defaultNS, fallbackLng, resources, supportedLngs } from 'app/i18n.ts' // your i18n configuration file

import { Providers } from 'app/providers.tsx'

const { renderToReadableStream } = ReactDOMServer

export const streamTimeout = 5000

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  _loadContext: AppLoadContext
): Promise<unknown> {
  const instance = createInstance()
  const lng = await i18next.getLocale(request)
  const ns = i18next.getRouteNamespaces(remixContext)

  await instance
    .use(initReactI18next)
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    .init({ supportedLngs, defaultNS, resources, fallbackLng, lng, ns })

  return isbot(request.headers.get('user-agent'))
    ? handleBotRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
        instance
      )
    : handleBrowserRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
        instance
      )
}

async function handleBotRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  i18next: i18n
): Promise<unknown> {
  return handleRequestInternal(
    request,
    responseStatusCode,
    responseHeaders,
    remixContext,
    i18next
  )
}

async function handleBrowserRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  i18next: i18n
): Promise<unknown> {
  return handleRequestInternal(
    request,
    responseStatusCode,
    responseHeaders,
    remixContext,
    i18next
  )
}

async function handleRequestInternal(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  i18next: i18n
): Promise<unknown> {
  const abortController = new AbortController()

  const timeout = globalThis.setTimeout(() => {
    abortController.abort()
  }, streamTimeout + 1000)

  try {
    const stream = await renderToReadableStream(
      <I18nextProvider i18n={i18next}>
        <Providers>
          <RemixServer context={remixContext} url={request.url} />
        </Providers>
      </I18nextProvider>,
      {
        nonce: 'DhcnhD3khTMePgXw',
        signal: abortController.signal,
        onError: (error: unknown): void => {
          if (error instanceof Error || typeof error === 'string') {
            console.error(error)
          } else {
            console.error(JSON.stringify(error))
          }

          globalThis.clearTimeout(timeout)
        },
      }
    )

    responseHeaders.set('Content-Type', 'text/html')

    // Automatically timeout the React renderer after 6 seconds, which ensures
    // React has enough time to flush down the rejected boundary contents

    globalThis.clearTimeout(timeout)

    return new Response(stream, {
      headers: responseHeaders,
      status: responseStatusCode,
    })
  } catch (error: unknown) {
    if (error instanceof Error || typeof error === 'string') {
      console.error(error)
    } else {
      console.error(JSON.stringify(error))
    }

    globalThis.clearTimeout(timeout)

    return new Response(null, { status: 500 })
  }
}

disabling v3_singleFetch fixes CSP.

installGlobals({ nativeFetch: true }) doesn't work with argument. Removing installGlobals crashed dev with :method error so the only way to use it is installGlobals().

Replacing json with data in routes/api_.locales.ts crashes dev with hydration errors. It shows SSR text for beginning, and then replaces it with keys, and a lot of hydration errors. rolled it back

[robin-siegl]

i stumbled on the same issue with cloudflare, i'm glad that i'm not the only one with this issue

[tomerzcod7]

I can't get this to work. Anyone figured this out?

[gjc14]

https://github.com/gjc14/rrv7-csp

You have to pass nonce from entry.server.tsx, if you don't have one, run npx react-router reveal first.