Política de segurança de conteúdo causando renderização estranha do site?

Política de segurança de conteúdo causando renderização estranha do site?

Estou tentando descobrir por que, com o Content-Security-Policycabeçalho ativado em minha configuração 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 alguma renderização de HTML está um pouco errada no navegador. É bizarro; Eu realmente não consigo explicar isso. Qual é o uso adequado da Política de Segurança de Conteúdo? E por que isso poderia quebrar sites onde 100% do conteúdo do site (sem CDN) é originado 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;
    }
  }
}

Responder1

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

Para ter certeza se a culpa é ou não da Política de Segurança de Conteúdo, você pode ativar o relato de violações incluindo:

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

Isto é discutido com mais detalhes noDocumentos da Web do MDN. Conforme mencionado no artigo, certifique-se de incluir ambosrelatório-urieReporte parapor motivos de compatibilidade. Você também pode usar Somente relatório de política de segurança de conteúdoque pode ser mais fácil de implementar e interpretar. Veraqui.

Se estiver usando o Chrome, você pode verificar novamente em seu console de ferramentas de desenvolvimento se há erros relacionados ao CSP, já que o Chrome possui relatórios de erros bastante generosos para isso. Isso pode ser feito sem fazer as alterações acima.

informação relacionada