我在一个使用@ckeditor/ckeditor5-react: 5.1.0
和@ckeditor/ckeditor5-build-classic: ^40.1.0
的React应用程序中使用CKEditor。我们使用Webpack 5。
我的Content-Security-Policy包含strict-dynamic
和nonce,而不是unsafe-inline
。
我已经逐步浏览了WebPack加载器代码,发现它在加载包含CKEditor的bundle时正确地传递了nonce。
然而,Chrome报告了78个这样的错误:
ckeditor.js:6拒绝应用内联样式,因为它违反了以下内容安全策略指令:“default-src 'self' https://localhost:10111/
'strict-dynamic' 'nonce-fakeNonce';“要么是'unsafe-inline'关键字,('sha 256-d 6 j8 IAY 0 zOxGlurXvxqXGX 9 jHRbyhvJvE 6CdKjQIic 4 ='),或随机数启用内联执行需要使用('nonce-...')。还请注意,'style-src'未显式设置,因此'default-src'用作回退。
我怎么才能最好地解决这个问题呢?我在文档中没有找到任何关于通过CKEditor配置传递nonce的内容。使用哈希似乎不切实际,因为有这么多。
1条答案
按热度按时间s4n0splo1#
这其实与ckeditor无关,实际上与用于构建经典编辑器的webpack样式加载器插件有关。该错误长期存在,但有一个解决方案。https://github.com/webpack-contrib/style-loader/issues/427
即使在应用了解决方法之后,仍然存在一些问题。答案是在ckeditor自定义构建中使用
mini-css-extract-plugin
而不是style-loader
。这在此文件https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source-webpack.html的结尾处进行了说明