Content Security Policy (CSP) dengan Vue
Header CSP, skrip berbasis nonce, kebijakan berbasis hash, serta konfigurasi CSP Vite.
Content Security Policy (CSP) dengan Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Apa Itu CSP
Kebijakan Keamanan Konten adalah header respons HTTP yang memberi tahu peramban sumber skrip, gaya, gambar, dan koneksi mana yang diizinkan. Ini merupakan lapisan pertahanan kedua yang kuat terhadap XSS—bahkan skrip yang disisipkan akan diblokir jika sumbernya tidak diizinkan.
Header
CSP dikirim melalui header respons Content-Security-Policy. Setiap direktif mencantumkan sumber yang diizinkan untuk suatu jenis sumber daya.
Content-Security-Policy: default-src 'self'; script-src 'self';Membatasi Sumber Skrip
Direktif script-src mengendalikan dari mana skrip boleh dimuat. Membatasinya ke 'self' akan memblokir skrip sebaris dan skrip pihak ketiga yang mungkin disisipkan penyerang.
Content-Security-Policy: script-src 'self' https://cdn.trusted.com;Menghindari unsafe-inline
'unsafe-inline' mengizinkan skrip sebaris dan atribut penangan kejadian—tepat seperti yang dieksploitasi XSS. Kebijakan yang kuat tidak menyertakannya agar kode sebaris yang disisipkan tidak berjalan.
Menghindari unsafe-eval
'unsafe-eval' mengizinkan eval dan konstruktor Function. Build runtime Vue 3 tidak membutuhkannya karena templat telah dikompilasi sebelumnya, jadi Anda dapat dan seharusnya menghilangkannya.
Skrip Sebaris Berbasis Nilai Sekali Pakai
Jika Anda benar-benar membutuhkan skrip sebaris, berikan nonce acak untuk setiap respons dan cantumkan nonce tersebut dalam kebijakan. Hanya skrip yang membawa nonce yang sesuai yang akan dijalankan.
<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
// allowed because nonce matches
</script>Mengapa Nilai Sekali Pakai Lebih Baik daripada unsafe-inline
Nilai sekali pakai tidak dapat diprediksi dan berubah pada setiap respons, sehingga penyerang yang menyisipkan skrip tidak dapat menebaknya. Dengan demikian, skrip sebaris tetap berfungsi tanpa risiko menyeluruh dari unsafe-inline.
CSP dan Gaya Vue
Vue dan banyak pustaka antarmuka pengguna menyisipkan gaya saat runtime. Izinkan gaya tersebut melalui style-src dengan nonce/hash, atau ekstrak CSS ke berkas agar style-src 'self' sudah memadai.
Content-Security-Policy: style-src 'self';Pengaya Nilai Sekali Pakai CSP Vite untuk Pengembangan
Server pengembangan Vite menyisipkan skrip, yang dapat berbenturan dengan CSP yang ketat. Pengaya nilai sekali pakai CSP menambahkan nonce yang sesuai pada tag yang disisipkan Vite selama pengembangan.
// vite.config.ts
import { defineConfig } from "vite";
export default defineConfig({
html: {
cspNonce: "DEV_NONCE"
}
});connect-src untuk API
Batasi lokasi tempat aplikasi boleh mengambil data dengan connect-src, sehingga kode yang disisipkan tidak dapat mengirim data ke domain yang dikendalikan penyerang.
Content-Security-Policy: connect-src 'self' https://api.example.com;Mode Hanya Laporan
Terapkan CSP secara aman dengan Content-Security-Policy-Report-Only, yang melaporkan pelanggaran tanpa memblokirnya. Dengan begitu, Anda dapat menyempurnakan kebijakan sebelum memberlakukannya.
Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;Pemeriksaan Singkat
Nilai direktif CSP mana yang harus Anda hindari agar perlindungan XSS tetap kuat?
Ringkasan
CSP adalah header HTTP yang membatasi sumber skrip, gaya, dan koneksi yang diizinkan, sehingga memblokir kode yang disisipkan meskipun XSS berhasil lolos. Hindari unsafe-inline dan unsafe-eval; gunakan nonce untuk setiap respons pada skrip sebaris yang diperlukan serta pengaya nilai sekali pakai CSP Vite selama pengembangan. Terapkan terlebih dahulu dalam mode Hanya Laporan sebelum memberlakukannya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Content Security Policy (CSP) dengan Vue” gratis?
Ya — teks lengkap “Content Security Policy (CSP) dengan Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Content Security Policy (CSP) dengan Vue”?
Header CSP, skrip berbasis nonce, kebijakan berbasis hash, serta konfigurasi CSP Vite. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Content Security Policy (CSP) dengan Vue” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pencegahan XSS di Vue
- Content Security Policy (CSP) dengan Vue
- Perlindungan CSRF di SPA Vue
- Pola Autentikasi Aman