Adding nonce in CSP response header and replace the nonce in index.html

[bdevos]

I am currently transitioning a React frontend application to become part of the Quarkus backend, instead of using a separate Nginx container exclusively for the frontend.

The integration with Quarkus Quinoa seems really promising and it's been great for development thus far.

However, I encountered a challenge when attempting to add a nonce that is necessary for our Content Security Policy. I have implemented similar solutions in other applications and I'm conversant with the entire process when incorporating the frontend in a standalone Nginx container. Yet, I am unable to figure out how to implement this with Quinoa.

What I seek is a way to filter the request that is handling index.html. Once that's done, I should be able to insert the nonce into the CSP response header and modify the HTML content set to return in the response.

I've tried several filtering methods but none appear to give me access to the requests that Quinoa handles.

As the nonce is a requirement under my company's policy, skipping it isn't an option. I wonder if there's a simpler approach I might have overlooked. Alternatively, would it be smarter to run a development server with Quarkus Quinoa, and then build an Nginx image for the frontend during the release stage?

[melloware]

@bdevos i totally get what you are trying to do. Do you mind telling me which React build tool you are using with Quinoa? CRA? Vite? Rewired?

[bdevos]

@bdevos i totally get what you are trying to do. Do you mind telling me which React build tool you are using with Quinoa? CRA? Vite? Rewired?

Vite. Its documentation for the nonce support is rather minimal, but works as expected: https://vitejs.dev/guide/features#nonce-random

[melloware]

HMM OK according to that its all handled by Vite and Quinoa is just deferring to vite dev and vite build so it should be generating your index.xhtml and code with proper nonces?

[bdevos]

In Vite you can configure a nonce, but in order for that nonce to have any effect, it needs to be randomised on every response.

When in the Vite config you set:

html: {
  cspNonce: 'NONCE_PLACEHOLDER',
},

The Vite build output in index.html will contain it in the script tag like this:

<script type="module" crossorigin src="/assets/index-DYyGYer9.js" nonce="NONCE_PLACEHOLDER"></script>

What I do now with other applications, is that I replace that NONCE_PLACEHOLDER with a random nonce on every request before sending the response to the user. To make it all work the same random nonce has to be included in the CSP response header.

[melloware]

AHHH I see. I am going to convert this to an issue as i think we should definitely support this.

[melloware]

OK issue opened: #751