Sweetalert: Compatibilité de la politique de sécurité du contenu

Vous devez mettre à jour la valeur Content-Security-Policy pour tenir compte de la directive style-src qui doit contenir « unsafe-inline » (attention aux guillemets) pour exécuter les styles en ligne injectés.

Il n'est certainement pas idéal de forcer les développeurs à utiliser la politique unsafe-inline pour CSS. Nous devrions peut-être trouver une meilleure façon de gérer cela.

Une solution consiste à ne pas importer le fichier CSS dans votre code et à le rendre disponible en tant que fichier séparé pouvant être importé dans le code du développeur. quelque chose comme
import 'sweetalert/sweetalert.css
De cette façon, il serait de la responsabilité du développeur de s'assurer qu'il ne viole pas le CSP

Cela n'a (presque) rien à voir avec l'emplacement du fichier CSS (tant que le CSS réside sur le même domaine). Sweetalert _injects_ inline CSS , que tout CSP digne d'intérêt n'autorisera pas à moins qu'il n'y ait une valeur nonce/hash. Cela me cause une douleur sans fin ce matin; Je devrai peut-être le débrancher de mon projet, ce qui est dommage, car je l'aime beaucoup.

Y a-t-il eu des mises à jour à ce sujet? J'ai le même problème; vous vous demandez simplement quelle est la meilleure façon de contourner cela?

La solution de contournement consiste à ajouter les hachages à votre en-tête Content-Security-Policy .

Quelque chose comme

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

Pas idéal mais c'est mieux que unsafe-inline . Le problème est que si les fichiers changent, les hachages ne correspondront plus et le navigateur les rejettera.

La situation idéale serait d'extraire le css dans son propre fichier et de l'héberger sur un CDN. De cette façon, nous pouvons mettre le fichier en liste blanche.

Cela n'a (presque) rien à voir avec l'emplacement du fichier CSS (tant que le CSS réside sur le même domaine). Sweetalert _injects_ inline CSS , que tout CSP digne d'intérêt n'autorisera pas à moins qu'il n'y ait une valeur nonce/hash. Cela me cause une douleur sans fin ce matin; Je devrai peut-être le débrancher de mon projet, ce qui est dommage, car je l'aime beaucoup.

pareil ici.

Je peux obtenir deux hachages de style en ligne à partir de sweetalert.min.js dans Chrome. Lorsqu'il est ajouté à l'en-tête CSP, Chrome ne se plaint plus.
Mais Firefox et Safari se plaignent toujours et je ne parviens pas à trouver le hachage approprié. Ces navigateurs ne donnent aucune indication.
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.