Vaadin Flow & Content-Security-Policy (CSP)

Adding it to the correct project will help :man_facepalming: i used the wrong project

So excluding hilla, removing PWA annotation should be enough (afterwards make a vaadin dance, prepear and build frontend and finally build production)

Now it would be interesting to get the eval method cleared so we can remove the unsafe-eval from the policy header. But it looks like if that is not a problem because the script is loaded from local or? Shouldnt be security risk

unsafe-eval should not be needed. If it is needed, you still have some issues remaining in the project. Note how the crm tutorial app runs without unsafe-eval.

When i remove unsave-eval the app doesnt open, the loading bar will apper infinite. In Console no error occur. hmmm

If at some point you are able to share the project or subset of it which demonstrates the issue, it would make it easier to pinpoint the issue.

Are you on github? Maybe i can share a part of my own project to you

Definitely, tepi (Teppo Kurki) · GitHub

Hey, sorry to bump an old thread, but I too get this issue. I’ve excluded Hilla in my pom.xml, I don’t use PWA, but I get the same issue with FlowClient:

Content-Security-Policy: The page’s settings blocked a JavaScript eval (script-src) from being executed because it violates the following directive: “script-src ‘nonce-463b5742-6d28-47a9-8d4e-26d0ee1424eb’” (Missing ‘unsafe-eval’) FlowClient-CjLkgOY_.js:1:35052

Was there ever a solution for this?

You need to allow unsafe-eval unfortounately

         response.getVaadinResponse().setHeader("Content-Security-Policy",
                    "script-src 'self' 'nonce-" + nonce + "' 'unsafe-eval';");

With the latest Vaadin Version its still not possible to remove unsafe-eval from allowed

The Bowser console gives the following info:

  1. The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.

To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.

:warning: Allowing string evaluation comes at the risk of inline script injection.

  1. 1 directive
1. |Source location|Directive|Status|

| — | — | — |
|FlowClient-DyMGXbet.js:1|script-src|blocked|