☰

內容安全策略導致奇怪的網站渲染？

tag-icon • tag-icon linux ubuntu security nginx headers
內容安全策略導致奇怪的網站渲染？

我試圖找出為什麼Content-Security-Policy在我的 nginxconf 中啟用了標頭後，我網站上的一些元素看起來有點奇怪。一切都正確載入（狀態 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;
    }
  }
}

答案1

如果不知道您網站的內容是什麼，就很難知道為什麼 CSP 會對其產生明顯的影響。也許您正在使用一個建立工具來更改網站的圖像文件，或者可能使用一個框架以微妙的方式更改網站的外觀。

為了確定內容安全性原則是否是罪魁禍首，您可以透過以下方式啟用違規報告：

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

這在 中進行了更詳細的討論MDN 網路文檔。正如文章中提到的，請務必包括兩者報告 uri和報告對象出於兼容性原因。你也可以使用 僅內容安全策略報告這可能更容易實施和解釋。看這裡。

如果您使用的是 Chrome，則可以在開發工具控制台中仔細檢查與 CSP 相關的錯誤，因為 Chrome 對此有相當豐富的錯誤報告。無需進行上述更改即可完成此操作。

相關內容