Sweetalert: 内容安全策略兼容性

您需要更新 Content-Security-Policy 值以适应style-src指令，该指令必须包含 'unsafe-inline'（小心引用）以执行注入的内联样式。

强制开发人员对 CSS 使用unsafe-inline策略绝对不是理想的做法。 我们也许应该找到更好的方法来处理这个问题。

一种方法是不要在代码中导入 css 文件，而是将其作为可以在开发人员代码中导入的单独文件提供。 就像是
import 'sweetalert/sweetalert.css
这样，开发人员有责任确保它不违反 CSP

它（几乎）与 CSS 文件的位置无关（只要 CSS 位于同一个域中）。 Sweetalert _injects_内联 CSS ，除非有随机数/哈希值，否则任何值得拥有的 CSP 都不允许。 今天早上它让我痛苦不堪； 我可能不得不从我的项目中取消它，这是一种耻辱，因为我真的很喜欢（d）它。

这方面有任何更新吗？ 我有相同的问题; 只是想知道解决这个问题的最佳方法是什么？

解决方法是将哈希添加到您的Content-Security-Policy标头中。

就像是

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

不理想，但比unsafe-inline 。 问题是如果文件更改，哈希将不再匹配，浏览器将拒绝它们。

理想的情况是将 css 提取到它自己的文件中并将其托管在 CDN 上。 这样我们就可以将文件列入白名单。

它（几乎）与 CSS 文件的位置无关（只要 CSS 位于同一个域中）。 Sweetalert _injects_内联 CSS ，除非有随机数/哈希值，否则任何值得拥有的 CSP 都不允许。 今天早上它让我痛苦不堪； 我可能不得不从我的项目中取消它，这是一种耻辱，因为我真的很喜欢（d）它。

同样在这里。

我可以从 Chrome 中的 sweetalert.min.js 获得两个内联样式哈希。 添加到 CSP 标头后，Chrome 不再抱怨。
但是 Firefox 和 Safari 仍然抱怨，我无法找到正确的哈希值。 这些浏览器不提供任何提示。
火狐： 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.