Sweetalert: コンテンツセキュリティポリシーの互換性

挿入されたインラインスタイルを実行するには、「unsafe-inline」（引用符で囲んでください）を含む必要があるstyle-srcディレクティブに対応するようにContent-Security-Policy値を更新する必要があります。

開発者にCSSのunsafe-inlineポリシーの使用を強制することは絶対に理想的ではありません。 これを処理するためのより良い方法を見つける必要があるかもしれません。

1つの方法は、コード内にcssファイルをインポートせず、開発者コード内にインポートできる別のファイルとして使用できるようにすることです。 何かのようなもの
import 'sweetalert/sweetalert.css
このように、それがCSPに違反していないことを確認するのは開発者の責任です。

CSSファイルがどこにあるか（CSSが同じドメインにある限り）は（ほとんど）何の関係もありません。 Sweetalert _injects_インラインCSS 。これは、ナンス/ハッシュ値がない限り、持つ価値のあるCSPでは許可されません。 今朝、それは私に終わりのない痛みを引き起こしています。 私はそれが本当に好きなので、それを私のプロジェクトから切り離さなければならないかもしれませんが、それは残念です。

これに関する更新はありましたか？ 私は同じ問題を抱えています。 これを回避するための最良の方法は何ですか？

回避策は、ハッシュをContent-Security-Policyヘッダーに追加することです。

何かのようなもの

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

理想的ではありませんが、 unsafe-inlineよりも優れています。 問題は、ファイルが変更されると、ハッシュが一致しなくなり、ブラウザがそれらを拒否することです。

理想的な状況は、cssを独自のファイルに抽出し、CDNでホストすることです。 そうすれば、ファイルをホワイトリストに登録できます。

CSSファイルがどこにあるか（CSSが同じドメインにある限り）は（ほとんど）何の関係もありません。 Sweetalert _injects_インラインCSS 。これは、ナンス/ハッシュ値がない限り、持つ価値のあるCSPでは許可されません。 今朝、それは私に終わりのない痛みを引き起こしています。 私はそれが本当に好きなので、それを私のプロジェクトから切り離さなければならないかもしれませんが、それは残念です。

こっちも一緒。

Chromeのsweetalert.min.jsから2つのインラインスタイルハッシュを取得できます。 CSPヘッダーに追加すると、Chromeは文句を言いません。
しかし、FirefoxとSafariはまだ文句を言っており、適切なハッシュを見つけることができません。 これらのブラウザはヒントを提供しません。
Firefox： Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)
サファリ： 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.