Content-Security-Policy вызывает странную работу сайта?

Content-Security-Policy вызывает странную работу сайта?

Я пытаюсь понять, почему при 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;
    }
  }
}

решение1

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

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

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

Более подробно это обсуждается вВеб-документы MDN. Как упоминалось в статье, обязательно включите обаотчет-uriиотчет-кпо соображениям совместимости. Вы также можете использовать Только отчет о политике безопасности контентачто может быть проще в реализации и интерпретации. См.здесь.

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

Связанный контент