この記事では、モデル駆動型アプリ Web リソース、カスタム Web サイト、iframe をサポートする別のサービスなど、外部ホスト内の iframe にコード アプリを埋め込む方法について説明します。 コード アプリでは既定でコンテンツ セキュリティ ポリシー (CSP) が適用されるため、ホストにアプリの読み込みを許可するように frame-ancestors ディレクティブを更新する必要があります。
注
- 埋め込みコード アプリにアクセスできるのは、同じテナント内のPower Appsユーザーだけです。 テナントの外部のユーザーと iframe URL を共有することはできません。
- Android や iOS を含むネイティブ デスクトップ アプリケーションにコード アプリを埋め込むことはありません。 この制限では、Teams でのPower Appsなどのファースト パーティ統合は除外されます。
[前提条件]
- CSP 設定を更新するには、Power Platform 環境の管理者である必要があります。
- コード アプリは環境にデプロイする必要があります。
コード アプリの URL を取得する
コード アプリを埋め込むには、その再生 URL が必要です。 URL の形式は次のとおりです。
https://apps.powerapps.com/play/e/{environmentId}/app/{appId}?tenantid={tenantId}
完全な URL を見つけるには、Power Appsでアプリを開き、ブラウザーからアドレスをコピーします。
tenantId は、ゲスト アクセスをサポートし、アプリを開くテナントを決定するための省略可能なクエリ パラメーターです。
ホストに iframe を追加する
コード アプリの URL を取得したら、ホストの HTML に <iframe> 要素を追加します。 アプリの URL を src 値に置き換え、レイアウトに合わせて幅と高さを設定します。
<iframe
width="1200"
height="800"
src="https://apps.powerapps.com/play/e/{environmentId}/{appId}"
title="My code app">
</iframe>
注
コード アプリでデバイスの位置情報、マイク、カメラ、全画面表示、またはクリップボードの API を使用する場合は、 allow 属性に対応するアクセス許可を含めます。
<iframe ... allow="geolocation; microphone; camera; fullscreen; clipboard-write"></iframe>
フレームを許可するように CSP を構成する
既定では、コード アプリは次の frame-ancestors ディレクティブを使用します。これは、フレームにアプリを読み込むことができる配信元を制限します。
frame-ancestors 'self' https://*.powerapps.com
モデル駆動型アプリ、Dynamics 365 インスタンス、カスタム Web サイトなど、https://*.powerapps.com 以外の任意のホストにコード アプリを埋め込む場合、ブラウザーはフレームをブロックし、次のような CSP 違反をログに記録します。
Refused to frame 'https://<environment>.powerplatformusercontent.com/' because it violates the following Content Security Policy directive: "frame-ancestors 'self' https://*.powerapps.com"
この問題を解決するには、ホストの配信元を環境の frame-ancestors ディレクティブに追加します。 例えば次が挙げられます。
- Dynamics 365またはモデル駆動型アプリの場合:
https://<your-org>.crm.dynamics.com - カスタム ドメインの場合:
https://contoso.com
Important
カスタム値は、既定の frame-ancestors 値とマージされます。 保存した後、有効なディレクティブは次のようになります。
frame-ancestors 'self' https://*.powerapps.com https://<your-org>.crm.dynamics.com
Power Platform 管理センターまたは REST API を使用して frame-ancestors ディレクティブを更新する方法については、「 コンテンツ セキュリティ ポリシーの構成」を参照してください。