JavaScript如何防止代码注入攻击?

JavaScript无法直接防止代码注入,核心是禁止执行不可信字符串:禁用eval()、Function()、setTimeout(string)等;插入HTML时用textContent或DOMPurify转义;JSON解析用JSON.parse()而非eval;启用CSP禁用'unsafe-eval'和'unsafe-inline'。

JavaScript本身不能直接防止代码注入攻击,关键在于不执行不可信的字符串作为代码。常见错误是用eval()Function()setTimeout(string)setInterval(string)动态运行用户输入的内容。

避免动态执行字符串代码

这是最核心的防护原则。任何来自用户、URL参数、表单、API响应或本地存储的数据,都不能直接传给以下函数:

  • eval()
  • new Function(...)
  • setTimeout(string, ...)setInterval(string, ...)
  • document.write()(尤其拼接用户数据时)

例如,不要这样写:

❌ 错误示例
const userInput = 'alert("xss")';
eval(userInput); // 危险!

安全处理HTML和DOM插入

向页面插入用户内容时,必须防止XSS(跨站脚本)——本质也是一种代码注入。

  • textContent代替innerHTML,当只需显示纯文本时
  • 若必须插入HTML,先对特殊字符做转义(如zuojiankuohaophpcn),或使用可信的库如DOMPurify
  • 避免用字符串拼接构造HTML,改用document.createElement() + appendChild() + textContent

例如:

✅ 推荐方式
const el = document.createElement('div');
el.textContent = userInput; // 自动转义,安全

谨慎使用JSON解析与模板引擎

JSON.parse()本身安全(只要输入是合法JSON),但注意别用eval()模拟解析;模板引擎如Handlebars、Mustache默认会自动转义变量,但需确认未关闭转义(如Handlebars中{{{ }}}是不转义的,慎用)。

  • 永远用JSON.parse(),不用eval('(' + jsonStr + ')')
  • 检查模板语法是否启用了“原始输出”,避免把用户数据不经转义渲染成HTML
  • 服务端返回的数据,前端仍需当作不可信内容处理,不因“自己后端发的”就放松校验

启用CSP(内容安全策略)作为纵深防御

CSP不是JS代码层面的修复,但能大幅降低注入成功后的危害。通过HTTP响应头设置:

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'

应移除'unsafe-eval''unsafe-inline',改用外部JS文件和事件委托。

  • 禁止内联脚本(onclick="..."
  • 禁止eval类函数执行
  • 配合非ces-only的哈希或nonce机制更稳妥