html data-属性中必须转义的字符是&、"、'、这5个；其中&最危险，会触发实体识别状态机导致性能问题；"和'仅在与包裹引号相同时需转义；虽不解析为标签也建议统一转义。
data属性里哪些字符必须转义
只有&、"、'、、<code>>这5个字符在data-属性值中可能破坏HTML结构，必须处理。其中&最危险——它会触发浏览器实体识别状态机，导致解析器多扫一遍甚至卡住；"和'仅在与包裹引号类型相同时才需转义（比如data-id="user's name"里的单引号就得写成'）；和<code>>虽不被解析为标签，但不转义容易引发混淆或后续工具误判。
用dataset读取时为什么看不到转义效果
dataset返回的是解码后的值，不是原始HTML字符串。比如<hello></hello>写在data-msg里，el.dataset.msg拿到的是<hello></hello>，中间的和<code>&全被还原了。这意味着：
- 不能靠
dataset判断原始HTML是否用了实体 - 想比对原始输入，得从
el.outerHTML或服务端源头拿未解析版本 - 用
getAttribute('data-msg')也一样，返回的仍是解码后内容
动态设置data-属性时怎么避免XSS和截断
用element.setAttribute()设值时，浏览器会自动把&、、<code>>等当成普通字符存进去，但如果你拼的是字符串再塞进HTML里（比如innerHTML += `<div data-user="${user}">`），就极易出问题。关键点：
<ul>
<li>永远先对变量调用<code>html.escape()（Python）或htmlspecialchars($str, ENT_QUOTES, 'UTF-8')（PHP），再拼入HTML
&必须最先替换：.replace(/&/g, '&')，否则会被替换成<code>，而新生成的<code>&又可能被二次识别
L'élément "clé"）建议统一用双引号包裹属性，并把内部"转成"，'转成'
服务端渲染+前端读取的双重陷阱
常见错误是服务端模板（如Jinja2、EJS）已对data-值做了转义，前端又用JS库（如he.encode()）再套一层，结果变成<，最终显示为而不是<code>。更隐蔽的是：
- JSON API返回的字段如果已含
&，前端再调escapeHtml()就会叠成& - React里用
data-*传值，props接收的是原始字符串，但若服务端输出的是data-value="<script>"</script>，那props里就是<script></script>，直接用dangerouslySetInnerHTML就等于执行脚本 - 真正容易被忽略的点是：转义不是为了“让字符好看”，而是不让解析器走错分支——哪怕你确认没脚本，大量
&也会拖慢首屏解析
