コンテンツセキュリティポリシー（CSP）

以下のソース（ホスト）を使用して、Pendoのスクリプトをダウンロードおよび実行します。

CSSディレクティブの変更

ディレクティブ：style-src

以下のソース（ホスト）を使用して、サイト上でPendoのスタイルを適用します。

以下のソースを使用して、ページ上のスクリプトがPendoと通信します。

フレームディレクティブの変更

ディレクティブ： frame-src

次のソースにより、iframeがサイトにPendoコンテンツを読み込むことが許可されます。

以下のソースを使用して、Pendoはサイト上のページを<frame>内に読み込みます。クラシックデザイナーを使用している場合にのみ必要です。

Workerディレクティブの変更

ディレクティブ：worker-src

以下のソースを使用して、Pendoエージェントはworkerスレッドを開始し、アプリケーションへのパフォーマンスの影響を最小限に抑えることができます。

ビデオプロバイダー

動画の適切なロケーションがCSPで許可されていることを確認する必要があります。これらのロケーションは、ガイドで使用するビデオプロバイダーによって異なります。

ディレクティブ： frame-src

ディレクティブ：img-src

ロケーションに基づく変更

このセクションでは、US1、EU、および日本のお客様を対象としたロケーションに基づくソースの変更について一覧表示します。これは、サブスクリプションがデフォルトのUS環境とは異なるデータ環境でホストされている場合にのみ関係します。Pendoにアクセスする際に使用するURLを確認すると、お客様のサブスクリプションがどのデータ環境でホストされているかを確認できます。

• デフォルトのUSデータ環境のURLはapp.pendo.ioです。
• US1データ環境のURLはus1.app.pendo.ioです。
• EUデータ環境のURLはapp.eu.pendo.ioです。
• 日本のデータ環境のURLはapp.jpn.pendo.ioです。

CSPで指定する必要があるのは、1つのデータ環境のみです。つまり、この記事で前述した標準的なURL、またはこのセクションの他のデータ環境（US1、EU、または日本）のURLのみを使用してください。複数のデータ環境にURLを使用しないでください。

US1

EU

日本

カスタムCNAMEに必要なディレクティブ

CNAMEでCSPを使用している場合は、PendoのサポートチームとCNAMEを設定する際に、以下のソースを既存のPendoの標準必須ディレクティブに追加します。CNAMEの設定が完了したら、ディレクティブを省略できます。

JavaScriptディレクティブの変更

ディレクティブ：script-src

画像ディレクティブの変更

ディレクティブ：img-src

以下のソースを使用して、Pendoがホストする画像をサイトに表示します。

データディレクティブの変更

ディレクティブ：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

Trusted Typesは、現在Chromiumベースのブラウザでのみサポートされている実験的なテクノロジーです。アプリケーションでTrusted Typesによって提供される追加のクロスサイトスクリプティング（XSS）の保護が必要な場合は、ディレクティブ：trusted-types pendoをCSPヘッダーに追加します。Trusted Typesのサポートには、エージェントのバージョン2.184.0以降が必要です。

X-Frames-Optionsヘッダー

非公式のX-FRAME-OPTIONSヘッダーを使用する代わりに、公式のコンテンツセキュリティポリシー（CSP） レベル2仕様のframe-ancestorsディレクティブを使用することを強くお勧めします。

CSPに切り替えることができない場合でも、次の2つの方法のいずれかで、Pendoのアプリ内デザイナーを使用できます。

• ブラウザプラグイン。以下のブラウザプラグインはサードパーティによって作成されたもので、Pendoはどの拡張機能も所有または管理していません。
  • Chromeプラグイン：X-Frame-Headersの拡張を無視する
  • Firefoxプラグイン：X-Frame-Headersの拡張を無視する
• ALLOW-FROM値の更新。Firefox 43で動作確認済みです。これは正式な規格ではないため、この値に対応していない可能性のあるさまざまな実装があります。app.pendo.ioのURIを指定する必要があります。ALLOW-FROMごとに1つのURIのみをセミコロンで区切って指定できます。X-Frame-Options: ALLOW-FROM https://app.pendo.io

unsafeディレクティブの代替

unsafe-inlineとunsafe-evalをscript-srcに追加しない場合、ビジュアルデザインスタジオ内からカスタムコードブロックをプレビューすることはできません。代わりに、次のいずれかを行う必要があります。

• ガイドを保存し、ビジュアルデザインスタジオを閉じて、ガイドの詳細ページからガイドをプレビューする。
• ガイドをステージングにプッシュし、ステージング環境でガイドを表示する。

ガイドでコードブロックまたはリソースセンターのインテグレーションを使用しない場合、これは影響しません。

注：コードブロックまたはリソースセンターのインテグレーションを使用したガイドを編集しているときに、開発コンソールにscript-srcのCSPエラーが表示される場合があります。このエラーは無視してかまいません。

unsafe-inlineをstyle-srcに追加しない場合、unsafe-inlineを、キーinlineStyleNonceを使用してエージェント初期化メソッドに渡されるnonceに置き換える必要があります。これについては、ガイドのAPIドキュメントを参照してください。エージェントとビジュアルデザインスタジオは、作成されたすべてのインラインスタイルにこのnonceを追加します。nonceの詳細については、MDNのコンテンツセキュリティポリシー（CSP）ドキュメントのNonceを参照してください。

その他のリソース

• GoogleにおけるCSP
• Mozilla - CSPの紹介
• Mozilla - CSP使用方法
• Mozilla - CSPポリシーディレクティブ