Политика безопасности контента, вызывающая странный рендеринг сайта?

Question

Я пытаюсь выяснить, почему при включенном заголовке Content-Security-Policy в моей конфигурации nginx некоторые элементы на моем сайте кажутся немного странными. Все загружается правильно (состояние 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;
    }
  }
}

Answer 1

Не зная содержания вашего сайта, сложно понять, почему CSP оказывает на него очевидное влияние. Возможно, вы используете инструмент сборки, который изменяет файлы изображений вашего сайта, или, может быть, структуру, которая изменяет внешний вид вашего сайта тонкими способами.

Чтобы быть уверенным в том, что виновата Политика безопасности контента, вы можете включить сообщение о нарушениях, включая:

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

Это обсуждается более подробно в MDN Web Docs. Как упомянуто в статье, обязательно включите и report- uri, и report-to для совместимости. Вы также можете использовать Content-Security-Policy-Report-Only, который легче реализовать и интерпретировать. Смотрите здесь.

Если вы используете Chrome, вы можете дважды проверить в консоли инструментов Dev на наличие ошибок, связанных с CSP, так как Chrome имеет довольно щедрый отчет об ошибках. Это можно сделать без внесения вышеуказанных изменений.