Sweetalert: Kompatibilität mit Inhaltssicherheitsrichtlinien

Sie müssen den Content-Security-Policy-Wert aktualisieren, um die style-src Direktive aufzunehmen, die 'unsafe-inline' enthalten muss (achten Sie darauf, um die eingefügten Inline-Stile auszuführen).

Es ist definitiv nicht ideal, Entwickler zu zwingen, die unsafe-inline Richtlinie für CSS zu verwenden. Wir sollten vielleicht einen besseren Weg finden, damit umzugehen.

Eine Möglichkeit besteht darin, die CSS-Datei nicht in Ihren Code zu importieren und sie als separate Datei bereitzustellen, die in den Entwicklercode importiert werden kann. etwas wie
import 'sweetalert/sweetalert.css
Auf diese Weise liegt es in der Verantwortung des Entwicklers, sicherzustellen, dass er nicht gegen CSP . verstößt

Es hat (fast) nichts damit zu tun, wo sich die CSS-Datei befindet (solange sich das CSS in derselben Domain befindet). Sweetalert _injects_ inline CSS , das jeder CSP, der es wert ist, nicht zulassen wird, es sei denn, es gibt einen Nonce/Hash-Wert. Es verursacht mir heute Morgen endlose Schmerzen; Eventuell muss ich es aus meinem Projekt herauslösen, was schade ist, weil es mir wirklich gefällt.

Gab es hierzu Updates? Ich habe das gleiche Problem; Sie fragen sich nur, wie Sie das am besten umgehen können?

Die Problemumgehung besteht darin, die Hashes zu Ihrem Content-Security-Policy Header hinzuzufügen.

Etwas wie

style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-wTr/bct+DGhJCU0mVZOm9Z1v99oBZrIu4VCMYQJWdfI=';

Nicht ideal, aber besser als unsafe-inline . Das Problem ist, dass, wenn sich die Dateien ändern, die Hashes nicht mehr übereinstimmen und der Browser sie ablehnt.

Die ideale Situation wäre, das CSS in eine eigene Datei zu extrahieren und auf einem CDN zu hosten. Auf diese Weise können wir die Datei auf die Whitelist setzen.

Es hat (fast) nichts damit zu tun, wo sich die CSS-Datei befindet (solange sich das CSS in derselben Domain befindet). Sweetalert _injects_ inline CSS , das jeder CSP, der es wert ist, nicht zulassen wird, es sei denn, es gibt einen Nonce/Hash-Wert. Es verursacht mir heute Morgen endlose Schmerzen; Eventuell muss ich es aus meinem Projekt herauslösen, was schade ist, weil es mir wirklich gefällt.

Ich auch.

Ich kann zwei Hashes im Inline-Stil von sweetalert.min.js in Chrome abrufen. Beim Hinzufügen zum CSP-Header beschwert sich Chrome nicht mehr.
Aber Firefox und Safari beschweren sich immer noch, und ich kann den richtigen Hash nicht finden. Diese Browser geben keine Hinweise.
Firefox: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)
Safari: Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy.