XSS & bahaya set:html

Portal berita menyimpan HTML di database dan merendernya apa adanya. Itu satu-satunya jalur XSS yang benar-benar penting untukmu, dan ia ada di halaman yang paling banyak dibaca.

Yang sudah aman

---
const judul = '<script>alert(1)</script>';
---
<h1>{judul}</h1>

<!-- Keluarannya teks, bukan skrip: -->
<!-- <h1>&lt;script&gt;alert(1)&lt;/script&gt;</h1> -->

Semua interpolasi {} di Astro di-escape otomatis. Di CI3, <?= $judul ?> tidak — kamu harus ingat menulis html_escape() setiap kali. Perpindahan ini saja sudah menutup mayoritas XSS tersimpan di portal berita, karena sebagian besarnya masuk lewat judul dan nama penulis.

Yang tidak aman, dan yang kamu butuhkan

<!-- Badan artikel dari database: HTML sungguhan, sengaja tidak di-escape -->
<div class="badan-artikel" set:html={artikel.isi} />

Kalau editor bisa menempelkan HTML apa pun — dan di CMS berbasis WYSIWYG, mereka bisa — atau kalau tabelmu pernah tersentuh SQL injection, maka artikel.isi bisa berisi apa saja.

Sanitasi di server

pnpm add sanitize-html
pnpm add -D @types/sanitize-html

// src/lib/sanitasi.ts
import sanitizeHtml from "sanitize-html";

const KONFIG: sanitizeHtml.IOptions = {
  allowedTags: [
    "p", "br", "strong", "em", "u", "s", "blockquote",
    "h2", "h3", "h4", "ul", "ol", "li",
    "a", "img", "figure", "figcaption",
    "table", "thead", "tbody", "tr", "th", "td",
    "iframe",                                    // untuk embed video
  ],
  allowedAttributes: {
    a: ["href", "title", "rel", "target"],
    img: ["src", "alt", "width", "height", "loading"],
    iframe: ["src", "width", "height", "allow", "allowfullscreen", "title"],
    "*": ["class"],
  },
  allowedSchemes: ["http", "https", "mailto"],   // "javascript" TIDAK ada
  allowedIframeHostnames: ["www.youtube.com", "www.youtube-nocookie.com", "player.vimeo.com"],

  transformTags: {
    // Tautan keluar: cegah tabnabbing
    a: (namaTag, atr) => ({
      tagName: "a",
      attribs: {
        ...atr,
        rel: "noopener noreferrer nofollow",
        ...(atr.href?.startsWith("http") && !atr.href.includes("portal.contoh.id")
          ? { target: "_blank" }
          : {}),
      },
    }),
    // Gambar: selalu malas, kecuali yang pertama
    img: (namaTag, atr) => ({
      tagName: "img",
      attribs: { ...atr, loading: "lazy", decoding: "async" },
    }),
  },
};

export const bersihkan = (kotor: string) => sanitizeHtml(kotor, KONFIG);

Dua kali: saat menyimpan dan saat menampilkan

// Saat editor menyimpan
const bersih = bersihkan(input.isi);
await dbTulis.updateTable("artikel").set({ isi: bersih }).where("id", "=", id).execute();

// Saat menampilkan — untuk artikel warisan yang masuk sebelum sanitasi ada
const isi = artikel.disanitasi ? artikel.isi : bersihkan(artikel.isi);

Kolom penanda disanitasi membuatmu bisa membersihkan arsip secara bertahap di latar belakang alih-alih dalam satu operasi besar — dan sementara itu, artikel yang belum tersentuh tetap aman karena dibersihkan saat dirender.

Jalur lain yang sering terlewat

// Validasi URL sebelum dipakai sebagai href
export function urlAman(u: string | null): string | undefined {
  if (!u) return undefined;
  try {
    const url = new URL(u, "https://portal.contoh.id");
    return ["http:", "https:", "mailto:"].includes(url.protocol) ? url.href : undefined;
  } catch {
    return undefined;
  }
}

Uji

const MUATAN = [
  '<script>alert(1)</script>',
  '<img src=x onerror=alert(1)>',
  '<a href="javascript:alert(1)">klik</a>',
  '<iframe src="https://jahat.id"></iframe>',
  '<svg onload=alert(1)>',
  '<div style="background:url(javascript:alert(1))">',
  '<math><mtext><table><mglyph><style><!--</style><img src=x onerror=alert(1)>',
];

for (const m of MUATAN) {
  const hasil = bersihkan(m);
  console.assert(!/script|onerror|onload|javascript:/i.test(hasil), `LOLOS: ${m}`);
}

Muatan terakhir itu memanfaatkan cara parser HTML menangani konten asing (MathML/SVG) dan rutin melewati sanitizer buatan sendiri. Ini alasan memakai pustaka yang teruji alih-alih regex — regex tidak mem-parsing HTML, dan HTML jauh lebih aneh daripada yang terlihat.