なぜ私のゾーニング/再生回数は機能しないのですか？

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

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

2. スナップショットを取得する前にウェブページの読み込みが完了していることを確認してください。  

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

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

ゾーニングと再生はどのようにして「静的リソース」を収集し、私のサイトを自動的に再作成しますか？

この記事を読んで、ContentsquareがCSスクレイパーを使用してあなたのサイトの静的リソースをどのように収集するかについて詳しく学んでください。

静的リソースが利用できない場合、ゾーニングと再生は「ライブアセット」をどのように使用しますか？

ライブアセットは、CSスクレイパーがすべての静的リソースをダウンロードして保存できない場合に、ページのリソース（CSS、画像、フォント）のライブURLを使用して、Contentsquareのゾーニング分析およびセッションリプレイ機能内でそのページをレンダリングします。

• ゾーニング分析では、静的リソースが利用できない場合、Contentsquareはあなたが分析するためにライブサイトからコンテンツを取得します。
• セッションリプレイでは、静的リソースが利用できない場合、プレイヤー内で「ライブアセットを使用」オプションを一時的に選択して、ライブサイトからデータを分析できます。

なぜ私のゾーニング/リプレイが正しく表示されないのですか？

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

ゾーニングとリプレイをあなたのウェブサイトで機能させる方法

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

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

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

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

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

動作の仕組み

Contentsquareプロジェクトを作成すると、一意の署名が生成されます。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"

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

署名をデコードする方法

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

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

署名を検証する方法

1. 秘密を取得し、それに「sha256」暗号化関数を適用します。
2. 次に、タイムスタンプとドメインでハッシュを更新します。
3. タイムスタンプとbase64エンコーディングのダイジェストを含む文字列を構成します: "{timestamp}-{digestBase64/hash}"。
4. バックエンドに応じて、署名を動的に生成し、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('ヘッダーは有効です');
  // リクエストを検証するためのコード
}

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

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

プロキシを使用する

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