你可以在全局和/或细粒度级别对 OpenReplay 捕获的内容进行脱敏。任何被遮蔽或忽略的数据都不会在源头被捕获。换句话说，这些数据永远不会离开用户的浏览器。

在设置 OpenReplay 时，可以在 tracker 级别对数据进行脱敏。

1. 在 ‘Preferences > Projects’ 下点击你项目的 Tracking Code。
2. 数据录制选项应当出现在代码片段的正前方：

• Inputs：用于忽略、遮蔽或录制所有用户的输入值。
• Do not record any numeric text：用于忽略文本元素中包含的数值。
• Do not record email addresses：默认情况下，文本元素中包含的所有电子邮件都会被遮蔽，不会出现在回放中。你可以通过取消勾选该复选框来禁用此功能。

3. 更改数据录制选项会影响代码片段。请务必将更新后的脚本复制/粘贴到你的 Web 应用中。

有一组与隐私相关的选项可以传递给构造函数：

• obscureTextEmails?: boolean 遮蔽文本元素中的电子邮件。电子邮件将被转换为随机的星号串。默认值：true。
• obscureTextNumbers?: boolean 遮蔽文本元素中的数字。数字将被转换为随机的星号串。默认值：false。
• obscureInputEmails?: boolean 遮蔽输入字段中的电子邮件。电子邮件值将被转换为随机的星号串。默认值：true。
• obscureInputDates?: boolean 遮蔽输入字段中的日期。日期值将被转换为随机的星号串。默认值：false。
• defaultInputMode?: 0 | 1 | 2 输入值的默认捕获模式。分别为：明文、遮蔽或忽略。默认值：1（遮蔽）。

经过脱敏的文本、电子邮件和数字会在数据发送到 OpenReplay 服务器之前被遮蔽或抑制。因此，对上述选项所做的更改无法追溯生效，仅适用于新收集的数据。

你也可以在代码级别对数据进行脱敏，以获得更精细的粒度。这对于遮蔽或忽略 DOM 元素和输入字段非常有用。

• data-openreplay-obscured 用于遮罩 <input> 标签、<img> 和其他 HTML 元素（即 <div>）的文本内容，但 <svg> 和 <canvas> 除外。

<!--Obscuring input fields-->
<form action="/action_page.php">
  Name: <input type="text" name="fname" data-openreplay-obscured><br>
  <input type="submit" value="Submit">
</form>
<!--Obscuring a div element-->
<div style="background-color:lightblue" data-openreplay-obscured>
  <h3>This is a sensitive information</h3>
  <p>This is an important paragraph</p>
  <img src="important_image.jpg">
</div>

• data-openreplay-hidden 用于删除 <input> 标签、<img>、<svg> 和其他 HTML 元素（即 <div>）的内容，但 <canvas> 除外。该元素的内容（包括其子组件）会被移除，但其 props 和参数会被保留，如下例所示：

<div style="background-color:lightblue" data-openreplay-hidden>
  <div>This is a sensitive information</div>
  <svg>An important chart</svg>
</div>

这将导致 tracker 录制以下 DOM：

<div style="background-color:lightblue" data-openreplay-hidden>
</div>

• domSanitizer: (node: Element) => SanitizeLevel 函数可避免必须对每个需要脱敏的 HTML 组件进行插桩。SanitizeLevel 可以是 Plain (0)、Obscured (1) 或 Hidden (2)。该函数会传递给 tracker 的构造函数。下面是一个删除所有具有特定 CSS 类名的 HTML 元素的示例：

// Import SanitizeLevel enum
import Tracker, { SanitizeLevel } from "@openreplay/tracker";

const tracker = new Tracker({
  projectKey: PROJECT_KEY,
  domSanitizer: (node: Element) => {
    const elementClassNames = node.classList

    if (elementClassNames.contains('to_be_redacted_class')) {
      return SanitizeLevel.Hidden
    }

    if (node.id === 'sensitiveData') {
      return SanitizeLevel.Obscured
    }

    return SanitizeLevel.Plain
  }
})
tracker.start()

注意： 所有经过脱敏的元素都会在源头（tracker）级别被遮罩/删除，因此敏感数据永远不会到达 OpenReplay 实例。

你可以使用 OpenReplay SDK 对网络数据和应用程序状态进行脱敏。

捕获请求/响应可能会记录你的应用程序正在发送/接收的高度敏感或私密的信息。请确保正确地删除你的网络数据。

使用 sanitizer 选项来删除 Fetch/XHR 请求/响应中的敏感数据。有关更多详情，请参阅网络选项。

此外，请查看这个分步教程，了解如何捕获并对网络请求进行脱敏。

要对 GraphQL 数据进行脱敏，你需要在调用 tracker 之前克隆操作中的关键变量和结果。有关更多详情，请参阅如何对 GraphQL 中录制的数据进行脱敏。

使用 OpenReplay SDK 清除前端状态存储中的敏感数据。

使用 actionFilter、actionTransformer 和 stateTransformer 选项来删除存储中的敏感操作和子树。有关更多详情，请参阅 redux 插件文档。

使用 filter、transformer 和 mutationTransformer 选项来删除存储中的敏感 mutation 和子树。有关更多详情，请参阅 vuex 插件文档。

使用 filter、transformer 和 mutationTransformer 选项来删除存储中的敏感 mutation 和子树。有关更多详情，请参阅 zustand 插件文档。

使用 filter、transformer 和 mutationTransformer 选项来删除存储中的敏感 mutation 和子树。有关更多详情，请参阅 pinia 插件文档。

使用 actionFilter、actionTransformer 和 stateTransformer 选项来删除存储中的敏感操作和子树。有关更多详情，请参阅 ngrx 插件文档。

我们一直在不断改进与隐私相关的功能，因此如果你需要我们尚未支持的功能，请告知我们。如果你在对数据进行脱敏时遇到问题，请通过我们的 Slack 联系我们，或查看我们的论坛，从我们的社区获得帮助。