CSP support for vite's injectClientScript

[meck93]

What is the feature you are proposing?

First of all, thanks a lot for the the work on Hono and HonoX. It is awesome!

While experimenting with HonoX and the secure-headers middleware, I've noticed a little issue with the DEV setup. The dev-server.ts has an option (activated by default) to inject the client script (injectClientScript) which does the following:

if (
  options?.injectClientScript !== false &&
  response.headers.get('content-type')?.match(/^text\/html/)
) {
  const script = '<script>import("/@vite/client")</script>'
  return injectStringToResponse(response, script)
}
return response

This currently results in a CSP violation as the nonce is not set on the script tag.

The following change should do the trick:

if (
  options?.injectClientScript !== false &&
  response.headers.get('content-type')?.match(/^text\/html/)
) {
  const nonce = response.headers.get('content-security-policy')?.match(/'nonce-([^']+)'/)?.[1]
  const script = `<script${nonce ? ` nonce="${nonce}"` : ""}>import("/@vite/client")</script>`
  return injectStringToResponse(response, script)
}
return response

Related to

• CSP support for CSS Helper hono#3694