Content-Security-Policy and visual artifact when proxying GUI with nginx

[sancho (Alex)]

When using nginx as reverse proxy for Syncthing GUI a strange visual artifact appears. Playing around with my nginx config I’ve found that the following line is guilty:

add_header Content-Security-Policy "default-src https: data: blob:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' https://www.gstatic.com/cv/js/sender/v1/cast_sender.js; worker-src 'self' blob:; connect-src 'self'; object-src 'none'; frame-ancestors 'self'";

It seems that GUI’s send requests to /rest/system/upgrade and it produces a CSRF Error which produces this visual artifact:

[AudriusButkevicius]

I am not sure what the artifact is, but surely you can just remove the line?

[sancho (Alex)]

Yes, removing this line, removes this artifact. I use this setting globally in my nginx config. It’s based on Mozilla recommendation. Of course, I can remove it for syncthing subdomain.

[AudriusButkevicius]

It probably breaks our CSRF in some way. I don’t know why it does that but I also I don’t think it’s a good use of anyones time trying to understand why, hence sadly if you want answers, you’ll have to do some digging yourself.

[sancho (Alex)]

I’ve found that former CSRF error was unrelated to this visual artifact.

If I either remove style-src 'self' 'unsafe-inline'; or add 'unsafe-eval' to script-src Content-Security-Policy, it removes this artifact.

[sancho (Alex)]

According to Firefox Console:

Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). angular.js:978:6

with the line new Function(''); at

if (!active) {
    try {
      /* jshint -W031, -W054 */
      new Function('');
      /* jshint +W031, +W054 */
    } catch (e) {
      active = true;
    }
  }