0

I followed the README instructions from vfat.tools (https://github.com/vfat-tools/vfat-tools), i.e. ran npm install and finally npm run dev. I see the following on the console:

[Browsersync] Access URLs:

   Local: http://localhost:3000
External: http://192.168.0.197:3000

      UI: http://localhost:3001

UI External: http://localhost:3001

[Browsersync] Serving files from: dist [Browsersync] Watching files...

However, when I open localhost:3000 to access the UI, I see the following error on Chrome`s console:

Refused to execute inline script because it violates the following Content Security Policy 
directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-
ACotEtBlkqjCUAsddlA/3p2h7Q0iHuDXxk577uNsXwA='), or a nonce ('nonce-...') is required to enable 
inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' 
is used as a fallback.

Options to solve this problem include adding unsafe-inline somewhere in the code (for example -> Script causes “Refused to execute inline script: Either the 'unsafe-inline' keyword, a hash… or a nonce is required to enable inline execution”), but I also have the impression this is not good practice.

How can I get the webpage to load properly?

granty
  • 7,234
  • 1
  • 14
  • 21
wisk
  • 3
  • 1

1 Answers1

1

There is 3 kinds of inline scripts: <script>...</script>, <a href='javascript:void(0)' and <a onclick='eventHandler()'.
The first one you can resolve using 'nonce-value' or 'hash-value', the last two require using of mandatory 'unsafe-inline' (or code refactoring).

Therefore to get rid of this error you need to know which kind of inline script caused a violation.

As I can see vfat.tools uses document.getElementById("theme-button").onclick = setTheme (and maybe somewhere else something like that is used). Therefore you have to use 'unsafe-inline' or to rewrite this part of code using addEventListener() function to bind an event listener.

granty
  • 7,234
  • 1
  • 14
  • 21