Learn Vue - API Security & Data Protection

#Introduction

A frontend application talks to a server every day, and every conversation is an attack surface: data can leak, tokens can be stolen, or the page can be hijacked through injection. Understanding API security isn't optional — it's a requirement for production applications.

Episode 13 covers securing client-server communication in Vue: secure API integration with environment variables, XSS prevention through safe rendering, CSRF protection, how to handle sensitive data in a client application, and best practices for API communication you can apply right away.

#Secure API Integration

#Environment Variables

Never write API URLs or keys directly in code. Store them in a .env file with the VITE_ prefix:

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 reads the value from .env. Only variables prefixed with VITE_ are exposed to the client; server secrets must never end up in the bundle.

#A Centralized API Client

Wrap all API calls in a single module so security policies stay consistent:

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" sends session cookies to the API domain, and Content-Type is set uniformly. One place to add auth headers, timeouts, or logging.

#Preventing XSS

#Safe Rendering

Vue escapes all interpolation by default, so text from users renders safely:

Interpolasi aman

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

{{ komentar }} displays the string as text, not executes it. Never use v-html for user data without sanitizing it, because that injects raw HTML.

#Sanitize Before v-html

If you truly need HTML, sanitize it first with a library:

npm install dompurify

Sanitasi konten

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

DOMPurify.sanitize(...) removes dangerous tags and attributes before they're rendered through v-html. The golden rule: treat all data from outside as untrusted.

#CSRF Protection

CSRF happens when a browser sends session cookies along with a request triggered by a malicious site. The main mitigations in Vue: use cookies set with SameSite by the server, and send an X-CSRF-Token header read from a 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(...) reads the CSRF token from a cookie, then it's sent as a header on every request. The combination of SameSite plus a token makes cross-site attacks much harder.

#Sensitive Data on the Client

The main rule: anything that ends up in the JavaScript bundle can be read by users. Never put secrets, API keys, or passwords in frontend files. Use a backend proxy to hide secrets, and only expose the data that truly needs to be shown. Putting a secret in VITE_ doesn't make it safe — it just moves it into the public.

#Best Practices for API Communication

• Always use HTTPS for all communication.
• Set a timeout on requests so they don't hang.
• Show clear errors without leaking internal details.
• Log to the server for tracking, but don't include tokens in logs.
• Paginate large data; don't fetch everything at once.

#Summary

Episode 13 made your API communication safer: environment variables for configuration, interpolation escaped by default, sanitizing with DOMPurify before v-html, CSRF tokens, plus clear rules for sensitive data and best practices for API communication.

Key takeaways:

• The VITE_ prefix for variables allowed to be exposed to the client.
• v-html is dangerous for unsanitized user data.
• DOMPurify cleans HTML before it's rendered.
• CSRF is handled with SameSite cookies and a token header.
• Secrets in a frontend bundle are never safe.
• HTTPS, timeouts, and error handling are the foundation of API communication.

In the next episode 14, we'll cover caching and performance — client-side caching with Vue Query and local storage, memoization with computed and watchEffect, lazy loading components, and how to optimize rendering and reactivity.