JavaScript 的模板字符串如何安全地嵌入用户输入以防止 XSS 攻击？-js教程-PHP中文网

JavaScript 的模板字符串如何安全地嵌入用户输入以防止 XSS 攻击？

幻影之瞳

发布： 2025-09-24 20:51:01

原创

684人浏览过

模板字符串不防XSS，需转义用户输入。用escapeHtml函数或textContent避免innerHTML，防止恶意脚本执行，确保数据以文本形式插入，结合DOM API或框架内置防护更安全。

javascript 的模板字符串如何安全地嵌入用户输入以防止 xss 攻击？

JavaScript 的模板字符串本身不会自动防止 XSS 攻击。当用户输入被直接插入 HTML 或通过 innerHTML 等方式渲染时，如果未正确转义，就可能执行恶意脚本。要安全地嵌入用户输入，必须对内容进行适当的转义处理。

对用户输入进行 HTML 转义

在将用户输入插入模板字符串前，先将其特殊字符转换为 HTML 实体：

< 转为
> 转为 >
" 转为 "
' 转为 '
& 转为 &

可以编写一个简单的转义函数：

<font color="#0000FF">function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

const userInput = '<script>alert("xss")</script>';
const safeOutput = `<p>${escapeHtml(userInput)}</p>`;
// 结果：<p><script>alert("xss")</script></p>
</font>

登录后复制

使用 textContent 而非 innerHTML

如果目标是将用户输入显示为文本内容，应避免使用 innerHTML，改用 textContent，它会自动转义 HTML：

立即学习“Java免费学习笔记（深入）”；

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

<font color="#0000FF">const element = document.getElementById('output');
element.textContent = `欢迎，${userInput}`; // 安全
</font>

登录后复制

使用 DOM API 构建元素

更推荐的做法是通过 DOM 方法创建元素并设置文本内容，而不是拼接 HTML 字符串：

<font color="#0000FF">const p = document.createElement('p');
p.textContent = userInput;
document.body.appendChild(p);
</font>

登录后复制

考虑使用现代框架的内置防护

React、Vue 等框架默认会对插值内容进行转义，但仍需注意使用 dangerouslySetInnerHTML（React）或 v-html（Vue）等特性时的风险。除非必要，避免使用这些功能。

基本上就这些。模板字符串只是语法糖，安全取决于你怎么用它。只要确保用户数据不以原始 HTML 形式注入页面，就能有效防范大多数 XSS 场景。

以上就是JavaScript 的模板字符串如何安全地嵌入用户输入以防止 XSS 攻击？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue v-for 高效分组渲染与条件差异化展示教程 Vue教程：避免DOM操作中的‘null’错误，掌握id与ref的正确用法 Vue 3 教程：如何在 data 和 props 属性同名时精确监听变更 Vue组件中监听data和prop变化：避免命名冲突与高级监听技巧 Vue 组件中同名 Prop 与 Data 属性的监听策略