当前位置:首页 > 技术 > 正文内容

HTMLPurifier 让 p 标签可以包含 video, audio 等标签

代码老兵 技术 20

默认情况下HTMLPurifier 会将 

<p>
<video>...</video>

</p>

转换为:

<p></p>
<video>...</video>

这样,<video> 被移到了 <p> 标签外


HTML Purifier 的默认定义更偏旧(主要围绕 HTML 4.01 / XHTML 1.x 的元素与内容模型)。在这种情况下,如果你在净化时允许了一些 HTML5 标签/属性(例如 videoaudiosourcepicturefiguresection,以及一些 HTML5 的全局属性等),纯用原生 HTML Purifier 可能会:

  • 把不认识的标签当成不允许的内容而移除;

  • 移除它不认识或不在白名单定义里的属性;

  • 或者在修复结构时表现得更“保守”

在 HTML 标准中,<p> 标签不允许包含块级元素,例如 <div>HTMLPurifier 会自动修复不符合 HTML 规范的结构,确保生成符合 W3C 标准的 HTML。

自动闭合机制 (Auto-closing),这是浏览器和解析器处理 HTML 的底层逻辑:

  1. 解析到 <p> 开启一个段落上下文。

  2. 解析到 <video> 解析器认为:“嘿,段落里不应该放这个大家伙。”

  3. 触发修正: 解析器在 <video> 之前自动插入一个 </p> 来结束段落。

  4. 结果: 变成了 <p></p><video>...</video>


虽然在 HTML5 标准中,<video> 的地位有点特殊(它被称为“透明内容模型”),但 HTMLPurifier 底层是用到 PHP dom 扩展,其中 DOMDocument::loadHTML 只支持HTML4:

Warning

Use Dom\HTMLDocument to parse and process modern HTML instead of DOMDocument.

This function parses the input using an HTML 4 parser. The parsing rules of HTML 5, which is what modern web browsers use, are different. Depending on the input this might result in a different DOM structure. Therefore this function cannot be safely used for sanitizing HTML.

PHP手册上说到 解析html5可能导致生成不同的DOM结构。


其中的一个解决办法是安装这个包

https://packagist.org/packages/xemlock/htmlpurifier-html5

这个包在原来包的基础上扩展了对HTML5的支持,我测试过可行。


htmlpurifier-html5 的作用是:

  • 注册 HTML5 的元素定义(Element definitions)
    让 Purifier “认识” <video><audio><source> 等标签。

  • 补充允许的属性/属性集合(Attributes)
    例如 controlsposterpreloadplaysinline 等(实际取决于该包具体实现)。

  • 有些实现还会 补充内容模型/子元素规则(例如 video 里面允许 sourcetrack 等)。

它并不是一个新的 purifier 引擎,而是 对 HTML Purifier 的 HTML 定义层做扩展,让你在“白名单净化”时更好地支持 HTML5。


如果你不想把所有HTML5标签牵扯进来,仅仅是希望 <p> 能包含 <video>,<audio>等

// 允许 p 标签包含其他标签作为块级元素,例如 video/audio 标签作
$def->addElement(
'p',              // 元素名
'Block',          // 类型:块级元素
'Flow',           // 内容模型:流式内容 https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#flow_content
'Flow',           // 内容模型类型:流式内容
null              // 允许的子元素:无指定,可以包含任何元素
)



标签: HTMLPurifier

相关文章

Linux crontab 详解

1) crontab 是什么cron 是 Linux 的定时任务守护进程;crontab 是用来编辑/查看“按时间周期执行命令”的表(cron table)。常见两类:用户 crontab:每个用户一份(crontab -e 编辑)系统级 crontab / cron.d:可指定执行用户(/etc/crontab、/etc/cron.d/*)2) crontab 时间...

富文本里可以允许的 HTML 属性

一、所有标签默认允许的安全属性(极少)class        (可选)id           (通常建议禁用)title️ 注意:id 容易被滥用做锚点注入,很多系统直接禁用class 允许的话最好只允许固定前缀(如 editor-*)二、a 标签允许属性<a href="" t...

Mac 安装 Node.js 指南

方法一:通过官网安装包(最简单,适合初学者)如果你只是想快速安装并开始使用,这是最直接的方法。访问 Node.js 官网。页面会显示两个版本:LTS (Recommended For Most Users):长期支持版,最稳定。建议选这个。Current:最新特性版,包含最新功能但可能不够稳定。下载 .pkg 安装包并运行。按照安装向导点击“下一步”即可完成。方法二:使用 Homebrew 安装(...

Dom\HTML_NO_DEFAULT_NS 的副作用:自动加闭合标签

在使用Dom\HTMLDocument时,Dom\HTML_NO_DEFAULT_NS 将禁止在解析过程中设置元素的命名空间, 此设置是为了与DOMDocument向后兼容而存在的。当使用它时,已知的一个副作用就是:自动加闭合标签例如 </img> 为什么会这样?当你使用:Dom\HTML_NO_DEFAULT_NS文档会变成 无命名空间模式,此时内部更接近 XML...

Laravel 事件和监听器创建

在 Laravel 中,使用 Artisan 命令创建 Events(事件) 和 Listeners(监听器) 是非常高效的。你可以通过以下几种方式来实现:1. 手动创建单个 Event如果你只想创建一个事件类,可以使用 make:event 命令:Bashphp artisan make:event UserRegistered执行后,文件将生成在 app/Even...

自定义域名解析神器 dnsmasq

什么是 dnsmasq?dnsmasq 是一个轻量级、功能强大的网络服务工具,专为小型和中等规模网络设计。它是一个综合的网络基础设施解决方案[1]。dnsmasq 能做什么?功能说明应用场景DNS 转发与缓存将 DNS 查询转发到上游服务器(ISP、Google DNS 等),并在本地缓存结果加快 DNS 查询速度,减少外部 DNS 流量本地 DNS解析本地网络设备的主机名,无需编辑&n...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。