Create _document for Content-Security-Policy and other headers

[vingkan]

NextJS has some struggles related to implementing a Content-Security-Policy.

Long story short, in development NextJS generates and evaluates scripts and styles in an unsafe way. It required some messing around with how our NextJS pages are rendered to add a more secure Content-Security-Policy and keep the current functionality.

For more background, check out these links:

• GitHub issue on the NextJS repository explaining the challenges
• Article by Rees Morris explaining a workaround

The advanced feature in the NextJS documentation did not work. But I was able to use the _document.js page and most of Rees Morris' solution to add the headers. The main change I made, so that the headers would work on our static site in production, was to manually set a meta tag in the Head tag with the header.

Since our site is statically rendered, the nonce will be the same value for each build and available in the source code. I worry that this means attackers can retrieve the nonce and use it to inject a script past the policy. However, I tried to inject a script from a different origin with the same nonce, and it was still rejected by the policy.

I will work with @Jmacias2019 to implement our Content-Security-Policy. Hopefully we can use this approach for the other headers as well.

CC: @olakukielko

[Jmacias2019]

LGTM