Content-Security-Policy, die fremde Site-Rendering verursacht?

353
user775824

Ich versuche herauszufinden, warum bei Content-Security-Policyaktivierter Kopfzeile in meinem Nginx-Conf einige Elemente auf meiner Website etwas seltsam wirken. Alles wird ordnungsgemäß geladen (Status 200), aber einige Bilder sind möglicherweise etwas kleiner oder das HTML-Rendering ist etwas weniger im Browser. Es ist bizarr. Ich kann es nicht wirklich erklären. Was ist die richtige Verwendung der Content-Security-Policy? Und wieso könnte es zu einer Brechung von Websites kommen, bei denen 100% des Inhalts der Website (kein CDN) vom Stammverzeichnis oder von / uploads stammt?

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; } } }
0
Schwer zu sagen ohne zumindest einen Screenshot. Wenn ich das debuggen würde, würde ich alle Seitenelemente mit "wget" oder "curl", mit und ohne Content-Security-Policy abrufen und die Ergebnisse vergleichen. Ich würde es auch mit verschiedenen Browsern versuchen ... xenoid vor 6 Jahren 0
Danke für den Vorschlag. Dann die Curl-Ausgänge vergleichen? Nach welchen Unterschieden in der Produktion würde ich genau suchen? user775824 vor 6 Jahren 0
Keine Ahnung. Diff ist dein Freund ... Sie können auch feststellen, dass einige Elemente fehlen. xenoid vor 6 Jahren 0

1 Antwort auf die Frage

0
baelx

Ohne zu wissen, was der Inhalt Ihrer Website ist, ist es schwer zu wissen, warum CSP sich offensichtlich darauf auswirkt. Möglicherweise verwenden Sie ein Build-Tool, das die Bilddateien Ihrer Website ändert, oder möglicherweise ein Framework, das das Erscheinungsbild Ihrer Website auf subtile Weise ändert.

Um sicher zu gehen, ob die Inhaltssicherheitsrichtlinie schuld ist, können Sie das Melden von Verstößen aktivieren, indem Sie Folgendes hinzufügen: 

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

Dies wird in den MDN-Web-Docs ausführlicher beschrieben . Wie in dem Artikel erwähnt, sollten Sie aus Gründen der Kompatibilität sowohl report-uri als auch report-to angeben. Sie können auch Content-Security-Policy-Report-Only verwenden, der möglicherweise einfacher zu implementieren und zu interpretieren ist. Sehen Sie hier .

Wenn Sie Chrome verwenden, können Sie in Ihrer Dev-Tools-Konsole noch einmal nach Fehlern im Zusammenhang mit CSP suchen, da Chrome dazu eine recht großzügige Fehlerberichterstattung hat. Dies kann ohne die oben genannten Änderungen vorgenommen werden.

Verwandte Probleme