Beranda/Header/Content-Security-PolicyContent-Security-PolicyPenggunaan Header Content-Security-Policy (CSP) memberi administrator situs kendali yang terperinci atas pemuatan sumber daya. Dengan mendeklarasikan sebuah kebijakan, server menginstruksikan browser untuk hanya memuat skrip, gaya, gambar, font, dan sumber daya lain dari sumber yang telah disetujui. Setiap sumber daya yang tidak cocok dengan kebijakan akan diblokir, dan browser melaporkan pelanggaran tersebut. Sebuah kebijakan terdiri atas satu atau beberapa direktif yang dipisahkan oleh titik koma. Setiap direktif menyebutkan satu jenis sumber daya dan mendaftar sumber yang diizinkan untuk jenis sumber daya tersebut. Content-Security-Policy: <directive> <source>; <directive> <source> Menerapkan kebijakan baru dalam mode report-only terlebih dahulu merupakan praktik yang umum. Header Content-Security-Policy-Report-Only menggunakan sintaks yang sama, tetapi hanya mencatat pelanggaran tanpa memblokir sumber daya, sehingga administrator dapat menguji kebijakan sebelum diberlakukan. Direktif fetch Direktif fetch mengendalikan lokasi asal pemuatan jenis sumber daya tertentu. default-src Direktif default-src berfungsi sebagai fallback bagi semua direktif fetch lainnya. Ketika sebuah direktif fetch spesifik tidak ada, browser kembali ke default-src. Content-Security-Policy: default-src 'self' script-src Direktif script-src membatasi sumber untuk eksekusi JavaScript. Daftar izin berbasis nonce dan berbasis hash memberikan perlindungan yang lebih kuat dibandingkan aturan berbasis host. script-src-elem Direktif script-src-elem berlaku khusus untuk elemen script-src-attr Direktif script-src-attr mengatur penangan event inline seperti onclick dan onload, terpisah dari pemuatan elemen style-src Direktif style-src menentukan sumber yang valid untuk stylesheet CSS, termasuk gaya inline dan tautan stylesheet eksternal. style-src-elem Direktif style-src-elem berlaku untuk elemen style-src-attr Direktif style-src-attr mengatur gaya inline yang diterapkan langsung ke elemen DOM melalui atribut style. img-src Direktif img-src menentukan sumber yang valid untuk gambar dan favicon. connect-src Direktif connect-src membatasi URL yang dapat diakses melalui antarmuka skrip, termasuk fetch(), XMLHttpRequest, WebSocket, dan EventSource. font-src Direktif font-src menentukan sumber yang valid untuk font yang dimuat melalui @font-face. frame-src Direktif frame-src menentukan sumber yang valid untuk konteks penjelajahan bersarang yang dimuat oleh elemen dan . media-src Direktif media-src menentukan sumber yang valid untuk elemen , , dan . object-src Direktif object-src membatasi sumber untuk elemen dan ( adalah elemen lawas yang telah dihapus dari spesifikasi HTML). Menyetelnya ke ‘none’ sangat disarankan karena elemen-elemen tersebut jarang dibutuhkan. child-src Direktif child-src mendefinisikan sumber yang diizinkan untuk web worker dan konteks penjelajahan bersarang. Direktif frame-src dan worker-src yang lebih spesifik akan menimpa child-src apabila ada. worker-src Direktif worker-src berlaku untuk skrip Worker, SharedWorker, dan ServiceWorker. manifest-src Direktif manifest-src menentukan sumber yang valid untuk berkas manifest aplikasi web. fenced-frame-src Direktif fenced-frame-src menentukan sumber yang valid untuk konteks penjelajahan bersarang yang dimuat ke dalam elemen . Ketika tidak ada, browser kembali ke frame-src lalu ke default-src. Direktif document Direktif document mengatur properti lingkungan dokumen. base-uri Direktif base-uri membatasi URL yang diizinkan pada elemen , sehingga mencegah penyerang mengubah URL dasar untuk tautan relatif. sandbox Direktif sandbox menerapkan pembatasan pada halaman serupa dengan atribut sandbox pada . Halaman yang disandbox kehilangan akses ke skrip, formulir, popup, dan fitur lain kecuali diaktifkan kembali secara eksplisit melalui flag sandbox. Direktif navigation Direktif navigation mengendalikan ke mana pengguna dan formulir mengirim permintaan. form-action Direktif form-action membatasi URL yang diterima sebagai target pengiriman formulir. frame-ancestors Direktif frame-ancestors menentukan induk yang valid dan diizinkan menyematkan halaman menggunakan , , <object>, atau <embed> (elemen <applet> telah dihapus dari spesifikasi HTML). Menyetel frame-ancestors ‘none’ menggantikan header X-Frame-Options: DENY. navigate-to Direktif navigate-to pernah diusulkan untuk membatasi URL yang boleh dituju oleh dokumen melalui mekanisme apa pun. Direktif ini telah dihapus dari spesifikasi CSP Level 3 dan tidak pernah dirilis pada browser produksi mana pun. Direktif reporting Direktif reporting mengendalikan perilaku pelaporan pelanggaran. report-to Direktif report-to menentukan nama grup pelaporan yang didefinisikan oleh header Reporting-Endpoints. Laporan pelanggaran dikirim ke endpoint yang terkait dengan grup bernama tersebut. report-uri Direktif report-uri mengirim laporan pelanggaran ke URL tertentu. Direktif ini sedang digantikan oleh report-to, tetapi masih banyak diterapkan demi kompatibilitas mundur. upgrade-insecure-requests Direktif upgrade-insecure-requests menginstruksikan browser untuk memperlakukan semua URL HTTP pada halaman sebagai HTTPS. Hal ini sangat bermanfaat selama migrasi dari HTTP ke HTTPS ketika banyak sumber daya masih merujuk ke URL yang tidak aman. require-trusted-types-for Direktif require-trusted-types-for memberlakukan kebijakan Trusted Types untuk sink injeksi DOM XSS, dengan mewajibkan objek bertipe alih-alih string. trusted-types Direktif trusted-types menentukan daftar izin berisi nama kebijakan Trusted Types, sehingga membatasi kebijakan mana saja yang boleh dibuat oleh halaman. Nilai source Direktif menerima ekspresi source yang mendefinisikan dari mana sumber daya dimuat. ‘self’ Cocok dengan origin saat ini (skema, host, dan port yang sama). Tidak mencakup subdomain. ‘none’ Memblokir semua sumber untuk direktif tersebut. Tidak ada sumber daya dari jenis yang ditentukan yang dimuat. ‘unsafe-inline’ Mengizinkan elemen ‘unsafe-eval’ Mengizinkan evaluasi kode dinamis melalui eval(), Function(), dan konstruksi serupa. ‘unsafe-hashes’ Mengizinkan penangan event inline tertentu yang diidentifikasi melalui hash-nya, tanpa mengaktifkan seluruh skrip inline. ‘strict-dynamic’ Memperluas kepercayaan ke skrip yang dimuat oleh skrip yang sudah tepercaya. Dikombinasikan dengan kebijakan berbasis nonce, hal ini menghilangkan kebutuhan memasukkan setiap host skrip ke daftar izin satu per satu. ‘nonce-*’ Sebuah nonce kriptografis (number used once) yang dihasilkan server untuk setiap response. Nilai nonce dalam kebijakan harus cocok dengan atribut nonce pada elemen Content-Security-Policy: script-src 'nonce-abc123' ‘sha256-’, ‘sha384-’, ‘sha512-*’ Hash dari isi skrip atau gaya inline. Browser menghitung hash setiap blok inline dan membandingkan hasilnya dengan hash yang ada di daftar izin. host-source Pola host atau URL yang menentukan origin yang diizinkan. Mendukung wildcard untuk subdomain (*.example.re), port tertentu (example.re:443), dan awalan path (example.re/scripts/). scheme-source Sebuah skema seperti https: atau data: yang mengizinkan semua sumber daya yang disajikan melalui protokol bersangkutan. ‘report-sample’ Kata kunci ‘report-sample’, yang ditambahkan ke nilai script-src atau style-src, meminta browser menyertakan cuplikan singkat dari kode yang melanggar di dalam laporan pelanggaran. Hal ini membantu menemukan skrip atau gaya inline yang bermasalah. Contoh Kebijakan ketat yang hanya mengizinkan sumber daya dari origin yang sama akan memblokir semua skrip inline dan pemuatan sumber daya eksternal. Content-Security-Policy: default-src 'self' Kebijakan dengan aturan terpisah untuk skrip dan gambar. Skrip hanya dimuat dari origin yang sama, sedangkan gambar juga dimuat dari CDN gambar khusus. Content-Security-Policy: default-src 'self'; img-src 'self' images.example.re Kebijakan berbasis nonce untuk skrip. Setiap pemuatan halaman menghasilkan nonce baru, dan hanya elemen Content-Security-Policy: script-src 'nonce-r4nd0m'; style-src 'self' Kebijakan yang menggabungkan ‘strict-dynamic’ dengan nonce. Skrip tepercaya bebas memuat skrip tambahan tanpa perlu daftar izin berbasis host satu per satu. Content-Security-Policy: script-src 'strict-dynamic' 'nonce-r4nd0m' Kebijakan yang melaporkan pelanggaran ke sebuah endpoint untuk pemantauan sambil tetap memberlakukan aturannya. Content-Security-Policy: default-src 'self'; report-to csp-violations Pemecahan masalah Pelanggaran CSP muncul di konsol browser sebagai pesan “Refused to…” disertai URI sumber daya yang diblokir dan direktif yang menyebabkan pemblokiran. Skrip inline diblokir setelah CSP ditambahkan. Browser mencatat Refused to execute inline script because it violates the following Content Security Policy directive: “script-src …”. Kebijakan bawaan memblokir semua elemen Gaya inline diblokir. Konsol menampilkan Refused to apply inline style ketika style-src tidak menyertakan ‘unsafe-inline’ atau nonce/hash yang cocok. Framework yang menyuntikkan gaya saat runtime memicu pelanggaran ini. Tambahkan nonce ke style-src atau gunakan ‘unsafe-inline’ selama masa transisi menuju gaya berbasis nonce. Sumber daya eksternal diblokir karena domainnya tidak ada dalam direktif. Error Refused to load the script atau Refused to connect berarti origin sumber daya tersebut tidak terdaftar pada direktif yang relevan. Buka konsol browser, identifikasi origin yang diblokir dari pesan pelanggaran, lalu tambahkan origin tersebut ke direktif yang tepat (script-src, img-src, connect-src, dan sebagainya). Periksa juga default-src, karena direktif yang tidak ada akan kembali ke nilai bawaan. eval() diblokir secara bawaan. Pustaka yang mengandalkan eval(), new Function(), atau kompiler template memicu Refused to evaluate a string as JavaScript. Menambahkan ‘unsafe-eval’ ke script-src memulihkan fungsionalitas tersebut, tetapi melemahkan kebijakan. Sebaiknya refaktor kode untuk menghindari eval() bila memungkinkan. Google Tag Manager atau skrip analitik rusak di bawah CSP. Tag manager menyuntikkan skrip secara dinamis, dan setiap skrip yang disuntikkan memerlukan nonce atau entri daftar izin host. Tambahkan domain GTM (https://www.googletagmanager.com) ke script-src serta https://www.google-analytics.com ke connect-src dan img-src. Untuk kebijakan berbasis nonce, gunakan ‘strict-dynamic’ agar skrip yang dimuat oleh skrip GTM tepercaya mewarisi kepercayaan tanpa entri host satu per satu. Men-debug pelanggaran di konsol browser. Buka DevTools dan periksa tab Console untuk melihat pesan pelanggaran CSP. Setiap pesan menyebutkan URI yang diblokir, direktif yang dilanggar, dan kebijakan lengkapnya. Di Chrome, tab Network menandai permintaan yang diblokir dengan status (blocked:csp). Firefox menyediakan detail serupa baik di panel Console maupun Network. Menguji kebijakan dengan aman menggunakan mode Report-Only. Terapkan kebijakan menggunakan header Content-Security-Policy-Report-Only terlebih dahulu. Mode ini mencatat pelanggaran tanpa memblokir sumber daya apa pun. Pantau laporan pelanggaran, perbaiki sumber yang hilang, lalu beralih ke header Content-Security-Policy yang memberlakukan aturan setelah aliran laporan bersih.