Content Security Policy 'unsafe-eval' issue

[SviatoslavK]

Hello, I have a problem with Fluxor and CSP. When I run application a get an error:

`Unhandled exception rendering component: JavaScript error Fluxor.Exceptions.StoreInitializationException: JavaScript error ---> Microsoft.JSInterop.JSException: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

  EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

      at window.tryInitializeFluxor (https://localhost:5001/_content/Fluxor.Blazor.Web/scripts/index.js:8:9)`

It's strange that I've not found a mention of such a problem anywhere, as it seems to me this is a very common case with CSP
How I can solve this issue? Thank you

[mrpmorris]

Is this just a WASM app, or an offline app or something like that?

Try removing use of the redux tools.

[SviatoslavK]

No, this is Blazor server app. About redux tools it was my first guess and I immediately removed UseReduxDevTools, but it didn't help

[mrpmorris]

Could you put a javascript breakline on it in your browser and see what the value f the script variable is?

[SviatoslavK]

script: "\n"

[mrpmorris]

I have just pushed 4.2.2-Alpha, could you give that a try when it appears on Nuget, please?

You'll have to tick the box in Visual Studio to show preview packages.

If you wouldn't mind, could you try it with your project as-is, and then also tell me if you get the same problem if you add ReduxDevTools middleware?

Thanks!

[SviatoslavK]

Thank you for new version! It's work as expected without UseReduxDevTools(), but with redux tools I get same error

[mrpmorris]

Excellent, thank you!

Which browser is this, what version is it, do you have any special security restrictions enabled, is it a WASM or Server app, is WASM is it asp.net hosted, are you able to give me a project that reproduces the problem, are you bored of questions yet?

[SviatoslavK]

• Chrome 95.0.4638.69
• No restrictions
• Blazor Server app

I think you can reproduce the problem on any project by adding a CSP block to the root html page. In BlazorServer this is _Host.cshtm <meta http-equiv="Content-Security-Policy" content="base-uri 'self'; block-all-mixed-content; default-src 'self'; img-src data: https:; object-src 'none'; script-src 'self'; connect-src 'self' ws:; style-src 'self' 'unsafe-inline'; upgrade-insecure-requests;">

[mrpmorris]

There's no real way to execute dynamically injected JavaScript without using eval(). Not that I know of anyway.

If you know a way that doesn't require a 3rd party library, please let me know.

[SviatoslavK]

Can you advise me some development documentation to better understand whats going on there and why dynamically inject JavaScript is needed in the ReduxDevTools package?

[mrpmorris]

When the browser fetches a document with embedded JS it recognises it and registers/executes it.

When you update the DOM it does not. So if you blazor-render a <script> tag it is programmatically injected via the DOM but the browser doesn't register it. So you cannot call the injected JS, which is why you have to grab its contents and call eval()

[SviatoslavK]

Ok, I understand. Thanks for investigating and your time!

[mrpmorris]

You are welome!