Specify a nonce for all scripts

[humphd]

Fixes #172.

In order to protect our code from XSS attacks, we can add a cryptographically-generated, random string (i.e., a nonce) to each <script nonce="...here...">. This nonce will get recreated by the server on every reload of the page, so only scripts we send from the server can be executed (i.e., the browser will refuse to execute any others, like those injected maliciously).

Making this work in Remix wasn't obvious, and requires a few things:

1. The Express server code needs to generate a nonce on every load, and pass it down to all the routes via res.locals
2. The CSP headers need to include this expected nonce via helmetjs, which uses the res.locals to access the value we already generated.
3. The Remix code needs to get access to the res.locals.nonce value via a getLoaderContext function we pass to createRequestHandler(), see https://remix.run/docs/en/v1/route/loader#context
4. The Remix root needs to define a loader() function, which accepts the context arg. This includes the nonce value.
5. The Remix root Document component calls useLoaderData() to access the nonce and passes it as a prop to all the various "script" components, see https://remix.run/docs/en/v1/file-conventions/root

In summary: we generate a nonce in Express, use it in helmetjs to define our CSP headers, then pass it through to Remix to render the script tags in the browser using the nonce.

To test this, try loading the page with the console open, and watch for any CSP issues.

[Genne23v]

@humphd I don't see any issue on my console. I was expecting to see something like nonce={hexvalue} in scripts, but I see only nonce. Is this expected result?

[humphd]

@Genne23v interestingly, the browser hides the nonce value so that it can't be used by scripts: https://stackoverflow.com/questions/55670985/google-chrome-stripping-nonce-values-from-script-tags

[Genne23v]

It works in my local without any errors.

[Eakam1007]

Looks good to me