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

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'; 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:

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

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.

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.

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.

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;

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.