使用Filament RichEditor保存含style标签的HTML时出现Livewire 403错误

问题现象 #

使用Filament RichEditor表单组件时，保存包含带style属性元素的HTML内容（如被带样式span包裹的链接）会触发空白403错误，移除style属性后保存正常，且仅生产环境出现该问题。

触发403的示例HTML内容：

<p>Testa</p>
<p>sss</p>
<p><a href="https://google.com"><span style="text-decoration: underline;">https://google.com</span></a></p>

可能原因及解决办法 #

1. 服务器安全模块拦截（如ModSecurity） #

生产环境服务器常启用安全模块，会将带style属性的HTML识别为潜在XSS攻击，返回403拦截。

• 联系服务器管理员，调整安全规则，允许富文本内容中的style属性通过；
• 针对Filament表单提交的路由，添加安全规则例外，避免请求被拦截。

2. Filament HTML净化配置限制 #

Filament RichEditor默认会净化HTML，若生产环境净化规则过严或未配置允许style属性，会导致提交被拦截。
在RichEditor组件配置中修改净化规则，明确允许元素的style属性：

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->purifyOptions([
        // 按需配置，仅允许指定元素的style属性
        'HTML.AllowedAttributes' => 'a.href, span.style',
        // 或允许所有元素的style属性
        // 'HTML.AllowedAttributes' => '*[style]',
    ]);

同时确保生产环境Filament配置中无额外净化规则覆盖上述设置。

3. 云服务商WAF拦截 #

部分云服务商的Web应用防火墙（WAF）会将含style属性的请求判定为恶意请求。

• 登录WAF控制台，检查拦截规则，将Filament表单提交路径加入白名单；
• 调整WAF防护级别，降低对HTML内容的敏感度。

4. 请求参数配置问题（可能性较低） #

若富文本内容过大，可能触发服务器参数限制，间接导致403。

• 检查生产环境服务器的post_max_size、upload_max_filesize配置，确保能容纳富文本提交内容；
• 确认表单提交时正确携带CSRF令牌，避免令牌验证失败触发403。

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