OpenReplay がキャプチャする内容は、グローバルレベルまたはきめ細かなレベル（あるいはその両方）でサニタイズできます。マスクまたは無視されたデータは、ソースの時点でキャプチャされません。つまり、そのデータがユーザーのブラウザーの外に出ることはありません。

データは、OpenReplay のセットアップ時にトラッカーレベルでサニタイズできます。

1. ‘Preferences > Projects’ で、プロジェクトの Tracking Code をクリックします。
2. データ記録のオプションが、コードスニペットの直前に表示されます：

• Inputs：ユーザーの入力値をすべて無視、マスク、または記録するための設定です。
• Do not record any numeric text：テキスト要素に含まれる数値を無視します。
• Do not record email addresses：デフォルトでは、テキスト要素に含まれるメールアドレスはすべてマスクされ、リプレイには表示されません。チェックボックスをオフにすると、この動作を無効にできます。

3. データ記録オプションを変更すると、コードスニペットも変わります。更新されたスクリプトを、必ずウェブアプリにコピー＆ペーストしてください。

コンストラクターに渡せる、プライバシー関連のオプションがいくつかあります：

• obscureTextEmails?: boolean テキスト要素内のメールアドレスをマスクします。メールアドレスは、ランダムな長さのアスタリスクの文字列に変換されます。デフォルト：true。
• obscureTextNumbers?: boolean テキスト要素内の数値をマスクします。数値は、ランダムな長さのアスタリスクの文字列に変換されます。デフォルト：false。
• obscureInputEmails?: boolean 入力フィールド内のメールアドレスをマスクします。メールアドレスの値は、ランダムな長さのアスタリスクの文字列に変換されます。デフォルト：true。
• obscureInputNumbers?: boolean 入力フィールド内の数値をマスクします。数値は、ランダムな長さのアスタリスクの文字列に変換されます。デフォルト：false。
• 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> は除きます。要素のコンテンツ（子コンポーネントを含む）は削除されますが、次の例のように、プロパティと引数は保持されます：

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

この場合、トラッカーによって次の DOM が記録されます：

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

• domSanitizer: (node: Element) => SanitizeLevel 関数を使用すると、サニタイズが必要な HTML コンポーネントごとにインストルメント化する必要がなくなります。SanitizeLevel には Plain（0）、Obscured（1）、Hidden（2）のいずれかを指定できます。この関数はトラッカーのコンストラクターに渡します。以下は、特定の 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()

注記：すべてのサニタイズされた要素は、ソース（トラッカー）レベルでマスク/編集されるため、機密データが OpenReplay インスタンスに到達することはありません。

OpenReplay SDK を使用して、ネットワークデータとアプリケーションのステートをサニタイズできます。

リクエスト/レスポンスをキャプチャすると、アプリケーションが送受信する非常に機密性の高い情報や個人情報が記録される可能性があります。ネットワークデータは必ず適切に編集してください。

Fetch/XHR のリクエスト/レスポンスから機密データを編集するには、sanitizer オプションを使用します。詳細はネットワークオプションを参照してください。

また、ネットワークリクエストのキャプチャとサニタイズに関するステップバイステップのチュートリアルもご確認ください。

GraphQL のデータをサニタイズするには、トラッカーを呼び出す前に、オペレーションの主要な変数と結果を複製する必要があります。詳細は、GraphQL で記録されたデータをサニタイズする方法を参照してください。

OpenReplay SDK を使用して、フロントエンドのステートストアから機密データを除去します。

actionFilter、actionTransformer、stateTransformer オプションを使用して、ストアから機密性の高いアクションとサブツリーを編集します。詳細は、redux プラグインのドキュメントを参照してください。

filter、transformer、mutationTransformer オプションを使用して、ストアから機密性の高いミューテーションとサブツリーを編集します。詳細は、vuex プラグインのドキュメントを参照してください。

filter、transformer、mutationTransformer オプションを使用して、ストアから機密性の高いミューテーションとサブツリーを編集します。詳細は、zustand プラグインのドキュメントを参照してください。

filter、transformer、mutationTransformer オプションを使用して、ストアから機密性の高いミューテーションとサブツリーを編集します。詳細は、pinia プラグインのドキュメントを参照してください。

actionFilter、actionTransformer、stateTransformer オプションを使用して、ストアから機密性の高いアクションとサブツリーを編集します。詳細は、ngrx プラグインのドキュメントを参照してください。

プライバシー関連の機能は継続的に改善しています。まだサポートされていない機能が必要な場合は、ぜひお知らせください。データのサニタイズで問題が発生した場合は、Slack にお問い合わせいただき、コミュニティのサポートを受けてください。