☰

Content-Security-Policy がサイトのレンダリングに異常を引き起こしていますか?

tag-icon • tag-icon linux ubuntu security nginx headers
Content-Security-Policy がサイトのレンダリングに異常を引き起こしていますか?

nginx conf でヘッダーを有効にすると、サイトの一部の要素が少しおかしくなる理由を解明しようとしていますContent-Security-Policy。すべては適切に読み込まれますが (ステータス 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 を使用している場合は、Chrome に CSP 関連のエラー レポート機能が充実しているため、開発ツール コンソールで CSP 関連のエラーを再確認できます。これは、上記の変更を行わなくても実行できます。

関連情報