HTTP Header Content-Security-Policy Stops Vaadin

Vaadin 6 / 7 / 8
1

We set the
Content-Security-Policy
 HTTP header and now Vaadin just shows a blank screen when we try to access it. This is Vaadin 7 and we also tried with and without SSL.

This is the value we are using: “script-src ‘self’; image-src ‘self’;”

My guess is that Vaadin is loading resources from somewhere other than the server hosting Vaadin. Any ideas? Could this be caused by the theme loading? If so, what domain name do we need to add to the header?

2

Even this does not work.
“default-src *; img-src *;media-src *; script-src *;”
And we tried different browsers.

3

Have you tried to enable reporting with the report-uri policy directive? Maybe it can help you to identify what’s wrong

HTH
Marco

4

Thanks Marco. This is the result.
Its complaingin about this in the response:

  <script type="text/javascript">//<![CDATA[
if (!window.vaadin) alert("Failed to load the bootstrap javascript: ./VAADIN/vaadinBootstrap.js?v=7.7.9");
5

I hate it when technologies don’t play nice together. It looks like the browsers might be to blame. Their interpreation of this header doesn’t like inline Javascript. And Vaadin and Atmosphere obviously use inline Javascript. I looked at the documentation for this header from several sources and there is no mention of this limitation. Does not workin firefox and chrome. It does work in IE, the last browser I would expect to work.

6

I think you have to add

script-src 'unsafe-inline' 'unsafe-eval' 'self' and

style-src 'unsafe-inline' 'self' to make it work.

Another way could be use a BootstrapListener to add a nonce attribute to all script and style tags and add
script-src ‘nonce-xxxxxxxx’ policy.
Or always with a BootstrapListener compute the hash for inline scripts and styles and use them in the script-src policy

script-src 'sha256-xxxxxx' 'sha256-yyyy' But for eval for what i have understand the only way is ‘unsafe-eval’ policy

HTH
Marco

7

Thanks again Marco, that’s almost working. The app loads but some theme resources are still not loading.

8

Ok I got it to work. Here is what I had to use:

default-src 'self'
; img-src 'self'
; media-src 'self'
; object-src 'self'
; script-src 'unsafe-inline' 'unsafe-eval' 'self'
; style-src 'unsafe-inline' 'self'

The only problem that remains is that the directives that are named ‘unsafe’ really are unsafe.
I’ve also noticed that most websites do not even set security headers at all.

And apparantly Internet Explorer doesn’t even support this header. ROTFL.

9

Kenneth Taylor:
Ok I got it to work. Here is what I had to use:

default-src 'self'
; img-src 'self'
; media-src 'self'
; object-src 'self'
; script-src 'unsafe-inline' 'unsafe-eval' 'self'
; style-src 'unsafe-inline' 'self'

The only problem that remains is that the directives that are named ‘unsafe’ really are unsafe.
I’ve also noticed that most websites do not even set security headers at all.

And apparantly Internet Explorer doesn’t even support this header. ROTFL.

Hey Kenneth, were you eventually able to identify better directives for the security headers?

I’m encoutering the same issue on Vaadin 8 now and also need something better than ‘unsafe’.

10

We are just now getting back to working on our Vaadin UIs. I will forward this to our new developer who is working on it and he can look into it again. I think we’ve moved up to Vaadin 12 though so we’ll have to test it again.

11

Just found this issue in the Vaadin repos: https://github.com/vaadin/framework/issues/5266

Seems like CSP browser protection is not possible.

12

Thanks Matthew, that is good (bad) to know.