

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 搭配適用於 JavaScript 的 Amazon Chime SDK 用戶端程式庫使用內容安全政策
<a name="content-security"></a>

現代 Web 應用程式使用內容安全政策來保護使用者免受特定類別的攻擊。使用 的應用程式`VideoFxProcessor`必須包含本節所述的政策指令。這些指令可讓 Amazon Chime SDK 存取執行時間所需的資源。

**Topics**
+ [必要的內容安全政策指令](#required-csp)
+ [範例內容安全政策](#example-csp)
+ [內容安全政策錯誤](#csp-errors)
+ [跨來源開啟器內容安全政策](#cross-origin-policy)

## 必要的內容安全政策指令
<a name="required-csp"></a>

您必須使用下列內容安全政策指令。
+ 新增 `script-src:``blob: https://*.sdkassets.chime.aws`以載入影片處理程式碼，並`wasm-unsafe-eval`允許執行程式碼。
+ 用於`script-src-elem:`新增 `blob:` `https://*.sdkassets.chime.aws` 以從來源載入視訊處理程式碼。
+ 新增 `worker-src:``blob: https://*.sdkassets.chime.aws`以跨原始伺服器載入工作者 JavaScript。

如果您省略任何這些項目，或者如果您使用 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.
```

### 必要的指令碼政策指令
<a name="required-script"></a>

若要運作，`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`指令。

### 工作者政策指令
<a name="required-worker"></a>

會將 JavaScript 類別`VideoFxProcessor`載入為 Blob，以執行 Web 工作者執行緒。執行緒使用機器學習模型來處理視訊。若要授予應用程式存取權以擷取和使用此工作者，請包含下列指令：

`worker-src 'self' blob: https://*.sdkassets.chime.aws`

### WebAssembly 政策
<a name="required-web-assembly"></a>

會從相同的 Amazon 擁有的內容交付網路`VideoFxProcessor`載入 WebAssembly (WASM) 模組。在 Chrome 95 和更新版本中，編譯的 WASM 模組無法跨多個模組邊界傳遞。若要允許擷取和執行個體化這些模組，請在 `script-src` 指令`'wasm-unsafe-eval'`中包含 。

如需 WebAssembly 內容安全政策文件的詳細資訊，請參閱 GitHub 上的 [WebAssembly 內容安全政策](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md)。

### （選用） 背景映像政策指令
<a name="optional-directives"></a>

若要搭配背景取代篩選條件使用動態載入的背景影像， `VideoFxProcessor` 必須能夠存取影像。若要這樣做，請在託管映像的網域中包含`connect-src`指令。

## 範例內容安全政策
<a name="example-csp"></a>

下列範例政策可讓您使用 `VideoFxProcessor`。這些`connect-src`定義並非專屬於 `VideoFxProcessor`。反之，它們與 Amazon Chime SDK 會議的音訊和視訊有關。

```
<head>
    <meta http-equiv="Content-Security-Policy" 
        content="base-uri 'self';    
        connect-src       'self' https://*.chime.aws wss://*.chime.aws https://*.amazonaws.com wss://*.chime.aws https://*.ingest.chime.aws;
        script-src        'self' blob: 'wasm-unsafe-eval' https://*.sdkassets.chime.aws; 
        script-src-elem   'self' blob: https://*.sdkassets.chime.aws;
        worker-src        'self' blob: https://*.sdkassets.chime.aws;">
</head>
```

## 內容安全政策錯誤
<a name="csp-errors"></a>

如果您省略任何必要的指令， `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.
```

## 跨來源開啟器內容安全政策
<a name="cross-origin-policy"></a>

為了限制記憶體用量，模組偏好使用 `SharedArrayBuffer`進行處理。不過，這需要您仔細設定 Web 安全性。服務應用程式 HTML 時，您必須設定下列標頭：

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

伺服器必須設定這些項目，因為它們沒有中繼標籤對等項目。如果您未設定這些標頭，背景篩選條件可能會使用稍微多一點的 RAM。

背景篩選條件可以是 CPU 密集型和 GPU 密集型。有些行動裝置和較低規格的筆記型電腦或桌上型電腦可能無法搭配多個影片串流執行篩選條件。