HTML Purifier不允许img标签style属性使用百分比高度与宽度

问题重现 #

配置HTMLPurifier允许img标签的src/alt/height/width/style属性后，发现仅带px单位的高度、宽度值会被保留，百分比值无论写在height/width属性还是style内都会被过滤，且无错误日志输出。相关配置代码：

$config->set('HTML.Allowed', 'img[src|alt|height|width|style],span[style],strong');

查看HTMLPurifier源码，发现核心限制逻辑：

// According to the spec, it's Length, but percents can
// be abused, so we allow only Pixels.
'height' => 'Pixels#' . $max,
'width' => 'Pixels#' . $max,

百分比值的风险分析 #

HTMLPurifier默认禁用百分比是出于布局滥用风险：

• 恶意攻击者可能设置width: 1000%这类超大百分比值，导致页面布局被撑破，影响正常内容展示；
• 配合其他属性可能实现钓鱼式的视觉欺骗（比如用百分比放大隐藏的恶意元素）。

但如果你的业务场景是处理可信来源的内容（比如后台编辑的内容、经过审核的用户输入），这类风险基本可以忽略。

解决方案 #

方案1：修改HTMLPurifier源码（直接生效） #

找到源码中限制height/width为Pixels的位置（即你贴出的那段代码），将规则替换为支持百分比的Length类型：

'height' => 'Length#' . $max,
'width' => 'Length#' . $max,

Length类型是HTML规范定义的合法长度单位，包含百分比、px、em等，修改后即可允许img标签的height/width属性使用百分比值。

另外，如果要让style属性内的百分比宽高生效，还需要确保CSS属性被允许，添加如下配置：

$config->set('CSS.AllowedProperties', 'width, height');

方案2：不修改源码的替代方案 #

如果不想改动源码，推荐使用CSS类控制宽高：

1. 在项目的全局CSS中定义类：

.img-50w {
  width: 50%;
  height: auto;
}

2. 在HTML中给img标签添加该类：

<img src="xxx.jpg" alt="xxx" class="img-50w">

3. 配置HTMLPurifier允许class属性：

$config->set('HTML.Allowed', 'img[src|alt|class],span[style],strong');

这种方式既避免了直接写内联百分比的风险，也更符合前端代码规范，同时无需修改HTMLPurifier源码。

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