如何让HtmlPurifier允许CSS变量var(--...)保留在样式属性中？

你的问题核心是HtmlPurifier默认不识别CSS变量的var()函数，即便在配置中错误添加了var到CSS.AllowedProperties（var不是CSS属性，是属性值函数），也会因为解析不通过而移除整个style属性。以下是具体解决步骤：

关键配置调整 #

修改你的HtmlPurifier配置，重点调整3个部分：

return [
    'encoding'           => 'UTF-8',
    'finalize'           => true,
    'ignoreNonStrings'   => false,
    'cachePath'          => storage_path('app/purifier'),
    'cacheFileMode'      => 0755,
    'settings'      => [
        'default' => [
            'HTML.Doctype'             => 'HTML 5', // 改用HTML5文档类型，适配现代CSS特性
            'HTML.Allowed'             => 'div,b,strong,i,em,s,u,a[class|href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src]',
            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
            'CSS.AllowedFunctions'     => 'var', // 明确允许CSS属性值使用var()函数
            'AutoFormat.AutoParagraph' => true,
            'AutoFormat.RemoveEmpty'   => true,
        ],
    ],
];

配置调整说明 #

• 移除CSS.AllowedProperties中的var：var不是CSS属性，是属性值的函数，放在该配置项中无效，甚至可能干扰解析逻辑。
• 添加CSS.AllowedFunctions => 'var'：这是核心配置，告诉HtmlPurifier允许CSS属性值中使用var()函数，不会把包含该函数的样式判定为非法。
• 改用HTML 5文档类型：HTML4的规则会强制HtmlPurifier使用旧版CSS校验逻辑，改用HTML5能更好兼容CSS3及以上的特性，减少不必要的过滤。

额外注意事项 #

1. 清理缓存：HtmlPurifier会缓存配置和解析规则，修改配置后需要删除storage_path('app/purifier')目录下的所有缓存文件，确保新配置生效。
2. 版本兼容性：确保你使用的HtmlPurifier（或Laravel对应的mewebstudio/Purifier包）是较新版本，CSS.AllowedFunctions配置项在旧版本中可能不存在。

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