模板字符串能直接插入HTML吗？安全注意事项解析

模板字符串本身只是安全的字符串拼接工具，绝不会自动解析HTML——真正的安全风险源于后续将其赋值给innerHTML等危险DOM属性所触发的浏览器HTML解析行为；本文厘清了这一常见误解，揭示XSS漏洞的本质不在模板语法而在DOM操作方式，并提供了DOMParser、createElement、DOMPurify等实用防御方案，强调安全关键在于严格管控“字符串如何进入DOM”，而非盲目依赖转义或框架默认保护。

模板字符串本身不解析HTML，只是拼接字符串

JavaScript 的 template literal（反引号包裹的字符串）不会自动将插值内容当作 HTML 渲染——它只做字符串拼接。哪怕你写 `${userInput}`，浏览器也不会执行 HTML 解析，除非你把它赋给 innerHTML 这类危险属性。

真正触发 HTML 解析的是 DOM 操作方式，不是模板字符串本身。这是很多人混淆的起点。

用 innerHTML 插入模板字符串 = XSS 高危操作

一旦你把含用户输入的模板字符串赋给 element.innerHTML，就等于把字符串交给浏览器当 HTML 解析，恶意代码立刻可执行。

• 比如 userInput = ''，拼进模板后设为 innerHTML，弹窗就触发了
• textContent 或 innerText 会安全转义，但它们不解析任何 HTML 标签，纯文本显示
• 现代框架（React/Vue）默认对插值做转义，但手动用 dangerouslySetInnerHTML 或 v-html 就绕过了保护

安全插入 HTML 的替代方案

真需要动态渲染可信 HTML，别靠手拼模板字符串 + innerHTML。优先走 DOM API 或专用库：

• 用 DOMParser 解析字符串为文档片段：

  const frag = new DOMParser().parseFromString(htmlString, 'text/html').body.children[0];
  container.appendChild(frag);

• 对已知结构的 HTML，用 document.createElement + appendChild 构建，完全避开字符串拼接
• 若必须用字符串（如服务端返回），先用 DOMPurify.sanitize() 过滤，再塞进 innerHTML
• 避免在模板字符串里拼接不可信变量：`${escapeHtml(userInput)}` 比直接插更可控

为什么 escapeHtml 不是万能解药

手写转义函数容易漏掉边界情况，比如