Content Security Policy

Directive CSP yang perlu diizinkan agar widget Webchat tampil di website Anda.

Jika website Anda memakai Content Security Policy (CSP), browser memblokir widget sampai sumbernya diizinkan. Tambahkan sumber berikut ke policy yang sudah ada. Jangan mengganti seluruh policy Anda dengan contoh di halaman ini.

Directive yang dibutuhkan

Directive	Sumber	Untuk
`script-src`	`https://app.csku.ai`	`widget.js`
`style-src`	`https://app.csku.ai`	`widget.css`
`frame-src`	`https://app.csku.ai`	Jendela chat (iframe)
`connect-src`	`https://api.csku.ai`	Mengambil warna, posisi, dan logo dari dashboard
`img-src`	`https://cdn.aplikasikreasi.id`	Logo di tombol widget

Baris window.cskuSettings = ... adalah script inline. Izinkan dengan salah satu cara di Script inline.

Pemeriksaan anti-spam (Cloudflare Turnstile) berjalan di dalam iframe CSKU, jadi website Anda tidak perlu mengizinkan challenges.cloudflare.com.

Contoh header

Contoh ini memakai nonce untuk script inline. Ganti RANDOM_NONCE dengan nilai acak baru di setiap respons.

HTTP

Content-Security-Policy: default-src 'self'; script-src 'self' https://app.csku.ai 'nonce-RANDOM_NONCE'; style-src 'self' https://app.csku.ai; frame-src https://app.csku.ai; connect-src 'self' https://api.csku.ai; img-src 'self' https://cdn.aplikasikreasi.id

HTML

<script nonce="RANDOM_NONCE">window.cskuSettings = {"channelKey": "<ID_CHANNEL>", "position": "right"};</script>
<script src="https://app.csku.ai/widget/widget.js" async></script>

Contoh meta tag

Jika Anda tidak bisa mengatur header server, pakai tag <meta> di <head>:

HTML

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://app.csku.ai 'unsafe-inline'; style-src 'self' https://app.csku.ai; frame-src https://app.csku.ai; connect-src 'self' https://api.csku.ai; img-src 'self' https://cdn.aplikasikreasi.id">

Script inline

Pilih salah satu:

Nonce. Tambahkan 'nonce-<nilai>' ke script-src dan atribut nonce="<nilai>" ke tag settings. Nilai harus acak dan baru di setiap respons.
Hash. Tambahkan hash SHA-256 isi script settings ke script-src, misalnya 'sha256-...'. Hash berubah jika isi script berubah, termasuk spasi.
File eksternal. Pindahkan baris settings ke file JavaScript di domain Anda, lalu muat sebelum widget.js. Tidak perlu mengubah script-src selain 'self'.
'unsafe-inline'. Paling mudah, tetapi melemahkan CSP untuk seluruh halaman. Hindari jika bisa.

Contoh file eksternal:

JavaScript

// /js/csku-settings.js
window.cskuSettings = { channelKey: '<ID_CHANNEL>', position: 'right' }

HTML

<script src="/js/csku-settings.js"></script>
<script src="https://app.csku.ai/widget/widget.js" async></script>

Muat file settings tanpa async, supaya selesai sebelum widget.js berjalan.

Troubleshooting

Buka Console browser (F12). Pesan widget berawalan [CSKU Webchat]. Pelanggaran CSP muncul sebagai pesan "Refused to load ..." atau "Refused to execute inline script ...".

Gejala	Penyebab	Solusi
`[CSKU Webchat] channelKey tidak valid atau belum diisi.`	`channelKey` kosong atau salah format, atau script settings diblokir CSP.	Salin ulang kode dari dashboard. Izinkan script inline.
`[CSKU Webchat] Gagal memuat widget.css.`	`style-src` belum mengizinkan `https://app.csku.ai`.	Tambahkan ke `style-src`.
`[CSKU Webchat] Loader harus dimuat lewat <script src="...">.`	`widget.js` disalin isinya ke script inline atau dimuat lewat cara lain.	Muat dengan `<script src="https://app.csku.ai/widget/widget.js" async>`.
`[CSKU Webchat] secretKey dan merchantId tidak dipakai lagi.`	Snippet versi lama.	Hapus `secretKey` dan `merchantId`, pakai `channelKey`.
Tombol muncul, jendela chat kosong	`frame-src` belum mengizinkan `https://app.csku.ai`.	Tambahkan ke `frame-src`.
Warna atau posisi tidak sesuai dashboard	`connect-src` belum mengizinkan `https://api.csku.ai`.	Tambahkan ke `connect-src`.
Logo tidak tampil di tombol	`img-src` belum mengizinkan `https://cdn.aplikasikreasi.id`.	Tambahkan ke `img-src`.
Tidak ada pesan, tombol tidak muncul	`script-src` memblokir `widget.js`.	Tambahkan `https://app.csku.ai` ke `script-src`.

Jika frame-src tidak ada di policy Anda, browser memakai child-src lalu default-src. Tambahkan https://app.csku.ai di directive yang berlaku.