Pencegahan XSS di Vue
Auto-escaping Vue, bahaya v-html, DOMPurify untuk sanitasi, serta trusted types.
Pencegahan XSS di Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 XSS
Skrip Lintas Situs (XSS) adalah serangan ketika skrip berbahaya disisipkan ke halaman dan dijalankan di peramban pengguna lain. Serangan ini dapat mencuri kuki, token, dan data. Vue melindungi Anda secara bawaan, tetapi beberapa pola dapat membuka celah itu kembali.
Vue Secara Otomatis Melakukan Escape pada Interpolasi
Teks di dalam interpolasi mustache {{ }} secara otomatis diubah menjadi teks HTML yang aman. String pengguna yang berisi tag ditampilkan sebagai teks biasa yang tidak berbahaya, bukan dijalankan.
<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->Pengikatan Atribut Juga Aman
Pengikatan dengan v-bind / :attr juga melakukan escape pada nilai, sehingga tanda kutip yang disisipkan tidak dapat keluar dari atribut dan menyisipkan penangan kejadian.
<div :title="userInput">Hover me</div>Bahaya v-html
v-html menetapkan innerHTML secara langsung. Fitur ini tidak melakukan escape, sehingga markup apa pun—termasuk skrip dan penangan kejadian—ditampilkan sebagai HTML aktif.
<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>Cara v-html Dieksploitasi
Bahkan tanpa tag skrip, HTML dari penyerang dapat menjalankan kode melalui atribut penangan kejadian atau payload img onerror.
// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";Aturan: Jangan Pernah Menggunakan v-html untuk Input Pengguna
Aturan paling sederhana adalah jangan pernah meneruskan konten yang tidak tepercaya ke v-html. Gunakan interpolasi biasa yang melakukan escape setiap kali sumbernya dikendalikan pengguna.
Saat Anda Harus Merender HTML
Terkadang Anda memang membutuhkan HTML kaya, seperti isi CMS atau keluaran Markdown. Dalam kasus tersebut, Anda harus membersihkan HTML sebelum mengikatnya.
Membersihkan dengan DOMPurify
DOMPurify menghapus tag dan atribut berbahaya sambil mempertahankan pemformatan yang aman. Pasang dan gunakan untuk membersihkan HTML sebelum v-html.
npm install dompurifyBersihkan Lalu Ikat
Jalankan nilai melalui DOMPurify.sanitize di properti terhitung, lalu 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>Mengonfigurasi Tag yang Diizinkan
Anda dapat membatasi daftar izin agar hanya tag yang diharapkan yang tetap ada setelah proses pembersihan.
DOMPurify.sanitize(html, {
ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
ALLOWED_ATTR: ["href"]
});Sumber Lain yang Harus Tidak Dipercaya
Jangan percayai URL juga: href javascript: pada tautan terikat dapat menjalankan kode. Validasi atau bersihkan href, dan jangan pernah membuat sumber <script> dinamis dari data pengguna.
// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";Pemeriksaan Singkat
Anda harus merender HTML yang dikirimkan pengguna. Apa pendekatan yang aman?
Ringkasan
Vue secara otomatis melakukan escape pada interpolasi {{ }} dan pengikatan atribut, sehingga sebagian besar XSS dinetralkan. Pengecualian berbahaya adalah v-html, yang merender HTML mentah. Jangan pernah meneruskan input pengguna langsung kepadanya; ketika HTML kaya diperlukan, bersihkan terlebih dahulu dengan DOMPurify dan jangan percayai URL yang diberikan pengguna.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pencegahan XSS di Vue” gratis?
Ya — teks lengkap “Pencegahan XSS di 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 “Pencegahan XSS di Vue”?
Auto-escaping Vue, bahaya v-html, DOMPurify untuk sanitasi, serta trusted types. 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 1 dari 4.
Berapa lama pelajaran “Pencegahan XSS di 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