data-*属性仅适合存储非敏感静态元数据，不可用于传递密钥等敏感信息；服务端注入需转义、限长、避免嵌套；前端读取需手动类型转换，且框架中需显式透传。
data-* 属性根本不能“安全”传递数据，它只适合存非敏感、静态元数据
data-* 属性不是传输通道，而是公开挂载点——所有值都明文暴露在 HTML 源码、DevTools 和网络响应中。服务端塞进去的 data-api-key="sk_live_..."，前端 JS 还没执行，用户右键“查看页面源代码”就全看到了。所谓“前后端传递”，实际只是服务端渲染时把轻量上下文写进 DOM，前端读取后用作参数或标识，不涉及加密、签名或校验。
服务端渲染时 data-* 的正确写法与常见翻车点
服务端（如 Node.js 模板、PHP、Django）往 HTML 里注入 data-*，必须做三件事：转义、限制长度、避免嵌套结构。
- JSON 字符串必须先
JSON.stringify()，再 HTML 转义（比如"替换双引号），否则遇到换行或单引号会直接让前端JSON.parse()报错 -
data-initial-state这类字段建议控制在 2KB 内；超过就该用fetch()按需加载，而不是塞进 DOM - 不要写
data-user='{"id":1,"token":"abc"}'—— token 绝对不能出现在 data-* 里，哪怕只是临时 - 数字开头的属性名（如
data-2024-id）在 HTML 中合法，但 JS 必须用el.dataset["2024Id"]访问，点号语法无效
前端读取时必须手动类型转换，别信 dataset 的“自动映射”
dataset 返回的永远是字符串，且驼峰转换有硬性规则：连字符后字母大写，其余小写；下划线、点号、数字开头都不触发转换。
-
data-is-active="true"→el.dataset.isActive === "true"，不是布尔值；判断要用el.dataset.isActive === "true"，而非Boolean(el.dataset.isActive) -
data-count="42"→+el.dataset.count或Number(el.dataset.count)，不用parseInt()（防截断） -
data-config='{"mode":"prod"}'→JSON.parse(el.dataset.config || "{}")，加空对象兜底 - 含特殊字符的属性，比如
data-user_name或data-2024-year，一律改用el.getAttribute("data-user_name")，别指望dataset.userName能读到
框架组件里 data-* 默认丢失，透传必须显式声明
Vue/React/Svelte 不会自动把父级传入的 data-track-id 挂到子组件根元素上——这不是 bug，是设计。你看到的“属性消失”，其实是框架拦截了未声明的 props。
- Vue：组件需设
inheritAttrs: false，模板中用v-bind="$attrs"手动挂到目标元素 - React：函数组件要解构
props，比如const { "data-track-id": trackId, ...rest } = props，再<button></button> - Custom Element：只有
setAttribute("data-xxx", val)才触发attributeChangedCallback；el.dataset.xxx = val不会
真正容易被忽略的，是 dataset 的“只读代理”本质——你改它，DOM 不变；你改 DOM，dataset 会同步更新，但 innerHTML 里看不到新值。调试时别查 innerHTML 判断是否写入成功，用 getAttribute() 才可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
