前端防json注入的核心是正确使用方法和上下文：用json.stringify()安全序列化数据，但绝不拼入innerhtml；渲染文本用textcontent，属性设置用setattribute或dataset；禁用eval等动态执行。
前端实现安全的 JSON 字符串转义防注入，核心不是“手动转义”，而是**用对方法、用对上下文、不绕过机制**。JSON 本身是数据格式，真正危险的是把未经处理的 JSON 字符串拼进 HTML 或 JS 执行环境里。所以关键在于：何时该用 JSON.stringify()，何时该用 textContent 或 setAttribute()，以及哪些操作绝对要避开。
用 JSON.stringify() 处理数据输出，但仅限安全场景
JSON.stringify() 是 JavaScript 原生最可靠的数据序列化工具，它会自动对字符串中的双引号、反斜杠、控制字符（如换行、制表符）和 Unicode 特殊字符做合规转义，生成合法且可被 JSON.parse() 安全还原的字符串。
- 适用于：将 JS 对象转为 JSON 字符串后，作为纯数据传给后端、存入 localStorage、或嵌入 script 标签中作为初始化数据
- 示例：
<script>const config = <%= JSON.stringify(serverConfig) %></script>—— 此处服务端需确保输出在<script></script>内部，且整个值被包裹在单/双引号中 - 注意：
JSON.stringify()不解决 XSS，它只保证 JSON 语法正确；若你把它拼进innerHTML或属性值里，依然会触发解析执行
绝不把 JSON 字符串直接插入 HTML 结构
把 JSON.stringify(obj) 的结果直接赋给 innerHTML、document.write 或模板字符串插值到 HTML 中，等于主动开放 XSS 入口。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 错误写法：
el.innerHTML = '<div data-config="' + JSON.stringify(conf) + '"></div>'—— 属性值未闭合、引号冲突、恶意字符可逃逸 - 正确替代：
el.setAttribute('data-config', JSON.stringify(conf))，浏览器会自动对属性值做 HTML 实体编码 - 更推荐：
el.dataset.config = JSON.stringify(conf)，语义清晰且安全
渲染用户数据时，优先用 textContent 而非 innerHTML
绝大多数场景下，你展示的只是“文本内容”，而非“HTML 片段”。这时 textContent 是天然免疫 XSS 的方案——它把所有内容当纯文本处理，不经过 HTML 解析器。
- 例如显示用户名：
nameEl.textContent = userInput，即使userInput是<script>alert(1)</script>，页面也只会显示那一串字符 - 如果必须渲染富文本（如评论带格式），不要信任前端解码，应由后端做过滤（白名单标签+属性），前端用
DOMPurify.sanitize()二次净化
避免危险的动态执行方式
有些开发者试图用 JSON 字符串“绕过限制”去执行逻辑，这本身就是高危路径。
- 禁用：
eval('(' + jsonStr + ')')、new Function('return ' + jsonStr)()、setTimeout(jsonStr) - 禁用：
innerHTML插入含onerror、javascript:等伪协议的字符串 - 可信替代：用
JSON.parse(jsonStr)获取对象后，再通过安全 API 操作 DOM（如createElement+textContent）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
