☰

콘텐츠 보안 정책으로 인해 이상한 사이트 렌더링이 발생합니까?

tag-icon • tag-icon linux ubuntu security nginx headers
콘텐츠 보안 정책으로 인해 이상한 사이트 렌더링이 발생합니까?

Content-Security-Policy내 nginx conf에서 헤더를 활성화하면 내 사이트의 일부 요소가 약간 이상해 보이는 이유를 알아내려고 노력 중입니다 . 모든 것이 제대로 로드되지만(상태 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 웹 문서. 기사에서 언급했듯이 두 가지를 모두 포함해야 합니다.보고서-우리그리고보고하다호환성 이유로. 당신은 또한 사용할 수 있습니다 콘텐츠 보안 정책 보고 전용구현하고 해석하기가 더 쉬울 수 있습니다. 보다여기.

Chrome을 사용하는 경우 Chrome에는 이에 대한 매우 관대한 오류 보고 기능이 있으므로 개발자 도구 콘솔에서 CSP 관련 오류를 다시 확인할 수 있습니다. 위의 변경 사항을 적용하지 않고도 이 작업을 수행할 수 있습니다.

관련 정보