Belajar Angular - Secure Web Practices

#Pendahuluan

Autentikasi hanya salah satu lapisan keamanan. Sisi lain yang tidak kalah penting: bagaimana aplikasi memproses input pengguna, merender konten, dan berbicara dengan server. Di sinilah serangan XSS, CSRF, dan injection sering terjadi.

Episode 13 membahas pencegahan XSS, CSRF, dan injection, content security policy dan secure headers, sanitasi HTML dan URL aman, serta praktik terbaik keamanan sisi klien. Angular sudah memberi banyak perlindungan secara default — tugas kita adalah tidak membongkarnya tanpa alasan.

#Mencegah XSS, CSRF, dan Injection

#Apa itu XSS

Cross-Site Scripting (XSS) terjadi ketika kode JavaScript berbahaya masuk ke halaman dan dieksekusi di browser korban. Sumber umum: input pengguna yang ditampilkan tanpa sanitasi, atau atribut HTML yang diisi data tidak tepercaya.

#Perlindungan XSS Bawaan Angular

Angular secara default men-sanitize semua nilai yang di-render lewat interpolation dan binding. Coba bayangkan:

Konten berbahaya yang aman karena sanitasi

@Component({
  selector: 'app-komentar',
  standalone: true,
  template: `<p>{{ komentar }}</p>`,
})
export class KomentarComponent {
  komentar = '<script>alert("xss")</script>';
}

Meski komentar berisi <script>, Angular akan menampilkannya sebagai teks biasa, bukan menjalankannya. Inilah perlindungan default yang wajib kalian pertahankan: selalu pakai interpolation dan binding, jangan menyuntikkan HTML mentah ke DOM.

#CSRF dan Injection

CSRF mengecoh browser korban agar mengirim request berbahaya ke situs yang dipercaya. Pencegahannya: gunakan token CSRF, verifikasi header custom seperti X-Requested-With, dan pakai httpOnly cookie dengan atribut SameSite. Injection — SQL injection, command injection — terjadi di sisi server; di frontend, pastikan data dari server selalu dianggap tidak tepercaya sampai divalidasi.

#Content Security Policy dan Secure Headers

#Mengatur CSP

Content Security Policy membatasi sumber daya apa yang boleh dimuat halaman. Kebijakan ketat akan memblokir script inline dan sumber eksternal yang tidak diizinkan:

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'

Kebijakan di atas hanya mengizinkan script dari domain sendiri dan style inline. CSP bisa disetel lewat header server atau meta tag. Angular yang dibuild dengan hashing aman untuk kebijakan seperti ini.

#Secure Headers Lainnya

Selain CSP, pastikan server mengirim: Strict-Transport-Security untuk memaksa HTTPS, X-Content-Type-Options: nosniff, Referrer-Policy, dan X-Frame-Options untuk mencegah clickjacking. Header ini bisa ditambahkan di web server seperti nginx, atau di platform hosting seperti Vercel dan Netlify.

#Sanitizing HTML dan Safe URL Handling

#Jangan Percaya Data dari Server

Kadang aplikasi memang harus menampilkan HTML dari server. Jangan menonaktifkan sanitasi Angular sembarangan. Jika wajib, gunakan DomSanitizer dan tinjau ulang dengan sangat hati-hati:

Menandai konten HTML yang tepercaya

import { Component, inject } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
@Component({
  selector: 'app-konten',
  standalone: true,
  template: `<div [innerHTML]="htmlAman"></div>`,
})
export class KontenComponent {
  private readonly sanitizer = inject(DomSanitizer);
  htmlAman: SafeHtml = '';
}

SafeHtml memberi tahu Angular bahwa nilai sudah dinyatakan aman secara eksplisit oleh pengembang. Ini berarti kalian mengambil alih tanggung jawab sanitasi — hanya gunakan jika konten benar-benar dari sumber tepercaya.

#URL Aman

URL juga bisa berbahaya, misalnya javascript: sebagai skema. Angular memblokir URL berbahaya di binding href dan src. Untuk membuka tautan dari data pengguna, gunakan bypassSecurityTrustUrl hanya setelah memvalidasi skema:

Memvalidasi skema URL

function urlAman(raw: string): SafeUrl | null {
  if (!/^https?:\/\//i.test(raw)) {
    return null;
  }
  return sanitizer.bypassSecurityTrustUrl(raw);
}

Regex ^https?:\/\// memastikan hanya URL dengan skema http atau https yang diterima. Semua skema lain ditolak — pola ini mencegah URL javascript: yang berbahaya.

#Best Practices untuk Client-side Security

#Prinsip Dasar

• Jangan pernah mempercayai input dari pengguna maupun data dari server.
• Selalu pakai binding dan interpolation; hindari manipulasi innerHTML langsung.
• Jangan simpan secret atau token sensitif di localStorage.
• Aktifkan HTTPS di seluruh lingkungan, termasuk development di jaringan publik.
• Batasi sumber daya dengan CSP dan pastikan cookie memakai SameSite serta httpOnly.

#Audit Reguler

Lakukan audit keamanan secara berkala: jalankan npm audit untuk dependencies, gunakan scanner otomatis untuk header keamanan, dan tinjau kode yang memakai bypassSecurityTrust*. Keamanan bukan sekali jadi — ia dijaga setiap hari.

#Penutup

Inti yang harus dibawa pulang:

• Angular men-sanitize konten secara default; jangan membongkar perlindungan ini tanpa alasan kuat.
• Cegah CSRF dengan token dan cookie httpOnly ber-SameSite.
• Terapkan CSP dan secure headers seperti HSTS dan nosniff.
• DomSanitizer hanya untuk konten tepercaya, dengan peninjauan ketat.
• Validasi skema URL agar tautan javascript: tidak pernah lolos.
• Audit dependencies dan header keamanan secara berkala.

Di episode 14 selanjutnya kita akan membahas API communication dan caching — memakai HTTP interceptors untuk penanganan error terpusat, strategi caching untuk API responses, state transfer dan server-side rendering cache, serta optimasi performa network requests.