Content-Security-Policy causando renderização de site estranho?

Question

Estou tentando descobrir por que com o cabeçalho Content-Security-Policy ativado em meu conf nginx, alguns dos elementos do meu site parecem um pouco estranhos. Tudo carrega corretamente (status 200), mas algumas imagens podem ser um pouco menores ou algumas renderizações em html estão um pouco fora do navegador. É bizarro; Eu não posso explicar isso. Qual é o uso adequado da Política de Segurança de Conteúdo? E por que ele pode invadir sites em que 100% do conteúdo dos sites (nenhum CDN) é originário da raiz ou / 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

Sem saber qual é o conteúdo do seu site, é difícil saber por que o CSP está tendo um efeito aparente nele. Talvez você esteja usando uma ferramenta de criação que altere os arquivos de imagem do seu site ou talvez uma estrutura que altere a aparência do site de maneira sutil.

Para ter certeza de que a Política de segurança de conteúdo é responsável ou não, você pode ativar o relatório de violações incluindo:

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

Isso é discutido com mais detalhes no MDN Web Docs . Conforme mencionado no artigo, inclua report-uri e report-to por motivos de compatibilidade. Você também pode usar Content-Security-Policy-Report-Only , que pode ser mais fácil de implementar e interpretar. Consulte aqui .

Se você estiver usando o Google Chrome, poderá verificar novamente no seu console de ferramentas do sistema operacional para erros relacionados ao CSP, já que o Chrome apresenta relatórios de erros bastante generosos para isso. Isso pode ser feito sem fazer as alterações acima.