翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# JavaScript 用の Amazon Chime SDK クライアントライブラリでコンテンツセキュリティポリシーを使用する
最新のウェブアプリケーションでは、特定の種類の攻撃からユーザーを保護するために、コンテンツセキュリティポリシーが使用されています。`VideoFxProcessor` を使用するアプリケーションには、このセクションで説明されているポリシーディレクティブが含まれている必要があります。これらのディレクティブにより、Amazon Chime SDK で実行時に必要なリソースにアクセスできます。
**Topics**
+ [必須のコンテンツセキュリティポリシーディレクティブ](#required-csp)
+ [コンテンツセキュリティポリシーの例](#example-csp)
+ [コンテンツセキュリティポリシーのエラー](#csp-errors)
+ [クロスオリジンオープナーのコンテンツセキュリティポリシー](#cross-origin-policy)
## 必須のコンテンツセキュリティポリシーディレクティブ
次のコンテンツセキュリティポリシーディレクティブを使用する必要があります。
+ `script-src:` では、動画処理コードを読み込むために `blob: https://*.sdkassets.chime.aws` を追加し、それを実行できるようにするために `wasm-unsafe-eval` を追加します。
+ `script-src-elem:` では、ソースから動画処理コードを読み込むために `blob:` `https://*.sdkassets.chime.aws` を追加します。
+ `worker-src:` では、オリジンをまたいでワーカーの JavaScript を読み込むために `blob: https://*.sdkassets.chime.aws` を追加します。
これらのエントリのいずれかを省略したり、HTTP ヘッダーと `http-equiv` メタタグを使用してポリシーを指定し、これらのいずれかを交差によって誤って除外したりすると、背景フィルタは初期化できなくなります。背景フィルタはサポートされていないように表示されます。または、動作しない動画フレームプロセッサが作成されます。ブラウザコンソールに次のようなエラーが表示されます。
```
Refused to connect to
'https://static.sdkassets.chime.aws/bgblur/workers/worker.js…'
because it violates the document's content security policy.
```
### 必須のスクリプトポリシーディレクティブ
機能させるには、`VideoFxProcessor` クラスで実行時に Amazon コンテンツ配信ネットワークから JavaScript クラスを読み込む必要があります。これらのクラスでは WebGL2 を使用して動画の後処理を実装します。アプリケーションでこれらのクラスを取得して実行できるようにするには、次のディレクティブを含める必要があります。
+ `script-src 'self' blob: https://*.sdkassets.chime.aws`
+ `script-src-elem 'self' blob: https://*.sdkassets.chime.aws`
**注記**
Safari と Firefox を完全にサポートするには、`script-src` および `script-src-elem` ディレクティブを使用する必要があります。
### ワーカーポリシーディレクティブ
`VideoFxProcessor` では JavaScript クラスをブロブとして読み込んで、ウェブワーカースレッドを実行します。このスレッドでは、機械学習モデルを使用して動画を処理します。このワーカーを取得して使用するためのアクセス権をアプリケーションに付与するには、次のディレクティブを含めてください。
`worker-src 'self' blob: https://*.sdkassets.chime.aws`
### WebAssembly ポリシー
`VideoFxProcessor` では、Amazon が所有する同じコンテンツ配信ネットワークから WebAssembly (WASM) モジュールを読み込みます。Chrome 95 以降では、コンパイルされた WASM モジュールを複数のモジュール境界をまたいで渡すことはできません。これらのモジュールを取得してインスタンス化できるようにするには、`'wasm-unsafe-eval'` を `script-src` ディレクティブに含めてください。
WebAssembly のコンテンツセキュリティポリシーのドキュメントに関する詳細については、GitHub の [WebAssembly Content Security Policy](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md) を参照してください。
### (オプション) 背景画像ポリシーディレクティブ
動的に読み込まれる背景画像を背景置換フィルタと共に使用するには、`VideoFxProcessor` でその画像にアクセスできる必要があります。そのためには、イメージをホストするドメインに `connect-src` ディレクティブを含めてください。
## コンテンツセキュリティポリシーの例
次のポリシーの例では、`VideoFxProcessor` を使用できます。`connect-src` の定義は `VideoFxProcessor` に固有のものではありません。代わりに、Amazon Chime SDK ミーティングの音声と動画に関連付けられています。
```
```
## コンテンツセキュリティポリシーのエラー
必要なディレクティブのいずれかを省略すると、`VideoFxProcessor` はインスタンス化されず、サポートされなくなります。その場合、ブラウザコンソールに次の (または同様の) エラーが表示されます。
```
Refused to connect to
'https://static.sdkassets.chime.aws/ml_media_fx/otherassets/worker.js'
because it violates the document's content security policy.
```
## クロスオリジンオープナーのコンテンツセキュリティポリシー
メモリの使用量を制限するには、モジュールで処理に `SharedArrayBuffer` を優先して使用します。ただし、このためにはウェブセキュリティを慎重に設定する必要があります。アプリケーション HTML を配信する際には、次のヘッダーを設定する必要があります。
```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```
これらには対応するメタタグがないため、サーバーでこれらを設定する必要があります。これらのヘッダーを設定しない場合、背景フィルタによる RAM の使用量が少し増加する可能性があります。
背景フィルタは、CPU に負荷がかかる場合と GPU に負荷がかかる場合があります。一部のモバイルデバイスと低スペックのラップトップまたはデスクトップコンピュータでは、複数の動画ストリームで同時にフィルタを実行できない場合があります。