こんにちは!プロダクトの品質とユーザー体験を守るために日夜奮闘している君なら、一度はこんな恐怖を感じたことがないかい?
「ユーザーの画面をそのまま再現する『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` (推奨・デフォルト)
- すべてのユーザー入力(``, `
- ただし、通常のテキストやボタンのラベルなどは表示される。
2. `mask` (最高セキュリティ)
- 入力値だけでなく、ページ上のすべてのテキスト要素をマスクする。数字や文字はすべてランダムな文字に置き換わり、画面のレイアウトとデザインだけが再現される状態になる。
まずは `mask-user-input` を基本としつつ、アプリの特性に合わせて調整していくのが王道だ。
—
3. CSSセレクターと属性を活用した特定要素の非表示化
デフォルトの設定だけでは、「特定の機密情報が含まれる独自のUIコンポーネント」や「モーダル内の重要データ」まではカバーしきれないことがある。
そんなときは、HTML要素に特定のCSSクラスや属性を付与することで、Datadogに「この要素は絶対に隠して!」と指示することができるんだ。
手法A: クラス名によるマスク (`d-dd-privacy-mask`)
隠したい要素に `d-dd-privacy-mask` というクラス名を付与するだけで、その子要素も含めてテキストがすべてマスクされる。
手法B: 要素自体の完全除外 (`d-dd-privacy-hidden`)
マスクするだけでなく、DOM構造自体をリプレイ画面から完全に消し去りたい場合(機密性の高いグラフィックや特定のウィジェットなど)は、`d-dd-privacy-hidden` を使う。
逆に、「全体を `mask` モードにしているけれど、この部分だけはデザイン確認のためにどうしても表示させたい!」という場合は、`d-dd-privacy-allow` というクラスを使うことで、マスクを例外的に解除することも可能だ。
—
4. 動的なカスタムマスクルールの実装手順
「静的なHTMLクラスだけじゃなく、コンポーネントの状態に応じて動的にマスク対象を制御したい」というモダンなフロントエンド開発(React, Vue, Angularなど)の現場では、どのように対応すればいいだろう?
Reactを例に、カスタムマスクを美しく実装するパターンを見てみよう。
実装例: Reactコンポーネントでの条件付きプライバシー制御
ユーザーの残高や口座番号を表示するカードコンポーネントで、プライバシー保護のクラスを動的に切り替える例だ。
import React, { useState } from ‘react’;
export const AccountBalanceCard: React.FC<{ balance: number; accountNumber: string }> = ({
balance,
accountNumber,
}) => {
// ユーザーが「残高を表示する」ボタンを押したかどうか
const [isRevealed, setIsRevealed] = useState(false);
return (
口座情報
{/ 口座番号は常に機密情報なので、強制的にマスククラスを付与 /}
口座番号: {accountNumber}
{/ 残高は、ユーザーが目を凝らして表示している時だけマスクを外す、といった制御も可能 /}
残高: ¥{balance.toLocaleString()}
);
};
このコードの美しいところは、Reactの状態(State)とDatadogのプライバシー制御が綺麗に同調している点だ。ユーザーが「残高を見る」をクリックして画面上に数字が出現すればリプレイ側でも見え、隠していればマスクされる。これにより、ユーザーの実際の視認体験とDatadog上のリプレイ体験を完全に一致させることができる。
—
5. 導入後のチェックと運用:本当に隠れているかを確認する神の技
設定が終わったら、必ず「正しくマスクされているか」を自分の目で確認しよう。ここで手を抜くと、本番リリース後に冷や汗をかくことになる。
1. ローカル環境またはステージング環境でテストプレイを行う
- あえてテスト用のメールアドレスやダミーのクレジットカード番号を入力してみる。
2. Datadogコンソールを開く
- `UX -> Session Replay` に移動し、自分のテストセッションの録画を開く。
3. インスペクターで確認
- Datadogのプレイヤー上で、入力した機密情報が “ や黒いブロックで綺麗にマスクされていることを確認する。
- もし見えてしまっている要素があれば、その親要素に `d-dd-privacy-mask` が正しく効いているかCSSセレクターを再確認する。
—
まとめ
今回は、Datadog RUMとSession Replayにおけるプライバシー保護の極意について解説した。
- デフォルト設定 (`mask-user-input`) でまずは入力値を完全に守る。
- CSSクラス (`d-dd-privacy-mask` / `d-dd-privacy-hidden`) を使って、画面内の機密エリアをピンポイントで隠す。
- 動的な制御によって、モダンなWebアプリケーションのUI変化にも柔軟に対応する。
これをマスターすれば、セキュリティチームや法務部門からも文句なしの「安全で最高に価値のあるオブザーバビリティ環境」を構築できるはずだ。毎日の運用監視が、ぐっと安心で楽しいものになりますように。
さあ、今すぐコードを開いて、安全なリプレイ環境をセットアップしに行こう!