概要
コンテンツセキュリティポリシー（CSP）は、クロスサイトスクリプティング（XSS）やデータインジェクション攻撃などの、特定の種類の攻撃を検知して軽減するための追加セキュリティレイヤーです。CSPに問題が発生している場合は、当社製品を許可するように調整する必要があります。
この記事では、Pendoが完全に機能するために最低限必要なディレクティブの概要と、厳密なCSPを持つアプリケーションのための互換性ガイドコンテンツの例を紹介します。
ガイド配信の設定
厳密なCSPを使用するアプリケーションでは、［ガイド配信設定（Guide Delivery Settings）］がXHRに設定されていることを確認する必要があります。
［ガイド配信設定］にアクセスするには、［インストール設定（Install Settings）］ページに移動し、［エージェント設定（Agent Settings）］タブをクリックし、［本番設定管理（Manage Production Settings）］をクリックします。
XHRのラジオボタンが選択されていることを確認してください。
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、CSS、JSのそれぞれのタブに分散して表示されます。以下の例は、ガイドコンテンツの要素を分解する方法を示しています。お客様やお客様のチームの開発者は、別の、あるいはもっと良いアプローチを取っているかもしれません：
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);