低代码与生成式 UI 工程化方案：评审时怎样发现隐性风险

低代码与生成式 UI 工程化方案：评审时怎样发现隐性风险

生成式 UI 要把模型输出当作不可信输入。一次包含深层嵌套和大量节点的 Schema，就可能显著增加组件树的渲染与布局成本；上线前应验证节点预算、组件白名单和降级路径。

1. 先处理输入边界：递归渲染器并不等于安全渲染器

生成式 UI（Generative UI）或低代码平台常把“模型输出 JSON Schema”与“前端递归渲染”连在一起。但递归渲染器只解决了展示，不会自动限制组件层级、节点数量或属性来源。

模型输出可能包含不在白名单内的组件、危险属性或超出预算的节点。代码评审不能只靠人工查看 JSON，应将这些约束放入可执行的校验中。

[以下为压测示例，阈值应按页面复杂度实测]
输入 Prompt：“生成带 100 列和多维度图表的大屏”
生成 JSON 大小：4.2 MB (包含大量冗余层级)
DOM 节点总数：34,500 个
主线程阻塞时间 (TBT)：8,200 ms
浏览器内存占用：从 120MB 飙升至 1.8GB (触发 OOM 崩溃)

没有输入校验和资源预算时，异常 Schema 可能占满主线程或导致渲染失败。

2. 隐性风险图谱：从 Schema 逃逸到 DOM 渲染爆炸

可将常见风险拆成下面这条分层校验与审计链路：

每一层都需要明确规则和降级行为。代码评审既要看渲染器，也要核对规则是否覆盖了组件、属性和资源预算。

3. quality gate 示例：TypeScript 契约校验与安全渲染

下面的 TypeScript 代码是一个可改造的质量门禁示例，覆盖 Schema 校验、节点预算拦截和安全属性净化。接入前需要按组件库、页面预算和错误提示策略补齐规则：

import React, { Component, ErrorInfo, ReactNode } from 'react';
import { z } from 'zod';

// 1. 注册受信任的组件白名单 Schema
const AllowedComponentTypeSchema = z.enum([
  'Button',
  'Card',
  'Table',
  'TextInput',
  'FlexLayout',
]);

// 2. 递归定义 UI 节点 Schema，严格限定最大嵌套深度
export interface UINode {
  type: z.infer<typeof AllowedComponentTypeSchema>;
  props?: Record<string, any>;
  children?: UINode[];
}

export const UINodeSchema: z.ZodType<UINode> = z.lazy(() =>
  z.object({
    type: AllowedComponentTypeSchema,
    props: z.record(z.any()).optional(),
    children: z.array(UINodeSchema).optional(),
  })
);

// 3. 质量门禁配置预算接口
export interface BudgetConfig {
  maxTotalNodes: number;
  maxDepth: number;
}

// 4. 节点数量与深度预检函数（纯函数，绝不阻塞渲染）
export function validateUIBudget(
  node: UINode,
  config: BudgetConfig = { maxTotalNodes: 1000, maxDepth: 8 }
): { valid: boolean; reason?: string } {
  let totalNodes = 0;

  function traverse(currentNode: UINode, currentDepth: number): boolean {
    totalNodes++;
    if (totalNodes > config.maxTotalNodes) {
      return false;
    }
    if (currentDepth > config.maxDepth) {
      return false;
    }

    if (currentNode.children && currentNode.children.length > 0) {
      for (const child of currentNode.children) {
        if (!traverse(child, currentDepth + 1)) {
          return false;
        }
      }
    }
    return true;
  }

  const isWithinBudget = traverse(node, 1);
  if (!isWithinBudget) {
    return {
      valid: false,
      reason: `UI 节点超出预算限额：总节点数(${totalNodes}) 或 嵌套深度判定失败`,
    };
  }
  return { valid: true };
}

// 5. React 安全渲染器组件
interface GenerativeUIRendererProps {
  rawSchema: unknown;
  fallbackUI?: ReactNode;
}

export const GenerativeUIRenderer: React.FC<GenerativeUIRendererProps> = ({
  rawSchema,
  fallbackUI,
}) => {
  // 第一步：Schema 格式与组件白名单校验
  const parseResult = UINodeSchema.safeParse(rawSchema);
  if (!parseResult.success) {
    console.warn('[Quality Gate] 收到非法 UI Schema:', parseResult.error);
    return <>{fallbackUI || <div className="ui-error">生成 UI 格式异常，已安全降级</div>}</>;
  }

  const validNode = parseResult.data;

  // 第二步：节点与嵌套深度预算校验
  const budgetResult = validateUIBudget(validNode);
  if (!budgetResult.valid) {
    console.error('[Quality Gate] 渲染被阻断:', budgetResult.reason);
    return <>{fallbackUI || <div className="ui-error">{budgetResult.reason}</div>}</>;
  }

  // 第三步：递归映射为受控 React 元素
  const renderNode = (node: UINode, key: string): ReactNode => {
    const ComponentMap: Record<string, React.FC<any>> = {
      Button: (p) => <button className="btn-primary" {...p} />,
      Card: (p) => <div className="card-container" {...p} />,
      FlexLayout: (p) => <div style={{ display: 'flex' }} {...p} />,
      Table: (p) => <table className="data-table" {...p} />,
      TextInput: (p) => <input type="text" {...p} />,
    };

    const TargetComponent = ComponentMap[node.type];
    if (!TargetComponent) return null;

    const sanitizedProps = { ...(node.props || {}) };
    // 过滤危险的事件注入
    delete sanitizedProps.dangerouslySetInnerHTML;
    delete sanitizedProps.onClick; // 生成式 UI 事件必须由专有协议接管

    return (
      <TargetComponent key={key} {...sanitizedProps}>
        {node.children?.map((child, idx) => renderNode(child, `${key}-${idx}`))}
      </TargetComponent>
    );
  };

  return <ErrorBoundaryFallback>{renderNode(validNode, 'root')}</ErrorBoundaryFallback>;
};

// 6. 隔离组件崩溃的 Error Boundary
class ErrorBoundaryFallback extends Component<{ children: ReactNode }, { hasError: boolean }> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('[Generative UI Render Crash]', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div className="ui-crash-box">动态组件渲染运行时异常，已安全拦截</div>;
    }
    return this.props.children;
  }
}

4. 低代码门禁审计清单：评审时核对的 5 项

工程代码评审除了样式，还应优先核对以下五项：

1. 组件类型白名单机制：绝不能允许直接根据 JSON 的 type 字段用 React.createElement(type) 盲目挂载，必须经过映射字典校验。
2. 事件句柄剥离：AI 吐出的 JSON 中严禁直接包含字符串形式的 onClick 或 eval 代码，所有交互必须通过声明式 Event ID 路由给本地受控函数。
3. DOM 节点总数与嵌套深度上界：配置硬性的预算限制（如单次渲染节点数 ≤ 1000，深度 ≤ 8），超出立即截断。
4. 属性净化（XSS 防御）：严格剔除 javascript: 伪协议开头的链接属性以及 dangerouslySetInnerHTML。
5. 渲染隔离区域（Error Boundary）：每个生成式 UI 挂载点必须被独立的 ErrorBoundary 包裹，绝不能让局部渲染异常导致全站白屏。

5. 动态生成越快，输入边界越要明确

AI 生成的代码和 UI 都应按外部输入处理。生成速度越快，前端越需要在入口处限制数据体积、节点数和允许的行为。评审时可以用超大 Schema、深层嵌套和非法属性做回放测试，确认系统能安全降级。

低代码页面还要处理编辑态与运行态解释不一致的问题。组件白名单、事件名和表达式由同一份 schema 驱动，编辑器负责产出配置，运行器负责校验并执行。历史页面配置可作为兼容样本，在升级渲染器时批量预览关键结构；发现不支持的字段应给出路径，不能默默丢掉。这样运营能知道要改什么，开发也能控制变更范围。对于会触发请求的事件，参数来源和允许的 URL 也要单独限制，避免配置绕过页面原有权限。

7. 编辑器预览不能替代运行期校验

拖拽面板能把组件摆出来，只说明配置在编辑器里看起来成立。真正运行时还会碰到历史字段、接口空值、权限变化和浏览器兼容差异。保存前可以做一次静态校验，发布前再用实际数据渲染一遍；两个阶段的报错格式保持一致，使用者才不会在预览通过后才知道页面无法打开。

表达式是最容易被低估的一块。若允许配置写条件逻辑，就要限制可访问的上下文和可调用函数，不能让一段文本取得全局对象或绕开鉴权。对外部数据先裁剪字段，再交给渲染器。这样做会牺牲一点自由度，但故障时能定位到具体组件和配置路径，而不是面对一整个白屏。