コンテンツセキュリティポリシー（CSP）は、ウェブアプリケーションの所有者が作成するセキュリティレイヤーです。
効果的な（厳格な）CSPは、許可されるリソースを少数のドメインセットに制限します。この制限がPendoの読み込みや正常な動作を妨げ、Pendoに影響を与える可能性があります。たとえば、エージェントが呼び出されなかったり、ガイドが読み込まれなかったりする場合が考えられます。このため、Pendoの全機能を使用できるようにCSPを調整する必要があります。
この記事では、Pendoの全機能を使用するためにCSPで最低限必要なディレクティブについて概説します。Feedbackをご利用の方は、Feedbackのコンテンツに関するセキュリティポリシーを参照してください。
CSPの概要
CSPは、ウェブアプリケーション内の特定のコンテンツを読み込むドメインを指定する方法です。CSPでは、JavaScript、CSS、画像などの特定の種類のコンテンツに許可されるソースを指定できます。
CSPは、特に機密データを管理している場合、クロスサイトスクリプティング（XSS）やデータインジェクション攻撃を防ぐためによく使用されます。CSPは、以下のような場合にも使用できます。
- 画像やフレームなどのページリソースを信頼できるソースからのみ読み込みたい場合
- アプリケーションが信頼できないドメインによってフレーム化されるのを防ぎたい場合
- すべてのリソース要求を透過的にHTTPSにアップグレードしたい場合
CSPを有効にするには、Content-Security-PolicyのHTTP応答ヘッダーを設定するか、メインドキュメントのmetaタグとして設定します。たとえば、アプリケーションでは、以下のヘッダーを設定してポリシーを定義できます。
Content-Security-Policy: default-src https:; script-src 'nonce-{random}'; object-src 'none'
実際のポリシーは通常、より複雑なものとなります。上記のポリシー例では、すべてのリソースがHTTPSで読み込まれることを要求し、正しいnonce属性を持つscript要素のみを許可し、プラグインの読み込みを防ぎます。
CSPが引き起こすエラー
Pendoのインストール後に以下のような問題が発生した場合、CSPを確認する必要があります。
- アプリケーションのアナリティクスやガイドイベントが表示されない。
- ガイドがアプリケーションにまったく読み込まれない。
- ビジュアルデザインスタジオ（Visual Design Studio）が起動しない。
- アプリケーションにリプレイが表示されない。
- コンソールに以下のようなエラーメッセージが表示される。
現在のCSPの確認
現在のCSPを確認する方法は以下のとおりです。
-
ブラウザのコンソールで［ネットワーク（Network）］タブを開きます。
- メインページのリクエストを開きます。
-
［ヘッダー（Headers）］タブにある
Content-Security-PolicyにリストされているCSPを見つけます。
- CSP応答ヘッダーが見つからない場合は、ページのHTMLを調べ、ドキュメントの
<head>でContent-Security-Policy<meta>タグを見つけます。
標準的な必須ディレクティブ
必須ディレクティブは、エージェントの配信設定によって異なります。Pendoがアプリケーションで完全に機能するために必須のディレクティブを把握するには、まずガイド配信設定を書き留める必要があります。その方法は以下のとおりです。
-
［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
-
［アプリケーション（Applications）］タブを開きます。
-
［アプリケーション］リストから該当するアプリを見つけて開きます。
-
［エージェント設定（Agent Settings）］タブを開きます。
-
［本番設定を管理（Manage Production Settings）］を選択します。
-
［標準（Standards）］、［XHR］、［JSONP］のうち、どのオプションが選択されているかに留意してください。
Pendoが厳格なCSPを備えて完全に機能するには、以下のディレクティブの変更が必要です。以下のコンテンツタイプ別に整理されています。
- JavaScript（ディレクティブ：
script-src）
- CSS（ディレクティブ：
style-src）
- 画像（ディレクティブ：
img-src）
- データ（ディレクティブ：
connect-src）
- フレーム（ディレクティブ：
frame-srcおよびframe-ancestors）
- Worker（ディレクティブ：
worker-src）
SUB_IDはお客様のサブスクリプションIDに置き換えてください。サブスクリプションIDは、PendoにログインしているときにページのURLに表示されます。フォーマットはhttps://app.pendo.io/s/[SUB_ID]/です。/s/の直後にサブスクリプションIDが表示されますが、Pendo内を移動する際にURLパスの最後に表示されるガイドやレポートの一意のIDを誤って取得しないようにしてください。
必要に応じて、ホスト名の前にhttps://を加えてください。
JavaScriptディレクティブの変更
ディレクティブ：script-src
画像ディレクティブの変更
ディレクティブ：img-src
以下のソースを使用して、Pendoがホストする画像をサイトに表示します。
| ソース |
説明 |
cdn.pendo.io |
クラシックガイドのバッジにのみ必要です。
|
data.pendo.io |
イベントは、画像srcを使用してこのURLに送信されます。イベントをPendoに送信するために必要です。
|
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
ガイドの画像はこのURLからダウンロードされます。アップロードされたガイドの画像をダウンロードするために必要です。
|
app.pendo.io |
デザイナーを使用する場合にのみ必要です。
|
data: |
デフォルトのバッジ画像。バッジにカスタム画像を使用する場合は必要ありません。
|
データディレクティブの変更
ディレクティブ：connect-src
| ソース |
説明 |
data.pendo.io |
イベント通信とセッションリプレイに必要です。 |
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
ここにガイド構造ファイルを読み込みます。ガイドコンテンツを読み込むために必要です。
|
app.pendo.io |
ビジュアルデザインスタジオを使用する場合にのみ必要です。
|
フレームディレクティブの変更
ディレクティブ： frame-src
以下のソースを使用して、Pendoはサイト上の<frame>内にビジュアルデザインスタジオを読み込みます。
| ソース |
説明 |
app.pendo.io |
ビジュアルデザインスタジオは、このURLから読み込まれます。ビジュアルデザインスタジオでガイドをデザインする場合にのみ必要です。
|
ディレクティブ：frame-ancestors
以下のソースを使用して、Pendoはサイト上のページを<frame>内に読み込みます。クラシックデザイナーを使用している場合にのみ必要です。
| ソース |
説明 |
app.pendo.io |
クラシックデザイナーがアプリケーションを読み込むPendoホスト。クラシックデザイナーでガイドをデザインする場合にのみ必要です。
|
Workerディレクティブの変更
ディレクティブ：worker-src
以下のソースを使用して、Pendoエージェントはworkerスレッドを開始し、アプリケーションへのパフォーマンスの影響を最小限に抑えることができます。
| ソース |
説明 |
blob: |
Pendoエージェントは、WebWorkerを起動して、セッションリプレイのセッションキャプチャデータを圧縮して送信します。作業をWorkerに任せてセッションキャプチャのパフォーマンスを向上できます。
|
ロケーションに基づく変更
このセクションでは、EU、US1、および日本のお客様を対象としたロケーションに基づくソースの変更について一覧表示します。
EU
オリジナル
|
EU |
app.pendo.io |
app.eu.pendo.io |
data.pendo.io |
data.eu.pendo.io
|
cdn.pendo.io |
cdn.eu.pendo.io
|
pendo-io-static.storage.googleapis.com |
pendo-eu-static.storage.googleapis.com
|
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
pendo-eu-static-{{ SUB_ID }}.storage.googleapis.com
|
オリジナル
|
US1 |
app.pendo.io |
app.us1.pendo.io |
data.pendo.io |
data.us1.pendo.io
|
cdn.pendo.io |
cdn.us1.pendo.io
|
pendo-io-static.storage.googleapis.com |
pendo-us1-static.storage.googleapis.com
|
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
pendo-us1-static-{{ SUB_ID }}.storage.googleapis.com
|
日本
オリジナル
|
日本 |
app.pendo.io |
app.jp.pendo.io |
data.pendo.io |
data.jp.pendo.io
|
cdn.pendo.io |
cdn.jp.pendo.io
|
pendo-io-static.storage.googleapis.com |
pendo-jp-static.storage.googleapis.com
|
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
pendo-jp-static-{{ SUB_ID }}.storage.googleapis.com
|
カスタムCNAMEに必要なディレクティブ
CNAMEでCSPを使用している場合は、PendoのサポートチームとCNAMEを設定する際に、以下のソースを既存のPendoの標準必須ディレクティブに追加します。CNAMEの設定が完了したら、ディレクティブを省略できます。
JavaScriptディレクティブの変更
ディレクティブ：script-src
画像ディレクティブの変更
ディレクティブ：img-src
以下のソースを使用して、Pendoがホストする画像をサイトに表示します。
| ソース |
説明 |
content.pendo.example.com |
ガイドの画像はこのURLからダウンロードされます。
|
data.pendo.example.com |
イベントは、画像srcを使用してこのURLに送信されます。イベントをPendoに送信するために必要です。
|
app.pendo.io |
デザイナーを使用する場合にのみ必要です。
|
data: |
デフォルトのバッジ画像。バッジにカスタム画像を使用する場合は必要ありません。
|
データディレクティブの変更
ディレクティブ：connect-src
以下のソースを使用して、ページ上のスクリプトがPendoと通信します。
対応ガイドコンテンツ
Pendoは厳密なCSPディレクティブに対応していますが、ガイドコンテンツがお客様のCSP制限に対応しているかどうかは、お客様の責任でご確認ください。
style-srcおよびscript-srcディレクティブ内にunsafe-inlineが存在しない場合、ガイドのHTMLタブ内のインラインCSSおよびJavaScriptは正しく機能しません。予期しないガイドの表示を防ぐには、すべてのインラインスタイルとスクリプトをガイドコードブロックまたはテンプレートのCSSタブとJSタブに移動する必要があります。
最小限のCSPディレクティブ（インラインディレクティブなし）を適切に設定すれば、Pendoデザイナーでフィーチャーの表示やタグ付けができるようになります。X-Frame-Optionsプラグインにより、厳密なCSPを使用したガイド編集モードでデザイナーを使用できるようになります。デザイナーの外部で、X-Frame-Optionsプラグインをオフにしてガイドコンテンツをテストすることが重要です。
厳密なCSP対応コンテンツの例
基本的なコンセプトは、「unsafe-inline」のスタイル設定とJavaScriptをすべて削除することです。
たとえば、このHTMLボタン内のすべてのインラインスタイル設定とJavaScriptは次のようになります：
<button class="_pendo-guide-next_" style="color:blue;" onclick="pendo.onGuideAdvanced()">Next</button>
HTML
<button class="_pendo-guide-next_ blue-button">Next</button>
CSS
.bluebutton { color: blue; }
JavaScript
(function wireGuideAdvanceButton (step) { step && step.attachEvent(step.guideElement[0], 'click', function (e) { var advanceButton = pendo.dom(e.target || e.srcElement).closest('._pendo-guide-next_'); if (advanceButton.length) { pendo.onGuideAdvanced(); } }); })(step,guide);
Trusted Typesは、現在Chromiumベースのブラウザでのみサポートされている実験的なテクノロジーです。アプリケーションでTrusted Typesによって提供される追加のクロスサイトスクリプティング（XSS）の保護が必要な場合は、ディレクティブ：trusted-types pendoをCSPヘッダーに追加します。Trusted Typesのサポートには、エージェントのバージョン2.184.0以降が必要です。
