私のゾーニング/リプレイはなぜ機能しないのですか？

英語からAIを使用して翻訳されました

この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。

Zoning Analysisは、ProおよびEnterpriseプランのContentsquare顧客向けに利用可能です。

ContentsquareがURLのデータをキャプチャするには、Contentsquareタグが存在する必要があります。ページにタグを実装する必要がある場合は、カスタマーサクセスマネージャーに連絡してさらなる支援を受けてください。

トラブルシューティングチェックリスト：

1. まず、ブラウザのキャッシュとクッキーをクリアしてください。多くの場合、根本的な原因はキャッシュに関連しています。キャッシュとクッキーをクリアした後に問題が解決されたかどうかを確認してください。

2. ウェブページが完全に読み込まれることを確認してください、Zoning analysisでスナップショットを撮る前に。

スナップショットを撮って保存する前に、ページの一番下までスクロールして読み込みが完了していることを確認してください。

3. 分析コンテキストで選択した期間を確認してください：

その時にContentsquareタグはアクティブでしたか？
または、ゾーニング作成日と選択した期間の間にページに変更がありましたか？（例：あなたのページは1月8日に変更されました。1月19日にゾーニングを作成しました：分析のために1月8日以降の期間を選択してください）。

ZoningとReplaysはどのようにして「静的リソース」を収集し、私のサイトを自動的に再現しますか？

ContentsquareがCS Scrapersを使用してあなたのサイトの静的リソースを収集する方法について詳しくは、この記事をお読みください。

静的リソースが利用できない場合、ZoningとReplaysは「Live assets」をどのように使用しますか？

Live assetsは、CS Scrapersがすべての静的リソースをダウンロードして保存できない場合に、ContentsquareのZoning分析およびSession replay機能内でページのリソース（CSS、画像、フォント）のライブURLを使用してそのページをレンダリングします。

Zoning分析では、静的リソースが利用できない場合、Contentsquareはあなたのライブサイトからコンテンツを取得して分析します。
Session replayでは、静的リソースが利用できない場合、プレーヤー内で「Live assetsを使用」オプションを一時的に選択して、あなたのライブサイトからデータを分析できます。

なぜ私のzoning/replayが正しく表示されないのですか？

HTML `<dialog>`要素を使用しているページは、ZoningまたはCS Liveで正しく読み込まれない場合があります。

私たちは、<dialog>要素が存在する場合にスナップショットが正しく表示されない技術的制限を特定しました。私たちは解決策を積極的に探求しており、このページを更新します。

Contentsquareがあなたのサイトの静的リソースをダウンロードできない理由はいくつかあります：

認証	リソースが認証されている（通常はクッキーで）
地理的制限	リソースが特定の地理的場所（通常は国別）でのみ利用可能
VPN	リソースがプライベートネットワークの背後にあり、インターネット上で利用できない
特別なヘッダー/クッキー User Agent	リソースが特定のヘッダーまたはクッキーを必要とする一部のリソースが特定のUser-Agentヘッダー（通常はモバイルリソース）でのみ利用可能なサブケース
IP禁止ロボット検出	ゲートウェイプロキシIPがターゲットクライアントサーバーによって禁止されているロボット検出メカニズムやプールシステムによりIPが禁止されるサブケース。

あなたのウェブサイトでzoningとreplaysを機能させる方法

zoning / replayの表示を修正するには、以下に連絡する必要があるかもしれません：

カスタマーサクセスマネージャー
コンテンツ配信ネットワーク（CDN）プロバイダー

以下は、Contentsquareと連携するためにサイトを構成するためのさまざまな方法です。

カスタムヘッダーを作成する（推奨方法）

リクエストを検証するためのカスタム「X-CONTENTSQUARE-SIGNATURE」ヘッダーを作成することは、通常、あなたのContentsquare実装中に完了します。すでにカスタムヘッダーが実装されていない場合は、CSMに連絡してさらなる支援を受けてください。

カスタムヘッダーが推奨される理由

将来的にも対応可能です。つまり、IPが変更されても、IPホワイトリスト方式を使用しないため、ゾーニング/セッションリプレイ機能に影響を与えません。
カスタムヘッダーを使用して、プロキシからのすべての受信リクエストを監視する機能を提供します。
静的カスタムヘッダーを使用するよりも安全です。

動作の仕組み

Contenstquareプロジェクトを作成すると、一意の署名が生成されます。Contentsquareは、その一意の署名をすべてのHTTPリクエストのヘッダーに使用します。サーバー側でリクエストを行うには、"X-CONTENTSQUARE-SIGNATURE"ヘッダー値でリクエストを検証する必要があります。

これが、あなたの一意の署名を生成するための3つの主要な要素です：

1. タイムスタンプ

2. リソースドメイン例: https://www.cstore.com/other/microsoftteams-image-219_23938923.png

3. プロジェクトの秘密（各CSプロジェクトには、プロジェクト作成時に生成され、Contentsquareが保存する秘密があります）：

生成の例は以下の通りです -

Contentsquareは、

Date.now()

を使用してタイムスタンプを生成し、プロキシ設定から取得したプロジェクトの秘密をハッシュ化します（上記のポイント3を参照）。リソースのドメイン（ポイント2を参照）をタイムスタンプと共に使用し、それでハッシュを更新します。次に、タイムスタンプを使用して新しい文字列を構築し、ダイジェストを「base64」で連結します。結果: "timestamp-hash"

ヘッダーリクエストの例 -

署名のデコード方法

文字列を解析してタイムスタンプを抽出します（上記の例では1674119100708に等しい）。
リソースのドメインを使用します。
ContentsquareにはあなたのsecretSignatureがあり、CSMからリクエストする必要があります。

署名を生成するために使用された3つの要素をすべて取得したら、それをContentsquareのものと照合し、検証します。

署名を検証する方法

秘密を取得し、それに「sha256」暗号化関数を適用します。
次に、タイムスタンプとドメインでハッシュを更新します。
タイムスタンプとbase64エンコーディングのダイジェストを含む文字列を構成します: "{timestamp}-{digestBase64/hash}"。
バックエンドによっては、署名を動的に生成し、X-CONTENTSQUARE-SIGNATUREでリクエストを検証するプロセスを考案する必要があります。

さらなるセキュリティのために、タイムスタンプが現在から一定の時間範囲内であることを確認することが可能です。以下のコード例では、5分以上古くないことを確認します。古い場合、コードは署名を拒否します。

コード例を用いた実装

NodeJS:

const crypto = require('crypto');

const secret = 'secretKey'; // 誰かからCSによって与えられた
receivedHeaderExample = '1617243555555-D9gh1234G56789HijklMnopQrstuvWxYz=';

// 受信したヘッダーからタイムスタンプとダイジェストを抽出
const [timestamp, receivedDigest] = receivedHeaderExample.split('-');

// タイムスタンプが古すぎないことを確認するための追加のセキュリティステップの例
const currentTimestamp = Date.now();
if(currentTimestamp - timestamp > 5 * 60 * 1000) {
  throw new Error("検証に失敗しました。タイムスタンプの署名は5分以上古いです");
}

// ダイジェストを生成するために使用された文字列を再作成
const dataToSign = `${resourceDomain}-${timestamp}`;

// 同じ秘密とアルゴリズムを使用して新しいダイジェストを作成
const hmac = crypto.createHmac('sha256', secret);
hmac.update(dataToSign);
const generatedDigest = hmac.digest('base64');

// 新しく生成されたダイジェストと受信したヘッダーのものを比較
if (receivedDigest === generatedDigest) {
  console.log('ヘッダーは有効です');
  // リクエストを検証するためのコード
}

カスタムヘッダーが正しく実装されている場合、あなたの側でIPをホワイトリストに登録する必要はないはずです。

ContentsquareのIPをホワイトリストに登録する

ContentsquareのIPをホワイトリストに登録する必要がある場合は、ホワイトリストに登録するIPアドレスとドメインに関するガイドをご覧ください。

プロキシを使用する

Contentsquareは、異なる場所のプロキシを使用して地理的制限を回避するのに役立ちます。プロキシは独自のIPアドレスを持ち、特定の地域で操作できます。