Content Security Policy（CSP）の設定

ルームURLへのアクセスをユーザー名とパスワードで制限する場合は、Basic認証の設定を参照してください。

Content Security Policy（CSP）は、ルームで読み込めるコンテンツの提供元を制限するセキュリティ設定です。 metatellのルームには、製品が必要とする提供元を許可した既定のCSPが設定されています。 既定のCSPに含まれない外部のサーバーへ接続したり、外部の画像、動画、Webページなどを読み込んだりする場合は、ルームごとにCSPを追加します。

警告

誤ったCSP設定により、ルーム内のコンテンツや機能を読み込めなくなることがあります。 script-src、connect-src、frame-srcへ外部オリジンを追加する場合は、信頼性と利用目的を確認し、HTTPSまたはWSS（connect-srcのみ）を個別に許可してください。 未管理のドメインや*による一括許可は避け、必要なディレクティブとソースだけを追加してください。 許可範囲を広げると、意図しない外部コンテンツを読み込める状態になります。 変更前の設定を控え、保存後にルームの主要な機能を確認してください。

CSPの追加が必要になる場面

ブラウザーは、CSPで許可されていない提供元への接続や読み込みをブロックします。 次のような場合は、対応するディレクティブへ提供元を追加してください。

場面	追加するディレクティブの例
プラグインから外部のAPIを呼び出す	connect-src
プラグインから外部のWebSocketサーバーへ接続する	connect-src（wss://で始まるソース）
外部のWebページをルーム内へ埋め込む	frame-src
HTMLパネルで、ルームと異なるオリジンのページを表示する	frame-src
外部の画像を読み込む	img-src
外部の動画や音声を読み込む	media-src
外部のWebフォントを読み込む	font-src

プラグインはルームのページ内で動作するため、プラグインが行う通信にもルームのCSPが適用されます。 プラグインが接続する提供元は、プラグインの開発者に確認してください。

CSPを設定する

CSPを変更できるのは、組織ロールが管理者の場合です。 管理者以外のユーザーには、セキュリティタブに権限がない旨のメッセージが表示されます。

1. プロジェクトとルームを選択します。
2. ルーム詳細の「セキュリティ」タブを開きます。
3. 「新しいディレクティブを追加」でディレクティブを選択し、「追加」をクリックします。
4. 追加したディレクティブの入力欄へソースを入力し、「追加」をクリックします。
5. 必要なソースをすべて追加したら、「追加されるCSP」で内容を確認します。
6. 「保存」をクリックします。

ソースの右の「×」をクリックするとソースを、ディレクティブの「削除」をクリックするとディレクティブを、それぞれ取り除けます。 取り除いた内容は、「保存」をクリックするまで反映されません。 すべてのディレクティブを取り除いて保存すると、ルームに追加したCSPはなくなり、既定のCSPだけが適用されます。

ソースには、https://api.example.comのようなオリジンのほか、'self'や'none'などのキーワードも入力できます。 キーワードは'（シングルクォート）で囲んで入力してください。

既定のCSPとの関係

ルームで追加したCSPは、既定のCSPへ追記されます。 既定のCSPの置き換えや、既定で許可されている提供元の削除はできません。

既定のCSPには、default-src、script-src、connect-src、img-src、media-src、frame-src、font-src、style-srcなどが含まれます。 これらのディレクティブへソースを追加すると、既定の許可に加えて、そのソースも許可されます。

警告

既定のCSPに含まれないディレクティブを追加すると、そのディレクティブは追加したソースだけで構成されます。 たとえばscript-src-elemやstyle-src-elemを追加すると、ブラウザーはscript-srcやstyle-srcの代わりにそのディレクティブを使用します。 その結果、ルームの読み込みに必要なスクリプトやスタイルがブロックされます。 外部の提供元を許可する目的では、script-srcやstyle-srcなど、既定のCSPに含まれるディレクティブへソースを追加してください。

ルームの現在のCSPは、ブラウザーの開発者ツールで、ルームのページのContent-Security-Policyレスポンスヘッダーから確認できます。

使用できるディレクティブ

管理画面では、次のディレクティブを設定できます。

• default-src
• fenced-frame-src
• font-src
• frame-src
• img-src
• manifest-src
• connect-src
• media-src
• object-src
• prefetch-src
• script-src
• script-src-elem
• script-src-attr
• style-src
• style-src-elem
• style-src-attr
• worker-src
• child-src
• base-uri
• sandbox
• form-action
• frame-ancestors
• report-to
• require-trusted-types-for
• trusted-types
• upgrade-insecure-requests

sandboxとupgrade-insecure-requestsは、ソースを追加せずに設定できます。 ほかのディレクティブは、1つ以上のソースを追加してから保存してください。 ソースがないディレクティブを含めて保存すると、保存に失敗します。

危険

sandboxはルームのページの動作を制限するディレクティブです。 ソースを追加せずに設定すると、ルームのスクリプトが実行できなくなり、ルームを利用できなくなります。 通常の利用では設定しないでください。

入力上限

1つのディレクティブへ追加できるソースは最大50件です。 1つのソースは1,024文字以内で入力してください。

ソースには改行、セミコロン、および空白を含められません。 同じディレクティブへ同じソースを重複して追加できません。

設定を反映する

保存したCSPは、ルームのページを読み込んだときに適用されます。 入室中の参加者には、ページを再読み込みするか入室し直すまで反映されません。

設定後に確認する項目

• ルームへ入室できること
• 3D空間とテクスチャが表示されること
• 音声通話や画面共有が動作すること
• 外部メディアと埋め込みコンテンツが表示されること
• 必要な管理機能やプラグインが動作すること

外部コンテンツが表示されない場合

CSPでブロックされた読み込みや接続は、ブラウザーの開発者ツールのコンソールに、Content-Security-Policyに違反した旨のエラーとして表示されます。 エラーに表示されたディレクティブと提供元を確認し、必要な提供元だけを追加してください。

設定の変更後に問題が発生した場合は、直前に追加したディレクティブまたはソースを見直してください。