由于内联样式，react-draft-wysiwyg编辑器值正在导致内容安全策略问题

Question

如何修复由react-draft-wysiwyg编辑器值导致的内容安全策略问题，这些编辑器值在部署后具有内联样式，并且由于该问题而不对其应用样式。如何修复它。

Answer 1

解决此问题取决于CSP在违规消息中所说的内容。可以有3种内联风格，每种风格都有自己的特点。

最简单的方法是找到React应用程序发布CSP的位置(它应该是一个元标记)，并将'unsafe-inline'添加到style-src指令中。

这允许您修复所有三种类型的内联样式的问题。

带有CSP的meta标签很可能是由react-static-plugin-csp-meta-tags、react-csp或react-helmet等插件发布的。找到它并将'unsafe-inline'添加到style-src指令中，但不要添加到default-src中，因为在缺少script-src的情况下，这将允许执行不安全的内联脚本。

一些插件，例如react-static-plugin-csp-meta-tags，允许像<style>...</style>这样的内联样式。在这种情况下，如果这个'unsafe-inline'块不经常更改，您可以避免使用'hash-value'，而使用<style>。