Pencegahan XSS dalam Vue
Pelepasan automatik Vue, bahaya v-html, DOMPurify untuk pembersihan, jenis dipercayai.
Pencegahan XSS dalam Vue ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
Apakah XSS
Penskripan Rentas Tapak (XSS) ialah serangan yang menyuntik skrip berniat jahat ke dalam halaman supaya skrip itu berjalan dalam pelayar pengguna lain. Serangan ini boleh mencuri kuki, token dan data. Vue melindungi anda secara lalai, tetapi beberapa corak boleh membuka semula kelemahan tersebut.
Vue Meloloskan Interpolasi Secara Automatik
Teks dalam interpolasi pendakap berganda {{ }} diloloskan daripada HTML secara automatik. Rentetan pengguna yang mengandungi teg dipaparkan sebagai teks tidak berbahaya, bukannya dilaksanakan.
<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->Pengikatan Atribut Juga Selamat
Pengikatan menggunakan v-bind / :attr turut meloloskan nilai, jadi tanda petikan yang disuntik tidak dapat keluar daripada atribut dan menyuntik pengendali.
<div :title="userInput">Hover me</div>Bahaya v-html
v-html menetapkan innerHTML secara terus. Ia tidak meloloskan kandungan, jadi sebarang penanda - termasuk skrip dan pengendali peristiwa - dipaparkan sebagai HTML yang aktif.
<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>Cara v-html Dieksploitasi
Walaupun tanpa teg skrip, HTML penyerang boleh menjalankan kod melalui atribut pengendali peristiwa atau muatan img onerror.
// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";Peraturan: Jangan Sekali-kali Gunakan v-html dengan Input Pengguna
Peraturan paling mudah ialah jangan sekali-kali menghantar kandungan yang tidak dipercayai kepada v-html. Gunakan interpolasi biasa yang melakukan pelolosan apabila sumbernya dikawal oleh pengguna.
Apabila Anda Mesti Memaparkan HTML
Kadangkala anda benar-benar memerlukan HTML kaya, seperti kandungan CMS atau output markdown. Dalam keadaan itu, anda mesti melakukan sanitasi terhadap HTML sebelum mengikatnya.
Melakukan Sanitasi dengan DOMPurify
DOMPurify membuang teg dan atribut berbahaya sambil mengekalkan pemformatan selamat. Pasang pustaka itu dan lakukan sanitasi sebelum menggunakan v-html.
npm install dompurifyLakukan Sanitasi Kemudian Ikat
Jalankan nilai melalui DOMPurify.sanitize dalam computed, kemudian ikat hasil yang telah dibersihkan.
import DOMPurify from "dompurify";
import { computed } from "vue";
const safeHtml = computed(() =>
DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>Mengkonfigurasi Teg yang Dibenarkan
Anda boleh mengehadkan senarai benarkan supaya hanya teg yang dijangka oleh anda kekal selepas sanitasi.
DOMPurify.sanitize(html, {
ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
ALLOWED_ATTR: ["href"]
});Sumber Lain yang Perlu Dicurigai
Jangan percayai URL juga: href javascript: dalam pautan terikat boleh melaksanakan kod. Sahkan atau lakukan sanitasi terhadap href dan jangan sekali-kali membina sumber <script> dinamik daripada data pengguna.
// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";Semakan Pantas
Anda mesti memaparkan HTML yang dihantar pengguna. Apakah pendekatan yang selamat?
Rumusan
Vue melakukan pelolosan automatik terhadap interpolasi {{ }} dan pengikatan atribut, lalu meneutralkan kebanyakan XSS. Pengecualian berbahaya ialah v-html, yang memaparkan HTML mentah. Jangan hantarkan input pengguna kepadanya secara terus; apabila HTML kaya diperlukan, lakukan sanitasi dengan DOMPurify terlebih dahulu dan jangan percayai URL yang dibekalkan pengguna.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Soalan Lazim
Adakah pelajaran “Pencegahan XSS dalam Vue” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Pencegahan XSS dalam Vue”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pencegahan XSS dalam Vue”?
Pelepasan automatik Vue, bahaya v-html, DOMPurify untuk pembersihan, jenis dipercayai. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Pencegahan XSS dalam Vue” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Pencegahan XSS dalam Vue
- Dasar Keselamatan Kandungan (CSP) dengan Vue
- Perlindungan CSRF dalam SPA Vue
- Corak Pengesahan Selamat