☰

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

tag-icon • tag-icon linux ubuntu security nginx headers
内容安全策略导致网站呈现奇怪？

我正在尝试弄清楚为什么Content-Security-Policy在我的 nginx conf 中启用标头后，我的网站上的某些元素看起来有点奇怪。所有内容都正确加载（状态 200），但某些图像可能有点小，或者浏览器中的某些 html 渲染略有偏差。这很奇怪；我真的无法解释。Content-Security-Policy 的正确用法是什么？为什么它会破坏 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;
    }
  }
}

答案1

如果不知道网站的内容，就很难知道 CSP 为何会对网站产生明显的影响。也许您正在使用一个可以更改网站图片文件的构建工具，或者可能使用一个可以微妙地改变网站外观的框架。

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

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

更详细地讨论了这一点MDN 网络文档。如文章中所述，请务必同时包含报告 uri和报告给出于兼容性原因。您还可以使用 仅内容安全政策报告这可能更容易实现和解释。参见这里。

如果您使用的是 Chrome，则可以在开发工具控制台中仔细检查与 CSP 相关的错误，因为 Chrome 对此有相当慷慨的错误报告。无需进行上述更改即可完成此操作。

相关内容