Liquid 输出没转义导致前台弹窗怎么修
现象#
在搜索框输入 "><svg onload=alert(1)> 后结果页弹窗,查看源码发现 search.terms 原样落在 value="..." 里。
原因#
- Liquid 不会自动转义,
{{ product.title }}就是原样输出标记 escape只处理 HTML 文本与属性,放进 script 里挡不住引号闭合- 属性值没加引号时,空格和等号就能拆出新的 onerror 事件
- app 写入的 metafield 富文本被当成 HTML 直接渲染,来源不可信
处理步骤#
- 全局搜
{{ search.terms }}、{{ cart.note }}等用户可控字段 - HTML 文本与属性统一加
| escape,并给每个属性值补上双引号 - script 内改用
{{ customer.email | json }}这类写法,不要用 escape - URL 参数用
| url_encode,富文本 metafield 用metafield_tag或白名单清洗 - 把
mailto:与data-属性也纳入检查,别只盯页面正文
验收标准#
再提交同样 payload 只显示为文本,源码中是 <svg,Console 没有脚本执行记录。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。