【入門編】Datadog RumとSession Replayにおけるプライバシー保護とPⅡデータのクライアントサイド難読化設定ガイド – 運用監視・オブザーバビリティ活用バイブル

こんにちは!プロダクトの品質とユーザー体験を守るために日夜奮闘している君なら、一度はこんな恐怖を感じたことがないかい?

「ユーザーの画面をそのまま再現する『Session Replay』を導入したいけれど、うっかりパスワードやクレジットカード番号、あるいは個人のプライバシーに関わるデータ(PII)まで記録してしまって、情報漏洩になったらどうしよう……」

分かるよ、その不安。オブザーバビリティ(可観測性)を高めることはエンジニアの正義だけど、ユーザーのプライバシーを脅かすことは絶対に避けなければならない大罪だ。

でも安心してほしい。DatadogのRUM(Real User Monitoring)とSession Replayには、「最初からすべての機密情報を隠す(デフォルトマスク)」という鉄壁のガードと、「ビジネス上必要な特定の部分だけをピンポイントで隠す(カスタムマスク)」という超強力なカスタマイズ機能が備わっている。

今回は、初心者であっても今日から迷わず安全にSession Replayを導入できるように、そのプライバシー保護の神髄を優しく、かつ徹底的に解説しよう。これをマスターすれば、恐怖心なく、自信を持ってリプレイ機能をプロダクトに組み込めるようになるよ!

—

1. なぜ「Session Replay」のプライバシー保護が重要なのか?

まず、敵を知ることから始めよう。Session Replayは、ユーザーがブラウザ上でどのような操作をし、どこをクリックし、どんなテキストを入力したかを、まるでビデオのように再現してくれる魔法のようなツールだ。フロントエンドのバグ解析においては最強の武器になる。

しかし、この「ビデオのように再現する」という性質上、画面上にレンダリングされたHTMLテキストや入力値は、すべてDatadog側に送信される。もしログイン画面のパスワード入力欄や、ユーザーのプロフィール画面(氏名、メールアドレス、電話番号など)が丸見えになっていたらどうなるだろう?

Datadogのサーバーに生データが保存されてしまうリスクだけでなく、社内のダッシュボードを閲覧するメンバー全員にユーザーの機密情報が見えてしまうという、セキュリティ上の大惨事を引き起こしかねない。

だからこそ、「クライアントサイド(ユーザーのブラウザ上)で、サーバーに送る前に機密情報を完全に隠す(マスクする)」という処理が絶対に必要なんだ。

—

2. Datadog RUM & Session Replayの基礎セットアップ

まずは、プロジェクトにDatadogのRUM SDKを正しく組み込むところから始めよう。すでに導入済みの場合は次のステップに進んでも良いけれど、基礎の確認としておさらいしておこう。

ここでは、最も一般的なnpm経由でのセットアップを例に解説するよ。

インストール

npm install @datadog/browser-rum

初期化スクリプト(HelloWorld的実装)

アプリのエントリーポイント(`App.tsx` や `main.ts` など)で、以下のように初期化を行う。ここで注目してほしいのが、`defaultPrivacyLevel` という設定項目だ。

import { datadogRum } from ‘@datadog/browser-rum’;

datadogRum.init({
applicationId: ‘YOUR_DATADOG_APPLICATION_ID’,
clientToken: ‘YOUR_DATADOG_CLIENT_TOKEN’,
site: ‘datadoghq.com’,
service: ‘my-web-app’,
env: ‘production’,

// RUMデータのサンプリングレート(100%の場合)
sessionSampleRate: 100,

// Session Replayのサンプリングレート(100%の場合)
sessionReplaySampleRate: 100,

// ★超重要:プライバシーのデフォルトレベルを設定する
defaultPrivacyLevel: ‘mask-user-input’, // または ‘mask’
});

// ユーザーセッションのトラッキング開始
datadogRum.startSessionReplayRecording();

ここで設定している `defaultPrivacyLevel` には、主に以下の2つのモードがある。

1. `mask-user-input` (推奨・デフォルト)

  • すべてのユーザー入力(``, `