NuxtJS Content Security Policy

0
votes

Unable to apply a content security policy without including unsafe-inline for scripts and styles. NuxtJS generates both inline styles and scripts upon build.

As my application is static, NuxtJS default configuration for this does not work as it requires Server side rendering to achieve this. I haven't been able to find a way to inject a nonce into the build process to solve this issue.

My current setup is to apply Security HTTP Headers to the domain is using a cloudflare worker which does not touch the application. Therefore I am looking for options how to integrate this between the application and edge worker https://scotthelme.co.uk/csp-nonces-the-easy-way-with-cloudflare-workers/

Came across couple of injecting methods using middleware while browsing nuxtjs github issues which I can't get to work.

Has anyone found a solution for generating a policy which does not include unsafe-inline, either directly in the application or externally?

1
http-headersnuxt.jscontent-security-policycloudflare-workers

1 Answers

0
votes

NuxtJS generates both inline styles and scripts upon build. ... I haven't been able to find a way to inject a nonce into the build process to solve this issue

From the point of view of the CSP

  • there are 3 types inline scripts and only 1 of them may be allowed using 'nonce-value'
  • there are 3 types on inline styles (including JS call of .setAttribute() function - yeah it's requires 'unsafe-inline' in style-src too), and only 1 of them may be allowed using 'nonce-value'.

Therefore, in an abstract form, your task is not solvable, you need specifics.

Assuming you are only using <script>...</script> and <style>...</style> constructs (these may be allowed using 'nonce-value') you have 3 options:

  1. use 'nonce-value'
  2. use 'hash-value'
  3. place script/style into external file and use 'self'

In case of usage document.createElement('style'), opt 1 is preferable you just set style.nonce = 'generated_base64_value' attribute. Because to calculate 'hash-value' is not easy in this case.

In case of usage <script>...</script> and <style>...</style> much easier to calculate hashes or move all to external file (opts 2, 3). To use cloudflare workers is complicate the code unnecessarily in this case.

Some middleware generates a lot of separate <style>.red {color:red;}</style>, <style>.r_padd {padding-right:20px;}</style>, etc. It is a headache for opts 1, 2, but easy solvable via opt 3.

If you use third-party scripts, for example Google Tag Manager, there is no way to get rid of 'unsafe-inline' scripts, and from 'unsafe-eval' too in some cases.

PS: There is no universal way. And not knowing what is under the hood of your car, it is difficult to give advice on how to afterburner it.