Angular 12模板中如何安全计算动态表达式 规避eval安全风险

方案1：使用受限作用域的Function构造函数（性价比最高） #

和eval不同，Function构造出来的函数默认只能访问全局作用域，我们可以通过显式传入白名单变量的方式，完全隔离危险的全局对象，避免恶意代码执行。

TS代码实现 #

// 表达式求值方法，仅传入允许访问的上下文变量
evaluateExpression(expression: string) {
  // 仅把允许表达式访问的变量作为入参传入，此处仅开放serverResponse
  const runFn = new Function('serverResponse', `return ${expression};`);
  return runFn(this.serverResponse);
}

模板调用 #

[isRequired]="evaluateExpression(config_Response.required)"

优势：实现成本极低，安全性远超eval，满足绝大多数业务场景的需求，恶意表达式无法访问window、document、当前组件的敏感属性等内容。

方案2：增加表达式合法性校验（安全性更高） #

如果对安全要求更高，可以先对服务端返回的表达式做格式和变量校验，仅允许指定的运算符、变量出现，过滤所有非法内容。

TS代码实现 #

// 合法表达式正则，仅允许白名单内的字符
private readonly validExpRule = /^[()\s&|=!<>a-zA-Z0-9'"._]+$/;
// 允许表达式访问的变量白名单
private readonly allowedVars = ['serverResponse', 'true', 'false', 'null', 'undefined'];

evaluateSafeExpression(expression: string) {
  // 校验是否存在非法字符
  if (!this.validExpRule.test(expression)) {
    console.error('非法表达式，已拦截：', expression);
    return false;
  }
  // 校验使用的变量都在白名单内
  const usedVars = expression.match(/[a-zA-Z_][a-zA-Z0-9_]*/g) || [];
  const hasIllegalVar = usedVars.some(varName => !this.allowedVars.includes(varName));
  if (hasIllegalVar) {
    console.error('表达式使用了未授权的变量，已拦截：', expression);
    return false;
  }
  // 校验通过后再执行
  const runFn = new Function('serverResponse', `return ${expression};`);
  return runFn(this.serverResponse);
}

模板调用 #

[isRequired]="evaluateSafeExpression(config_Response.required)"

优势：完全限制了表达式的可用范围，即使服务端被篡改返回恶意代码，也会被校验拦截，几乎无安全风险。

方案3：结构化规则解析（最安全） #

如果可以前后端协商调整接口返回结构，最优方案是让服务端返回结构化的规则配置，完全避免执行动态字符串代码。

服务端返回示例 #

{
  "required": {
    "operator": "equal",
    "field": "type",
    "targetValue": "option 1"
  }
}

TS代码实现 #

parseRequiredRule(rule: Record<string, any>) {
  switch(rule.operator) {
    case 'equal':
      return this.serverResponse[rule.field] === rule.targetValue;
    case 'notEqual':
      return this.serverResponse[rule.field] !== rule.targetValue;
    case 'greaterThan':
      return this.serverResponse[rule.field] > rule.targetValue;
    // 扩展其他需要的运算符即可
    default:
      return false;
  }
}

优势：完全没有执行动态代码的风险，稳定性最高，适合规则类型可枚举的业务场景。

内容的提问来源于stack exchange，提问作者Arun M