属性值中插入用户数据时，必须根据属性包裹符号转义对应引号：双引号属性转义"为"，单引号属性转义'为'；url属性还需额外url编码，仅html转义不足。
属性值里插用户数据，只转义 和 <code>> 不够
双引号或单引号包裹的属性（如 title="{{ userInput }}"）中，攻击者只需输入 " onclick="alert(1)，就能闭合当前属性并注入事件处理器。浏览器不关心你“本意”是显示引号，它只按 HTML 语法解析结构。
实操建议：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 双引号属性（
title="..."）必须转义"→"，否则引号提前闭合 - 单引号属性（
title='...'）必须转义'→'，IE 对'支持不一致，统一用'更稳妥 - 别假设“用户不会输引号”——只要字段可编辑，就必然有人输，而且攻击工具会自动构造
- 服务端模板若支持自动转义（如 Jinja2 的
{{ value|e }}），确认它对属性上下文生效；否则需手动调用对应函数
href 和 src 这类 URL 属性不能只靠 HTML 转义
把用户输入直接拼进 href="{{ url }}"，即使 &、 全部转义了，攻击者仍可用 <code>javascript:alert(1) 或 data:text/html,<script>alert(1)</script> 触发执行。HTML 转义拦不住协议级注入。
实操建议：
- URL 类属性必须先做 URL 编码：用
encodeURIComponent()处理原始字符串，再拼入带引号的属性值 - 服务端更可靠的做法是白名单校验协议：只允许
https://、http://、/开头，拒绝javascript:、data:、vbscript: - 前端动态设置时，别写
el.setAttribute('href', userInput)—— 这绕过所有 HTML 转义逻辑，应先校验再赋值 - Go 的
html/template会自动识别href上下文并做 URL 编码，但前提是变量类型为template.URL，不是普通字符串
别在 onclick、onerror 等事件属性里拼接用户数据
写成 <button onclick="doSomething('{{ userInput }}')"></button> 是高危模式。JS 执行上下文和 HTML 转义完全无关：哪怕你把 ' 全部转成 '，最终生成的仍是 onclick="doSomething('x');alert(1)//')，JS 引擎照常执行。
实操建议：
- 绝对禁止在事件属性中内联拼接用户输入 —— 这不是转义能解决的问题，是设计错误
- 改用数据属性 + 事件委托：
<button data-id="{{ userId }}"></button>，然后 JS 里用el.dataset.id读取 - 如果必须动态绑定行为，用
addEventListener，传参走函数参数，不走字符串拼接 - 服务端模板中，任何以
on*开头的属性都不该接受用户输入，这是硬性红线
JSON 数据塞进 data-* 属性时，JSON.stringify() 不等于安全
常见写法：<div data-config="{{ JSON.stringify(config) }}"></div>。问题在于：JSON 字符串里可能含 '、"、，而 HTML 解析器在遇到第一个未转义的 <code>' 就截断属性值，后续内容变成裸 HTML 被解析。
实操建议：
-
JSON.stringify()只保证 JSON 合法，不处理 HTML 结构 —— 它输出的"在单引号属性里毫无防护作用 - 正确做法：先
JSON.stringify()，再对结果做 HTML 实体转义（如用he.escape()或html.escape(..., quote=True)） - 更优解：改用
data-config="{{ config | tojson | e }}"（Jinja2）或类似模板语法，让引擎自动匹配上下文 - 前端读取时用
JSON.parse(el.getAttribute('data-config'))，不要用el.dataset.config—— dataset 会自动解码 HTML 实体，可能破坏 JSON 结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
