コンテンツセキュリティポリシー(CSP)

最終更新日:

コンテンツセキュリティポリシー(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)が起動しない。
  • アプリケーションにリプレイが表示されない。
  • コンソールに以下のようなエラーメッセージが表示される。

Screenshot 2023-11-17 at 11.26.37 AM.png

現在のCSPの確認

現在のCSPを確認する方法は以下のとおりです。

  1. ブラウザのコンソールで[ネットワーク(Network)]タブを開きます。
  2. メインページのリクエストを開きます。
  3. [ヘッダー(Headers)]タブにあるContent-Security-PolicyにリストされているCSPを見つけます。

    CSP.png
  4. CSP応答ヘッダーが見つからない場合は、ページのHTMLを調べ、ドキュメントの<head>でContent-Security-Policy<meta>タグを見つけます。

    CSP.png

標準的な必須ディレクティブ

必須ディレクティブは、エージェントの配信設定によって異なります。Pendoがアプリケーションで完全に機能するために必須のディレクティブを把握するには、まずガイド配信設定を書き留める必要があります。その方法は以下のとおりです。

  1. [設定(Settings)]>[サブスクリプション設定(Subscription Settings)]に移動します。
  2. [アプリケーション(Applications)]タブを開きます。
  3. [アプリケーション]リストから該当するアプリを見つけて開きます。
  4. [エージェント設定(Agent Settings)]タブを開きます。
  5. [本番設定を管理(Manage Production Settings)]を選択します。
  6. [標準(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

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

ソース 説明
cdn.pendo.io

インストールスクリプト(スニペット)で参照されるPendoエージェントの場所。デフォルトで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'

ビジュアルデザインスタジオでカスタムコードブロックまたはクラシックガイドを使用する場合にのみ必要です。

CSSディレクティブの変更

ディレクティブ:style-src

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

ソース 説明
pendo-io-static.storage.googleapis.com

このURLからデフォルトのガイドCSSが読み込まれます。クラシックガイドがデフォルトのガイドCSSをダウンロードできる場合にのみ必要です。

pendo-static-{{ SUB_ID }}.storage.googleapis.com

ガイドスタイルとグローバルCSS。カスタムコードブロック用のグローバルガイドCSSとスタイルシートをダウンロードするために必要です。

'unsafe-inline'

ガイドの擬似スタイル(ホバー、リソースセンターのキャレット、数値スケール)およびビジュアルデザインスタジオ起動時のスタイルをサポートするために使用されます。

app.pendo.io

ビジュアルデザインスタジオを使用する場合にのみ必要です。

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

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

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

ソース 説明
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に任せてセッションキャプチャのパフォーマンスを向上できます。

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

このセクションでは、EUUS1、および日本のお客様を対象としたロケーションに基づくソースの変更について一覧表示します。

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

オリジナル
US1
app.pendo.io us1.app.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

日本

オリジナル
日本
app.pendo.io app.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

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

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

JavaScriptディレクティブの変更

ディレクティブ:script-src

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

ソース 説明
content.pendo.example.com

Pendoエージェントとガイドコンテンツの場所。

data.pendo.example.com

JSONPガイド配信メソッドで利用可能なガイドのリストをダウンロードするために使用されます。

app.pendo.io

ビジュアルデザインスタジオを使用する場合にのみ必要です。

'unsafe-inline'

ビジュアルデザインスタジオでカスタムコードブロックまたはクラシックガイドを使用する場合にのみ必要です。

'unsafe-eval'

ビジュアルデザインスタジオでカスタムコードブロックまたはクラシックガイドを使用する場合にのみ必要です。

CSSディレクティブの変更

ディレクティブ:style-src

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

ソース 説明
content.pendo.example.com

ガイドのスタイル、グローバルCSS、およびデフォルトCSSは、このドメインから読み込まれます。

'unsafe-inline'

ガイドの擬似スタイル(ホバー、リソースセンターのキャレット、数値スケール)およびビジュアルデザインスタジオ起動時のスタイルをサポートするために使用されます。

app.pendo.io

ビジュアルデザインスタジオを使用する場合にのみ必要です。

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

ディレクティブ:img-src

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

ソース 説明
content.pendo.example.com

ガイドの画像はこのURLからダウンロードされます。

data.pendo.example.com

イベントは、画像srcを使用してこのURLに送信されます。イベントをPendoに送信するために必要です。

app.pendo.io

デザイナーを使用する場合にのみ必要です。

data:

デフォルトのバッジ画像。バッジにカスタム画像を使用する場合は必要ありません。

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

ディレクティブ:connect-src

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

ソース 説明
data.pendo.example.com イベント通信とセッションリプレイに必要です。
content.pendo.example.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に任せてセッションキャプチャのパフォーマンスを向上できます。

対応ガイドコンテンツ

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);

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はどの拡張機能も所有または管理していません。
  • ALLOW-FROM値の更新。Firefox 43で動作確認済みです。これは正式な規格ではないため、この値に対応していない可能性のあるさまざまな実装があります。app.pendo.ioのURIを指定する必要があります。ALLOW-FROMごとに1つのURIのみをセミコロンで区切って指定できます。X-Frame-Options: ALLOW-FROM https://app.pendo.io

その他のリソース

 
この記事は役に立ちましたか?
12人中7人がこの記事が役に立ったと言っています