内容安全策略会导致奇怪的网站呈现？

我试图弄清楚为什么Content-Security-Policy在我的nginx conf中启用了标头后，我网站上的某些元素看起来有些奇怪。一切正常加载（状态200），但是某些图像可能会更小一些，或者某些html呈现在浏览器中略有下降。这很奇怪我真的无法解释。内容安全策略的正确用法是什么？为何它会破坏100％的网站内容（无CDN）源自根目录或/ uploads的网站？

user www-data;
worker_processes  auto;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    charset utf-8;
    server_tokens  off;

    add_header X-XSS-Protection "1; mode=block" always;
    add_header X-Frame-Options DENY;
    add_header Referrer-Policy "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Pragma public;
    add_header Cache-Control "public";
    add_header Content-Security-Policy "default-src 'self';";

    include /etc/nginx/conf.d/*.conf;

    gzip on;
    gzip_comp_level 2;
    gzip_min_length 1000;

    server {
    listen 127.0.0.1:80;
    server_name website.com;
    root /var/www/website/;
    index index.php index.html;

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_param HTTP_PROXY "";
        fastcgi_pass 127.0.0.1:9000;
        include fastcgi_params;
    }

    location ~* .(png|ico|gif|jpg|jpeg|css|html|txt|php)$ {
        expires 2d;
        add_header Pragma public;
        add_header Cache-Control "public";
    }

    if ($request_method !~ ^(GET|POST)$) {
         return 444;
    }
  }
}

— user775824
source

至少没有屏幕截图很难分辨。如果要对此进行调试，我将检索带有wget或curl带有和不带Content-Security-Policy的所有页面元素，并比较结果。我也会尝试使用其他浏览器...

— xenoid

谢谢你的建议。然后比较卷曲输出？我到底要寻找什么输出差异？

— user775824

不知道。迪夫（Diff）是您的朋友...您可能还会发现某些元素缺失。

— xenoid

不知道您网站的内容是什么，很难知道CSP为什么会对它产生明显的影响。也许您使用的是可更改网站图像文件的构建工具，或者是可能以微妙的方式更改网站外观的框架。

为确定是否应归咎于内容安全策略，您可以通过以下方式启用违规报告：

Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname

MDN Web文档中对此进行了更详细的讨论。如本文所述，出于兼容性原因，请确保同时包含report-uri和report-to。您也可以使用 Content-Security-Policy-Report-Only，它可能更易于实现和解释。看这里。

如果您使用的是Chrome，则可以在Dev工具控制台中再次检查与CSP相关的错误，因为Chrome对此具有非常丰富的错误报告。无需进行上述更改即可完成此操作。

— baelx
source