如何配置trix-rails 1.3.1避免生成内联style标签以满足CSP要求

针对你遇到的trix-rails生成内联style标签违反CSP规则的问题，这里提供两种无需引入ActionText的实用解决方案：

方案一：通过Trix配置禁用自动内联样式注入 #

trix-rails 1.3.1支持通过配置项关闭自动样式注入，在你的app/assets/javascripts/application.js中，引入trix之后添加以下代码：

// 阻止Trix自动插入内联样式标签
Trix.config.css.suppress = true

同时确保你已经将trix的CSS提取到单独文件并引入到app/assets/stylesheets/application.css中：

@import "trix/dist/trix";

这样trix就不会再生成内联style标签，完全符合CSP的no unsafe-inline规则。

方案二：重写Trix的样式注入方法 #

如果上述配置不生效（部分1.3.1版本可能存在差异），可以直接重写trix的样式注入方法，在application.js中添加：

// 覆盖Trix的injectCSS方法，阻止内联样式插入
Trix.injectCSS = function() {}

同样需要提前将trix的完整CSS提取并引入到项目的样式文件中，避免编辑器样式缺失。

注意事项 #

• 提取trix CSS时，确保包含所有核心样式（可直接从trix-rails gem的assets目录中复制trix.css文件到项目的stylesheets目录）
• 测试时打开浏览器控制台，确认没有CSP相关的报错信息，同时检查Trix编辑器的样式是否正常显示

内容的提问来源于stack exchange，提问作者Nikolay Nikolov