Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Menggunakan kebijakan keamanan konten dengan library klien Amazon Chime SDK untuk JavaScript
<a name="content-security"></a>

Aplikasi web modern menggunakan kebijakan keamanan konten untuk melindungi pengguna dari kelas serangan tertentu. Aplikasi yang menggunakan `VideoFxProcessor` harus menyertakan arahan kebijakan yang dijelaskan dalam bagian ini. Arahan memberikan Amazon Chime SDK akses ke sumber daya yang dibutuhkan saat runtime.

**Topics**
+ [Arahan kebijakan keamanan konten yang diperlukan](#required-csp)
+ [Contoh kebijakan keamanan konten](#example-csp)
+ [Kesalahan kebijakan keamanan konten](#csp-errors)
+ [Cross-origin kebijakan keamanan konten pembuka](#cross-origin-policy)

## Arahan kebijakan keamanan konten yang diperlukan
<a name="required-csp"></a>

Anda harus menggunakan arahan kebijakan keamanan konten berikut.
+ Untuk `script-src:` menambahkan `blob: https://*.sdkassets.chime.aws` untuk memuat kode pemrosesan video, dan `wasm-unsafe-eval` untuk memungkinkan menjalankannya. 
+ Untuk `script-src-elem:` tambahkan `blob:` `https://*.sdkassets.chime.aws` untuk memuat kode pemrosesan video dari sumbernya.
+ Untuk `worker-src:` add `blob: https://*.sdkassets.chime.aws` to load worker JavaScript di seluruh asal.

Jika Anda menghilangkan salah satu entri ini, atau jika Anda menggunakan header HTTP dan `http-equiv` meta tag untuk menentukan kebijakan dan secara tidak sengaja mengecualikan salah satu dari ini dengan persimpangan, maka filter latar belakang tidak akan dapat diinisialisasi. Filter tampaknya tidak didukung, atau menciptakan prosesor bingkai video tanpa operasi. Anda akan melihat kesalahan di konsol browser Anda seperti:

```
Refused to connect to
'https://static.sdkassets.chime.aws/bgblur/workers/worker.js…'
because it violates the document's content security policy.
```

### Arahan kebijakan skrip yang diperlukan
<a name="required-script"></a>

Agar berfungsi, `VideoFxProcessor` kelas harus memuat JavaScript kelas saat runtime dari jaringan pengiriman konten Amazon. Kelas-kelas ini menggunakan WebGL2 untuk mengimplementasikan pasca-pemrosesan untuk video. Untuk mengizinkan aplikasi mengambil dan menjalankan kelas-kelas ini, Anda harus menyertakan arahan berikut:
+ `script-src 'self' blob: https://*.sdkassets.chime.aws`
+ `script-src-elem 'self' blob: https://*.sdkassets.chime.aws`

**catatan**  
Untuk dukungan penuh pada Safari dan Firefox, Anda harus menggunakan `script-src` dan `script-src-elem` arahan.

### Arahan kebijakan pekerja
<a name="required-worker"></a>

`VideoFxProcessor`Memuat JavaScript kelas sebagai gumpalan untuk menjalankan thread pekerja web. Thread menggunakan model pembelajaran mesin untuk memproses video. Untuk memberikan akses aplikasi untuk mengambil dan menggunakan pekerja ini, sertakan arahan berikut:

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

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

`VideoFxProcessor`Memuat modul WebAssembly (WASM) dari jaringan pengiriman Amazon-owned konten yang sama. Di Chrome 95 dan yang lebih baru, modul WASM yang dikompilasi tidak dapat dilewatkan melintasi beberapa batas modul. Untuk memungkinkan mengambil dan membuat instance modul-modul ini, sertakan `'wasm-unsafe-eval'` dalam direktif. `script-src`

Untuk informasi selengkapnya tentang dokumentasi Kebijakan Keamanan Konten WebAssembly, lihat [Kebijakan Keamanan WebAssembly Konten](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md) di GitHub.

### (Opsional) Arahan kebijakan gambar latar belakang
<a name="optional-directives"></a>

Untuk menggunakan gambar latar belakang yang dimuat secara dinamis dengan filter pengganti latar belakang, `VideoFxProcessor` harus memiliki akses ke gambar. Untuk melakukan itu, sertakan `connect-src` arahan dengan domain yang menghosting gambar.

## Contoh kebijakan keamanan konten
<a name="example-csp"></a>

Contoh kebijakan berikut memungkinkan Anda untuk menggunakan`VideoFxProcessor`. `connect-src`Definisi tersebut tidak spesifik untuk a`VideoFxProcessor`. Sebaliknya, mereka terkait dengan audio dan video dari rapat 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>
```

## Kesalahan kebijakan keamanan konten
<a name="csp-errors"></a>

Jika Anda menghilangkan salah satu arahan yang diperlukan, tidak `VideoFxProcessor` akan membuat instance dan tidak akan didukung. Dalam hal ini, kesalahan berikut (atau serupa) muncul di konsol browser:

```
Refused to connect to
'https://static.sdkassets.chime.aws/ml_media_fx/otherassets/worker.js'
because it violates the document's content security policy.
```

## Cross-origin kebijakan keamanan konten pembuka
<a name="cross-origin-policy"></a>

Untuk membatasi penggunaan memori, modul lebih suka menggunakan a `SharedArrayBuffer` untuk pemrosesan. Namun, ini mengharuskan Anda mengkonfigurasi keamanan web dengan hati-hati. Anda harus mengatur header berikut saat menyajikan HTML aplikasi Anda:

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

Server harus mengatur ini karena mereka tidak memiliki ekuivalen meta-tag. Jika Anda tidak mengatur header ini, filter latar belakang mungkin menggunakan sedikit lebih banyak RAM. 

Filter latar belakang bisa CPU-intensive dan GPU-intensive. Beberapa perangkat seluler dan laptop atau komputer desktop dengan spesifikasi lebih rendah mungkin tidak memiliki kekuatan untuk menjalankan filter bersama dengan beberapa aliran video.