コンテンツセキュリティポリシー（CSP）は、クロスサイトスクリプティング（XSS）やデータインジェクション攻撃などの、特定の種類の攻撃を検知して軽減するための追加セキュリティレイヤーです。CSPで問題が発生している場合は、Pendoが完全に機能するように調整する必要がある場合があります。
この記事では、Pendoが完全に機能するために最低限必要なディレクティブの概要と、厳密なCSPを持つアプリケーションのための互換性ガイドコンテンツの例を紹介します。
Feedbackをご利用の方は、Feedbackのコンテンツに関するセキュリティポリシーをご覧ください。
ガイド配信設定
厳密なCSPを使用するアプリケーションでは、［ガイド配信設定（Guide Delivery Settings）］がXHRに設定されていることを確認する必要があります。
ガイド配信設定にはアクセスする方法は、以下のとおりです。
-
［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］に移動します。
-
［アプリケーション（Applications）］タブを開きます。
-
［アプリケーション］リストから該当するアプリを見つけて開きます。
-
［エージェント設定（Agent Settings）］タブを開きます。
-
［本番設定を管理（Manage Production Settings）］を選択します。
-
XHRのラジオボタンが選択されていることを確認します。
CSP（CNAMEなし）
以下のコードブロック例におけるディレクティブとエントリの説明については、ディレクティブとエントリの用語集を参照してください。
foo.example.comの部分はすべて、アプリケーションのホスト名に置き換えてください。SUB_IDはお客様のサブスクリプションIDに置き換えてください。サブスクリプションIDは、PendoにログインしているときにページのURLに表示されます。フォーマットはhttps://app.pendo.io/s/[SUB_ID]/です。/s/の直後にサブスクリプションIDが表示されますが、Pendo内を移動する際にURLパスの最後に表示されるガイドやレポートの一意のIDを誤って取得しないようにしてください。必要に応じて、ホスト名の前に
https://を加えてください。最低限必要なCSPディレクティブ（EU以外の米国/各国のお客様）
デザイナーを含めた全ての機能で有効です。
script-src foo.example.com 'unsafe-inline' 'unsafe-eval' app.pendo.io pendo-io-static.storage.googleapis.com cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
style-src foo.example.com 'unsafe-inline' app.pendo.io cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com;
img-src foo.example.com cdn.pendo.io app.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
connect-src app.pendo.io data.pendo.iopendo-static-SUB_ID.storage.googleapis.com;
frame-ancestors app.pendo.io;
frame-src app.pendo.io;
child-src app.pendo.io;script-src foo.example.com pendo-io-static.storage.googleapis.com cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
style-src foo.example.com app.pendo.io cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com;
img-src foo.example.com cdn.pendo.io app.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
connect-src app.pendo.io data.pendo.io pendo-static-SUB_ID.storage.googleapis.com;frame-ancestors app.pendo.io;script-src foo.example.com app.pendo.io pendo-io-static.storage.googleapis.com cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
style-src foo.example.com app.pendo.io cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com;
img-src foo.example.com cdn.pendo.io app.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
connect-src app.pendo.io data.pendo.io pendo-static-SUB_ID.storage.googleapis.com;frame-ancestors app.pendo.io;対応ガイドコンテンツ
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);
| ホスト | 説明 |
cdn.pendo.io |
インストールスクリプト（「snippet」）で参照されるPendoエージェントの場所。これは、デフォルトでPendoエージェントがダウンロードされる場所です。 |
pendo-io-static.storage.googleapis.com |
ステージングドメイン用にダウンロードされたPendoエージェントの場所。 |
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
すべてのガイドコンテンツの場所。 |
data.pendo.io |
訪問者が利用できるガイドのリストをダウンロードするために使用されます。これは、JSONP配信メソッドにのみ必要です。 |
app.pendo.io |
デザイナーを使用する場合にのみ必要です。 |
'unsafe-inline' |
デザイナーでカスタムコードブロックまたはクラシックガイドを使用する場合にのみ必要です。 |
'unsafe-eval' |
デザイナーでカスタムコードブロックまたはクラシックガイドを使用する場合に必要です。 |
ディレクティブ：style-src
これらのエントリ（ホスト）により、貴社のサイトでPendoのスタイルを使用できるようになります。