为Mustache绑定新增全局表达式实现FullStory PII数据自动掩码方案问询

架构老林

2026-10-13

你提出的基于Mustache绑定表达式全局过滤器实现反向PII掩码的方案完全可落地，能有效解决手动标注敏感字段效率低、易遗漏的问题，具体实现如下：

核心思路

反转FullStory默认掩码逻辑：

配置FullStory默认对所有文本内容执行掩码操作
仅对显式标记为非PII的字段，通过全局过滤器自动添加取消掩码的标记类，实现仅允许非敏感字段被FullStory采集

实现步骤

1. 调整FullStory初始化配置

修改FullStory初始化参数，开启全局文本默认掩码规则：

window._fs_config = {
  // 原有配置保持不变
  maskAllText: true, // 关键配置：所有文本默认开启掩码
  unmaskedClasses: ['fs-unmask'] // 配置指定类名的元素取消掩码
}

2. 注册全局`nonPII`过滤器

以Vue框架为例，注册全局过滤器，经过该过滤器的内容会自动包裹带fs-unmask类的行内元素：

// Vue2 全局过滤器注册
Vue.filter('nonPII', function (content) {
  return `<span class="fs-unmask">${content}</span>`
})

// 若使用Vue3，可注册全局自定义函数：
app.config.globalProperties.$nonPII = (content) => {
  return `<span class="fs-unmask">${content}</span>`
}

3. 模板使用示例

配置完成后，你可以直接按照期望的方式编写组件模板，无需手动给敏感字段加掩码类：

<template>
  <!-- 未加过滤器的敏感字段默认被FullStory掩码 -->
  <h1>Hello {{user.Name}}</h1>
  <!-- 仅显式加了nonPII过滤器的非敏感字段会被采集 -->
  <h2>please checkout {{ newFeatureText | nonPII }}</h2>
</template>