一个不能点的按钮背后是模板安全

尤其是按钮参数里有标题 路径状态 时间等可变内容时更不能随便拼

剑飞
1/14一个不能点的按钮背后是模板安全

页面上的“查看进度”不能点

昨天我修了一个按钮问题页面上的“查看进度”不能点

命题先说清本页判断
解释补足为什么
行动留下下一步
2/14一个不能点的按钮背后是模板安全

让想法成结构

模板把结构化参数直接塞进 HTML 事件属性里里面的引号把浏览器解析截断了
3/14一个不能点的按钮背后是模板安全

这篇文章讲的是为什么“只是

01命题

先说清本页判断

02解释

补足为什么

03行动

留下下一步

把“这篇文章讲的是为什”落到一个具体项目里看结果
4/14一个不能点的按钮背后是模板安全

用户看到的是按钮不能点击

命题先说清本页判断
解释补足为什么
行动留下下一步
把“用户看到的是按钮不”落到一个具体项目里看结果
5/14一个不能点的按钮背后是模板安全

按钮本身是模板渲染出来的

但这类问题不能只看 JS 函数

把“按钮本身是模板渲染”落到一个具体项目里看结果
6/14一个不能点的按钮背后是模板安全

页面里看起来有点击事件

页面里看起来有点击事件但浏览器实际解析出来的属性已经被截断

命题先说清本页判断
解释补足为什么
行动留下下一步
7/14一个不能点的按钮背后是模板安全

浏览器实际 DOM

所以排查前端问题时 我会看三层模板输出 浏览器实际 DOM 运行时函数
8/14一个不能点的按钮背后是模板安全

再放进 onclick 里

01命题

先说清本页判断

02解释

补足为什么

03行动

留下下一步

把“再放进 oncli”落到一个具体项目里看结果
9/14一个不能点的按钮背后是模板安全

因为源码里看起来像是对的

命题先说清本页判断
解释补足为什么
行动留下下一步
把“因为源码里看起来像”落到一个具体项目里看结果
10/14一个不能点的按钮背后是模板安全

时间等可变内容时

尤其是按钮参数里有标题路径 状态时间等可变内容时 更不能随

把“时间等可变内容时”落到一个具体项目里看结果
11/14一个不能点的按钮背后是模板安全

就要使用适合属性上下文的转义

01命题

先说清本页判断

02解释

补足为什么

03行动

留下下一步

把“就要使用适合属性上”落到一个具体项目里看结果
12/14一个不能点的按钮背后是模板安全

带走四步

找项目

从真实任务开始

出材料

把想法变成可处理内容

做交付

用结果判断能力

可复用

把完成沉淀为流程

13/14一个不能点的按钮背后是模板安全

让能力长出来

尤其是按钮参数里有标题 路径 状态时间等可变内容时 更不能随便拼