Bagaimana Mengendalikan Dasar Keselamatan Kandungan (CSP) di Vue Spa?

Elakkan skrip dan gaya sebaris dengan menggerakkan semua JavaScript ke fail luaran dan menggunakan pengendali acara Vue dan bukannya atribut onclick inline. 2. Gunakan header CSP yang ketat tanpa 'tidak selamat' atau 'tidak selamat' dengan mengadopsi komponen runtime sahaja dan komponen fail tunggal Vue untuk menghapuskan keperluan untuk kompilasi templat dinamik. 3. Mengendalikan kandungan dinamik dengan selamat dengan V-HTML hanya selepas membersihkan input pengguna menggunakan dompurify, memastikan pelaksanaan skrip blok CSP dalam HTML yang disuntik. 4. Jika skrip dalam talian diperlukan, gunakan nonces atau hash dan bukannya 'tidak selamat', walaupun ini paling baik dielakkan dalam spa statik kecuali menggunakan SSR. 5. Benarkan sumber luaran seperti CDNs dengan jelas menyatakan domain dalam arahan CSP seperti Script-SRC, IMG-SRC, FONT-SRC, dan Connect-SRC, sambil mengelakkan 'tidak selamat' untuk gaya dengan menggunakan CSS luaran atau scoped. 6. Uji CSP anda menggunakan alat penyemak imbas, penilai CSP Google, dan mod laporan sahaja untuk mengesan pelanggaran tanpa penguatkuasaan, memastikan semua dasar berfungsi seperti yang dimaksudkan sebelum penggunaan penuh. Dengan mengikuti langkah -langkah ini, Spa Vue boleh beroperasi di bawah dasar keselamatan kandungan yang ketat yang berkesan mengurangkan XSS dan risiko suntikan kod tanpa bergantung pada arahan yang tidak selamat, mengakibatkan aplikasi yang selamat dan dikekalkan.

Mengendalikan Dasar Keselamatan Kandungan (CSP) dalam aplikasi Vue Single Page (SPA) adalah penting untuk mendapatkan aplikasi anda terhadap XSS (skrip lintas tapak) dan serangan suntikan kod lain. Walau bagaimanapun, Vue Spa-terutamanya yang menggunakan ciri-ciri dinamik seperti skrip sebaris, eval() , atau v-html -dengan mudah boleh bertentangan dengan peraturan CSP yang ketat. Berikut adalah cara mengendalikan CSP dengan betul di Vue Spa.

✅ 1. Elakkan skrip dan gaya sebaris

Blok CSP Inline <script></script> dan <style></style> tag secara lalai. Vue sendiri tidak menjana skrip sebaris apabila dibina dengan betul, tetapi corak biasa boleh memecahkan CSP:

• Elakkan pengendali acara sebaris ( @click , v-on ) dalam templat-ini umumnya baik kerana Vue menyusunnya ke pendengar acara, bukan inline onclick="" .
• Jangan gunakan tag <script></script> inline dalam index.html anda. Gerakkan semua logik ke fail luaran.

❌ Bad (melanggar CSP lalai):

 <!-index.html->
<script>
  console.log (&#39;init&#39;);
</script>

✅ Bagus:

 <!-index.html->
<script src = "js/app.js"> </script>

Gunakan Webpack/Vite untuk membungkus aplikasi VUE anda dan luaran semua JavaScript.

✅ 2. Gunakan tajuk CSP yang ketat (tanpa 'tidak selamat')

Apabila menyebarkan, tetapkan CSP yang kuat melalui tajuk HTTP (pilihan) atau <meta http-equiv="Content-Security-Policy"> .

Contoh Header CSP untuk Spa Vue (dihoskan pada asal yang sama):

 Kandungan-keselamatan-dasar: 
  lalai-src 'diri';
  script-src 'self' 'unsafe-eval' 'unsafe-inline'; ← Elakkan ini!

Tunggu-anda melihat 'unsafe-eval' dan 'unsafe-inline' ? Itu biasa semasa pembangunan tetapi tidak selamat .

Betulkan 'unsafe-eval'

Penyusun runtime Vue (kompilasi templat dalam pelayar) menggunakan new Function() , yang mencetuskan 'unsafe-eval' . Untuk membuang ini:

➡️ Gunakan Runtime-Only Vue

Dalam projek Vue anda (Vue 3 dengan Vite atau Webpack), pastikan anda menggunakan versi runtime sahaja :

 // vite.config.js atau config webpack
Selesaikan: {
  alias: {
    'vue': 'vue/dist/vue.runtime.esm-bundler.js'
  }
}

Dan tulis komponen anda menggunakan fail .vue dengan <template> , bukan templat runtime seperti:

 app.component (&#39;my-comp&#39;, {template: &#39;<div> hi </div>&#39;}) // memerlukan pengkompil → keperluan tidak selamat-eval

✅ Sebaliknya, gunakan SFCS (komponen fail tunggal):

 <!-myComponent.vue->
<pemat>
  <div> hi </div>
</template>
<script>
Eksport Lalai {}
</script>

Sekarang anda boleh mengeluarkan 'unsafe-eval' dari script-src .

✅ 3. Mengendalikan kandungan dinamik dengan selamat

Arahan Vue v-html boleh berbahaya dan mungkin memerlukan 'unsafe-inline' jika disalahgunakan.

❌ Elakkan:

 <div v-html = "usercontent"> </div>

Ini membuka risiko XSS dan tidak membantu CSP-CSP tidak dapat membezakan selamat vs v-html yang tidak selamat.

✅ Pendekatan yang lebih selamat:

• Membersihkan kandungan pengguna dengan perpustakaan seperti dompurify :

 import dompurify dari 'dompurify';

const cleanHtml = dompurify.sanitize (userHtml);

 <div v-html = "cleanhtml"> </div>

Namun, v-html tidak memerlukan CSP santai jika anda tidak menyuntik skrip sebaris. CSP akan menyekat pelaksanaan skrip dalam kandungan v-html -yang baik.

SO: v-html boleh diterima jika anda membersihkan input dan pelaksanaan skrip blok CSP anda dari DOM .

✅ 4. Gunakan nonces atau hash untuk skrip yang dibenarkan (jika diperlukan)

Sekiranya anda mesti memasukkan skrip inline yang selamat (contohnya, kod awal init), gunakan nonces atau hash dan bukannya 'unsafe-inline' .

Contoh dengan nonce:

Menjana permintaan yang unik setiap permintaan di pelayan:

 Kandungan-keselamatan-dasar: skrip-src 'diri' 'nonce-abc123'

Kemudian:

 <script nonce = "ABC123">
  // skrip inline kecil
</script>

⚠️ Ini memerlukan penyampaian pelayan (SSR) atau generasi HTML dinamik. Dalam spa Vue statik, ini sukar dilaksanakan melainkan anda menggunakan SSR (NUXT, dll.).

Sebagai alternatif, elakkan skrip sebaris sepenuhnya - lebih baik untuk CSP dan penyelenggaraan.

✅ 5. Sumber luaran dan CDN

Jika aplikasi VUE anda memuatkan aset luaran (fon, analisis, API), kemas kini CSP dengan sewajarnya.

Contoh:

 Kandungan-keselamatan-dasar:
  lalai-src 'diri';
  script-src 'self' https://www.m.sbmmt.com;
  img-src 'self' https: //*.m.sbmmt.com;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.yourservice.com;
  gaya-src 'diri' 'tidak selamat-dalam talian'; ← Kurangkan penggunaan

➡️ Elakkan 'unsafe-inline' untuk style-src oleh:

• Menggerakkan semua CSS ke fail luaran (VUE mengendalikan ini melalui gaya scoped atau pengekstrakan CSS).
• Menggunakan style-src 'self' jika semua gaya dibundel.

✅ 6. Uji CSP anda

Gunakan alat penyemak imbas (tab keselamatan) untuk memeriksa pelanggaran CSP.

Gunakan juga:

• Penilai CSP Google
• Mod Laporan sahaja:

   Kandungan-keselamatan-dasar-laporan sahaja: lalai-src 'diri'; Laporan-URI /CSP-Report-Endpoint

  Ini melanggar pelanggaran tanpa menyekat, hebat untuk ujian.

  ---

  Ringkasan: Amalan terbaik

  • ✅ Gunakan Vue Runtime-Only Build untuk mengelakkan 'unsafe-eval'
  • ✅ Elakkan skrip/gaya sebaris dalam index.html
  • ✅ Sanitize kandungan v-html dengan dompurify
  • ✅ Gunakan Bundle Luaran (Vite/Webpack) untuk semua JS/CSS
  • ✅ Tetapkan CSP melalui header HTTP: script-src 'self' , tidak 'unsafe-inline' atau 'unsafe-eval'
  • ✅ Benarkan hanya domain luaran yang diperlukan
  • ✅ Ujian CSP dengan alat laporan dan penyemak imbas

  ---

  Pada asasnya, dengan persediaan Vue yang betul dan kebersihan penempatan, anda boleh menjalankan Spa Vue di bawah CSP yang ketat - tidak diperlukan bendera yang tidak selamat. Ia hanya mengambil perhatian kepada bagaimana dan di mana kod dimuatkan.

  Atas ialah kandungan terperinci Bagaimana Mengendalikan Dasar Keselamatan Kandungan (CSP) di Vue Spa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!