Kebijakan Keamanan Konten

Jika Anda belum memahami Kebijakan Keamanan Konten (CSP), Pengantar Kebijakan Keamanan Konten dapat menjadi titik awal yang bagus. Dokumen tersebut mencakup tampilan platform web CSP yang lebih luas; CSP Aplikasi Chrome tidak sefleksibel.

CSP adalah kebijakan untuk memitigasi masalah pembuatan skrip lintas situs, dan kita semua tahu bahwa pembuatan skrip lintas situs itu buruk. Kami tidak akan mencoba meyakinkan Anda bahwa CSP adalah kebijakan baru yang hangat dan tidak jelas. Ada pekerjaan yang terlibat; Anda harus mempelajari cara melakukan tugas-tugas mendasar secara berbeda.

Tujuan dokumen ini adalah untuk memberi tahu Anda secara tepat tentang kebijakan CSP untuk Aplikasi Chrome, apa yang perlu Anda lakukan untuk mematuhinya, dan cara Anda tetap dapat melakukan tugas mendasar tersebut dengan cara yang sesuai dengan CSP.

Apa itu CSP untuk Aplikasi Chrome?

Kebijakan keamanan konten untuk Aplikasi Chrome membatasi Anda melakukan hal berikut:

  • Anda tidak dapat menggunakan pembuatan skrip inline di halaman Aplikasi Chrome. Batasan ini akan memblokir blok <script> dan pengendali peristiwa (<button onclick="...">).
  • Anda tidak dapat mereferensikan resource eksternal apa pun dalam file aplikasi mana pun (kecuali untuk resource video dan audio). Anda tidak dapat menyematkan aset eksternal dalam iframe.
  • Anda tidak dapat menggunakan metode string ke JavaScript seperti eval() dan new Function().

Hal ini diterapkan melalui nilai kebijakan berikut:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' data: 'unsafe-inline';
img-src 'self' data:;
frame-src 'self' data:;
font-src 'self' data:;
media-src * data: blob: filesystem:;

Aplikasi Chrome hanya dapat merujuk ke skrip dan objek dalam aplikasi Anda, kecuali file media (aplikasi dapat merujuk ke video dan audio di luar paket). Ekstensi Chrome akan memungkinkan Anda melonggarkan Kebijakan Keamanan Konten default; Aplikasi Chrome tidak.

Cara mematuhi CSP

Semua JavaScript dan semua resource harus lokal (semuanya dikemas dalam Aplikasi Chrome Anda).

"Tapi bagaimana cara..."

Sangat mungkin Anda menggunakan library pembuatan template, dan banyak di antaranya yang tidak berfungsi dengan CSP. Sebaiknya Anda juga mengakses referensi eksternal dalam aplikasi (gambar eksternal, konten dari situs).

Menggunakan library pembuatan template

Gunakan library yang menawarkan template yang telah dikompilasi sebelumnya dan Anda sudah siap. Anda masih dapat menggunakan library yang tidak menawarkan prakompilasi, tetapi library tersebut akan memerlukan beberapa upaya dan ada batasan.

Anda perlu menggunakan sandbox untuk mengisolasi konten yang ingin Anda lakukan evaluasinya. Sandboxing meningkatkan CSP pada konten yang Anda tentukan. Jika Anda ingin menggunakan Chrome API yang sangat canggih di Aplikasi Chrome, konten yang di-sandbox tidak dapat berinteraksi langsung dengan API ini (lihat Konten lokal sandbox).

Mengakses resource jarak jauh

Anda dapat mengambil resource jarak jauh melalui XMLHttpRequest dan menayangkannya melalui URL blob:, data:, atau filesystem: (lihat Mereferensikan resource eksternal).

Video dan audio dapat dimuat dari layanan jarak jauh karena memiliki perilaku penggantian yang baik saat offline atau koneksi internet tidak stabil.

Sematkan konten web

Daripada menggunakan iframe, Anda dapat memanggil URL eksternal menggunakan tag webview (lihat Menyematkan halaman web eksternal).