Belajar Vue - API Security & Data Protection

#Pendahuluan

Aplikasi frontend berkomunikasi dengan server setiap hari, dan setiap komunikasi adalah permukaan serangan: data bisa bocor, token bisa dicuri, atau halaman bisa diretas lewat injeksi. Memahami keamanan API bukan opsi, melainkan keharusan untuk aplikasi production.

Episode 13 membahas pengamanan komunikasi client-server di Vue: integrasi API yang aman dengan environment variables, pencegahan XSS lewat rendering yang aman, CSRF protection, cara menangani data sensitif di aplikasi client, dan best practices komunikasi API yang bisa kalian pakai langsung.

#Integrasi API yang Aman

#Environment Variables

Jangan pernah menulis URL API atau key langsung di kode. Simpan di file .env dengan prefix VITE_:

VITE_API_BASE_URL=https://api.example.com
VITE_APP_VERSION=1.0.0

Membaca environment variable

import.meta.env.VITE_API_BASE_URL

import.meta.env.VITE_API_BASE_URL membaca nilai dari .env. Hanya variabel berprefix VITE_ yang terekspos ke client; rahasia server tidak boleh masuk bundle.

#API Client Terpusat

Bungkus semua pemanggilan API dalam satu modul agar kebijakan keamanan konsisten:

API client

const BASE = import.meta.env.VITE_API_BASE_URL;
 
export async function api(path, options = {}) {
  const res = await fetch(`${BASE}${path}`, {
    ...options,
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      ...options.headers,
    },
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

credentials: "include" mengirim cookie sesi ke domain API, dan Content-Type dipasang seragam. Satu tempat untuk menambah header auth, timeout, atau logging.

#Mencegah XSS

#Rendering yang Aman

Vue meng-escape semua interpolasi secara default, jadi teks dari user aman dirender:

Interpolasi aman

<script setup>
const komentar = "<script>alert('xss')</script>";
</script>
 
<template>
  <p>{{ komentar }}</p>
</template>

{{ komentar }} menampilkan string apa adanya sebagai teks, bukan mengeksekusinya. Jangan pernah memakai v-html untuk data user tanpa sanitasi, karena itu memasukkan HTML mentah.

#Sanitasi Sebelum v-html

Jika benar-benar butuh HTML, sanitasi dulu dengan library:

npm install dompurify

Sanitasi konten

import DOMPurify from "dompurify";
 
const bersih = DOMPurify.sanitize(kontenDariServer);

DOMPurify.sanitize(...) menghapus tag dan atribut berbahaya sebelum dirender lewat v-html. Aturan emas: perlakukan semua data dari luar sebagai tidak tepercaya.

#CSRF Protection

CSRF terjadi ketika browser mengirim cookie sesi ke request yang dipicu situs jahat. Mitigasi utama di Vue: pakai cookie yang di-set SameSite oleh server, dan kirim header X-CSRF-Token yang diambil dari cookie:

Token CSRF

function getCsrfToken() {
  const match = document.cookie.match(/csrftoken=([^;]+)/);
  return match ? match[1] : "";
}
 
api.defaults.headers.common["X-CSRF-Token"] = getCsrfToken();

document.cookie.match(...) membaca token CSRF dari cookie, lalu dikirim sebagai header di setiap request. Kombinasi SameSite plus token membuat serangan lintas situs jauh lebih sulit.

#Data Sensitif di Client

Aturan utama: apa pun yang masuk ke bundle JavaScript bisa dibaca pengguna. Jangan pernah menaruh secret, API key, atau password di file frontend. Gunakan backend proxy untuk menyembunyikan rahasia, dan hanya ekspos data yang memang harus tampil. Menaruh secret di VITE_ tidak membuatnya aman, hanya memindahkannya ke publik.

#Best Practices Komunikasi API

• Selalu pakai HTTPS untuk seluruh komunikasi.
• Set timeout pada request agar tidak menggantung.
• Tampilkan error yang jelas tanpa membocorkan detail internal.
• Log ke server untuk tracking, tapi jangan sertakan token di log.
• Paginasi data besar dan jangan fetch semua sekaligus.

#Penutup

Episode 13 membuat komunikasi API kalian lebih aman: environment variables untuk konfigurasi, interpolasi yang di-escape secara default, sanitasi dengan DOMPurify sebelum v-html, CSRF token, serta aturan jelas untuk data sensitif dan best practices komunikasi API.

Inti yang harus dibawa pulang:

• Prefix VITE_ untuk variabel yang boleh ekspos ke client.
• v-html berbahaya untuk data user tanpa sanitasi.
• DOMPurify membersihkan HTML sebelum dirender.
• CSRF ditangani dengan cookie SameSite dan header token.
• Secret di bundle frontend tidak pernah aman.
• HTTPS, timeout, dan error handling adalah dasar komunikasi API.

Di episode 14 selanjutnya kita membahas caching dan performance — client-side caching dengan Vue Query dan local storage, memoization dengan computed dan watchEffect, lazy loading komponen, serta cara mengoptimalkan render dan reaktivitas.