Jika Anda belum memahami Kebijakan Keamanan Konten (CSP), Pengantar Keamanan Konten Kebijakan merupakan titik awal yang baik. Dokumen tersebut mencakup tampilan platform web CSP yang lebih luas; CSP Aplikasi Chrome tidak terlalu fleksibel.
CSP adalah kebijakan untuk memitigasi masalah pembuatan skrip lintas situs, dan kita semua tahu bahwa lintas situs pembuatan skrip adalah hal yang buruk. Kami tidak akan berusaha dan meyakinkan Anda bahwa CSP adalah kebijakan baru yang tidak terlalu terang-terangan. Ada pekerjaan yang harus dilakukan; Anda harus belajar bagaimana melakukan tugas-tugas mendasar secara berbeda.
Tujuan dokumen ini adalah memberi tahu Anda secara tepat tentang kebijakan CSP untuk Aplikasi Chrome, apa yang perlu Anda lakukan untuk mematuhinya, dan bagaimana Anda masih dapat melakukan tugas-tugas mendasar itu dengan cara Mematuhi CSP.
Apa yang dimaksud dengan CSP untuk Aplikasi Chrome?
Kebijakan keamanan konten untuk Aplikasi Chrome membatasi Anda untuk melakukan hal berikut:
- Anda tidak dapat menggunakan skrip inline di halaman Aplikasi Chrome. Pembatasan tersebut memblokir kedua blok
<script>dan pengendali peristiwa (<button onclick="...">). - Anda tidak dapat mereferensikan resource eksternal apa pun di file aplikasi mana pun (kecuali untuk video dan audio resource). Anda tidak dapat menyematkan resource eksternal dalam iframe.
- Anda tidak dapat menggunakan metode string ke JavaScript seperti
eval()dannew 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 Anda hanya dapat merujuk ke skrip dan objek dalam aplikasi, kecuali media (aplikasi dapat merujuk ke video dan audio di luar paket). Ekstensi Chrome akan membuat Anda santai Kebijakan Keamanan Konten {i>default<i}; Aplikasi Chrome tidak akan melakukannya.
Cara mematuhi CSP
Semua JavaScript dan semua sumber daya harus lokal (semuanya dikemas dalam Aplikasi Chrome Anda).
"Tapi bagaimana cara..."
Sangat mungkin Anda menggunakan library template dan banyak di antaranya yang tidak akan berfungsi dengan CSP. Anda mungkin juga ingin mengakses resource eksternal di aplikasi (gambar eksternal, konten dari situs).
Menggunakan library template
Gunakan library yang menawarkan template yang telah dikompilasi sebelumnya dan Anda pun sudah siap. Anda tetap dapat menggunakan {i>library<i} yang tidak menawarkan prakompilasi, tetapi akan membutuhkan beberapa upaya di pihak Anda dan ada batasan.
Anda harus menggunakan {i>sandbox<i} untuk mengisolasi konten apa pun yang ingin Anda lakukan 'eval' dalam banyak hal. Sandboxing meningkatkan CSP pada konten yang Anda tentukan. Jika Anda ingin menggunakan Chrome yang sangat canggih API di Aplikasi Chrome, konten dalam sandbox Anda tidak dapat berinteraksi langsung dengan API ini (lihat Konten lokal sandbox).
Mengakses referensi jarak jauh
Anda dapat mengambil resource jarak jauh melalui XMLHttpRequest dan menayangkannya melalui blob:, data:, atau
filesystem: URL (lihat Merujuk referensi eksternal).
Video dan audio dapat dimuat dari layanan jarak jauh karena keduanya memiliki perilaku fallback yang baik saat secara offline atau koneksi internet yang tidak stabil.
Sematkan konten web
Alih-alih menggunakan iframe, Anda dapat memanggil URL eksternal menggunakan tag webview (lihat Menyematkan halaman web eksternal).