コンテンツセキュリティポリシー（CSP）は、ウェブアプリケーションの所有者が作成するセキュリティレイヤーです。
効果的な（厳格な）CSPは、許可されるリソースを少数のドメインセットに制限します。この制限がPendoの読み込みや正常な動作を妨げ、Pendoに影響を与える可能性があります。たとえば、Web SDKが呼び出されなかったり、ガイドが読み込まれなかったりする場合が考えられます。このため、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>タグを見つけます。
標準的な必須ディレクティブ
必須ディレクティブは、Web SDKの配信設定によって異なります。Pendoがアプリケーションで完全に機能するために必須のディレクティブを把握するには、まずガイド配信設定を書き留める必要があります。その方法は以下のとおりです。
-
［設定（Settings）］>［サブスクリプション設定（Subscription Settings）］の順に進みます。
-
［アプリケーション］タブを開きます。
-
［アプリケーション］リストから該当するアプリを見つけて開きます。
-
［Web SDKの設定］タブを開きます。
-
［本番設定を管理（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からダウンロードされます。2025年10月1日より前に作成されたアプリケーションのアップロードされたガイドの画像をダウンロードするために必要です。 |
content-{{ SUB_ID }}.static.pendo.io |
すべてのガイドコンテンツの場所。2025年10月1日より前に作成されたアプリケーションのガイドのコードブロックをダウンロードするために必要です。 |
app.pendo.io |
デザイナーを使用する場合にのみ必要です。 |
data: |
デフォルトのバッジ画像。バッジにカスタム画像を使用する場合は必要ありません。 |
データディレクティブの変更
ディレクティブ：connect-src
| ソース |
説明 |
data.pendo.io |
イベント通信とセッションリプレイに必要です。 |
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
ここにガイド構造ファイルを読み込みます。2025年10月1日より前に作成されたアプリケーションのガイドコンテンツを読み込んで編集するために必要です。 |
content-{{ SUB_ID }}.static.pendo.io |
ここにガイド構造ファイルを読み込みます。2025年10月1日より前に作成されたアプリケーションのガイドコンテンツを読み込んで編集するために必要です。 |
app.pendo.io |
ビジュアルデザインスタジオを使用する場合にのみ必要です。 |
フレームディレクティブの変更
ディレクティブ： frame-src
次のソースにより、iframeがサイトにPendoコンテンツを読み込むことが許可されます。
| ソース |
説明 |
app.pendo.io |
ビジュアルデザインスタジオは、このURLから読み込まれます。ビジュアルデザインスタジオを使用する場合にのみ必要です。 |
portal.pendo.io |
リッスンのアイデアポータルをiframe経由で読み込むことができます。 |
以下のソースを使用して、Pendoはサイト上のページを<frame>内に読み込みます。クラシックデザイナーを使用している場合にのみ必要です。
| ソース |
説明 |
app.pendo.io |
クラシックデザイナーがアプリケーションを読み込むPendoホスト。クラシックデザイナーでガイドをデザインする場合にのみ必要です。 |
Workerディレクティブの変更
ディレクティブ：worker-src
以下のソースを使用して、Pendo Web SDKはworkerスレッドを開始し、アプリケーションへのパフォーマンスの影響を最小限に抑えることができます。
| ソース |
説明 |
blob: |
Pendo Web SDKは、WebWorkerを起動して、セッションリプレイのセッションキャプチャデータを圧縮して送信します。作業をWorkerに任せてセッションキャプチャのパフォーマンスを向上できます。 |
ビデオプロバイダー
動画の適切なロケーションがCSPで許可されていることを確認する必要があります。これらのロケーションは、ガイドで使用するビデオプロバイダーによって異なります。
ディレクティブ： frame-src
| ソース |
プロバイダー |
https://players.brightcove.net |
Brightcove |
https://www.loom.com |
Loom |
https://web.microsoftstream.com |
Microsoft Stream (Classic) |
https://{ORG_ID}.sharepoint.com |
Microsoft Stream（Sharepoint) |
https://player.vimeo.com |
Vimeo |
https://play.vidyard.com |
Vidyard |
https://fast.wistia.net |
Wistia |
https://www.youtube.com |
YouTube |
ディレクティブ：img-src
| ソース |
プロバイダー |
https://cdn.loom.com |
Loomサムネイル |
Pendoバケット |
Microsoft Stream（クラシック）サムネイル |
Pendoバケット |
Microsoft Stream（SharePoint上）サムネイル |
https://i.vimeocdn.com |
Vimeoサムネイル |
|
https://cdn.vidyard.com および
https://cdn-cf.vidyard.com
|
Vidyardサムネイル |
https://embed-ssl.wistia.com |
Wistiaサムネイル |
https://img.youtube.com |
YouTubeサムネイル |
フォントディレクティブの変更
ディレクティブ：font-src
フォントソースを使うことで、Pendo Web SDKが独自のフォントを読み込むことができます。
| ソース |
説明 |
cdn.pendo.io |
ビジュアルデザインスタジオ（Visual Design Studio）、Pendo Web SDKデバッガー、およびガイドプレビューモードでフォントを読み込むために使用されます。 |
ロケーションに基づく変更
このセクションでは、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です。
- オーストラリアデータ環境のURLは
app.au.pendo.ioです。
CSPで指定する必要があるのは、1つのデータ環境のみです。つまり、この記事で前述した標準的なURL、またはこのセクションの他のデータ環境（US1、EU、日本、またはオーストラリア）のURLのみを使用してください。複数のデータ環境にURLを使用しないでください。
オリジナル
|
US1 |
app.pendo.io |
us1.app.pendo.io |
portal.pendo.io |
us1.portal.pendo.io |
data.pendo.io |
us1.data.pendo.io |
cdn.pendo.io |
us1.cdn.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 |
content-{{ SUB_ID }}.static.pendo.io |
content-{{ SUB_ID }}.static.us1.pendo.io |
EU
オリジナル
|
EU |
app.pendo.io |
app.eu.pendo.io |
portal.pendo.io |
portal.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 |
content-{{ SUB_ID }}.static.pendo.io |
content-{{ SUB_ID }}.static.eu.pendo.io |
日本
オリジナル
|
日本 |
app.pendo.io |
app.jpn.pendo.io |
portal.pendo.io |
portal.jpn.pendo.io |
data.pendo.io |
data.jpn.pendo.io |
cdn.pendo.io |
cdn.jpn.pendo.io |
pendo-io-static.storage.googleapis.com |
pendo-jp-prod-static.storage.googleapis.com |
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
pendo-jp-prod-static-{{SUB_ID}}.storage.googleapis.com |
content-{{ SUB_ID }}.static.pendo.io |
content-{{ SUB_ID }}.static.jpn.pendo.io |
オーストラリア
オリジナル
|
オーストラリア |
app.pendo.io |
app.au.pendo.io |
portal.pendo.io |
portal.au.pendo.io |
data.pendo.io |
data.au.pendo.io |
cdn.pendo.io |
cdn.au.pendo.io |
pendo-io-static.storage.googleapis.com |
pendo-au-prod-static.storage.googleapis.com |
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
pendo-au-prod-static-{{SUB_ID}}.storage.googleapis.com |
content-{{ SUB_ID }}.static.pendo.io |
content-{{ SUB_ID }}.static.au.pendo.io |
カスタムCNAMEに必要なディレクティブ
CNAMEと共にCSPを使用する場合は、Pendoの標準的な必須ディレクティブに以下のソースを追加し、Pendoのサポートチームと連携してCNAMEを設定します。CNAMEの設定とテストが完了したら、ディレクティブを以下のカスタム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タイプのサポートには、Web SDKバージョン2.184.0以降が必要です。
非公式のX-FRAME-OPTIONSヘッダーを使用する代わりに、公式のコンテンツセキュリティポリシー（CSP） レベル2仕様のframe-ancestorsディレクティブを使用することを強くお勧めします。
CSPに切り替えることができない場合でも、次の2つの方法のいずれかで、Pendoのアプリ内デザイナーを使用できます。
-
ブラウザプラグイン。以下のブラウザプラグインはサードパーティによって作成されたもので、Pendoはどの拡張機能も所有または管理していません。
-
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を使用してWeb SDK初期化メソッドに渡されるnonceに置き換える必要があります。これについては、ガイドのAPIドキュメントを参照してください。Web SDKとビジュアルデザインスタジオは、作成されたすべてのインラインスタイルにこのnonceを追加します。nonceの詳細については、MDNのコンテンツセキュリティポリシー（CSP）ドキュメントのNonceを参照してください。
その他のリソース