DIPERBARUI: 2026-11-06

[B3-M3]Mahir⏱ 40 Mnt Baca + 55 Mnt Praktik

Autentikasi, Otorisasi, Keamanan Web (XSS/CSRF/CORS) & Rate Limiting

Mengamankan Aplikasi Web dari Eksploitasi: Header Keamanan & Sanitasi Input

BAGIKAN MODUL:Dukung rekan developer & tim Anda

💬WHATSAPP inLINKEDIN 𝕏POST

[KONTRAK HASIL BELAJAR // B3-M3]Standar Kompetensi Industri

⏱ 40 Mnt Baca•⚡ 55 Mnt Praktik•Lulus: ≥ 80/100 Poin

01. Target Pembelajar & Prasyarat

Web engineer dan security practitioner.

Prasyarat:Modul B3-M1: Perancangan REST API

02. Kompetensi Konseptual (Level 1–2)

✓Membedakan mekanisme serangan XSS vs CSRF.

03. Kompetensi Praktis & Artefak Nyata (Level 3–4)

✓Mengonfigurasi header keamanan (Content-Security-Policy, X-Frame-Options) di Next.js.

Artefak yang Dibangun: Middleware keamanan `security-headers.ts`.

04. Aplikasi Nyata & Verifikasi

Penerapan Industri: Arsitektur keamanan situs dan API Z-Automation.

Metode Verifikasi: Memeriksa response header menggunakan curl -I dan memvalidasi pencegahan clickjacking.

[BAGIAN 01 // MASALAH & URGENSI ARSITEKTURAL]

Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?

Pelajari pertahanan terhadap Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), konfigurasi CORS, dan pembatasan laju permintaan (Rate Limiting).

Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.

[BAGIAN 02 // MEKANISME DI BALIK LAYAR]

Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol

Tiga Ancaman Klasik Web Modern

XSS (menyuntikkan skrip jahat ke halaman pengguna lain), CSRF (memaksa pengguna melakukan aksi tanpa disadari), dan Clickjacking. Kita menangkisnya dengan sanitasi input, cookie `HttpOnly; SameSite=Strict`, dan Content Security Policy (CSP).

[DIAGRAM TEKNIS SVG INTERAKTIF // DIAG-02]

Alur Arsitektur Sistem Otonom & Runtime

LANGKAH 1 DARI 4

ENTITAS AKTIF:User -> Sistem

Pesan bahasa alami diterima melalui antarmuka web atau webhook chat.

[LIVE PAYLOAD INSPECTOR]JSON 2026

{
  "input": "Berapa estimasi biaya pembuatan landing page bisnis?"
}

[BAGIAN 03 // MATRIKS KESALAHPAHAMAN]

Koreksi Asumsi Umum vs Realitas Rekayasa

×ASUMSI KELIRU

“CORS adalah firewall yang mengamankan server Anda dari serangan hacker langsung.”

✓REALITAS SISTEM

CORS adalah mekanisme keamanan browser yang mencegah domain asing membaca data sensitif. Request langsung via curl/Postman tidak terhalang oleh CORS.

[BAGIAN 04 // LABORATORIUM PRAKTIS & KODE]

Implementasi Langkah-demi-Langkah

Hasil akhir yang diharapkan: Middleware yang menyuntikkan header keamanan lengkap.

STRUKTUR PROYEK DIREKOMENDASIKAN:

src/
└── middleware.ts

1Implementasi Header Keamanan di Middleware

Menyuntikkan header X-Frame-Options dan CSP.

middleware.ts•typescript

✓Tested Successfully

LINGKUNGAN TERUJI: Next.js 16.4.311 BARIS KODE

1	// src/middleware.ts
2	import { NextResponse } from 'next/server';
3	import type { NextRequest } from 'next/server';
4
5	export function middleware(request: NextRequest) {
6	const response = NextResponse.next();
7	response.headers.set('X-Frame-Options', 'DENY');
8	response.headers.set('X-Content-Type-Options', 'nosniff');
9	response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
10	return response;
11	}

KEPUTUSAN ARSITEKTURAL UTAMA:

• X-Frame-Options: DENY: Mencegah website disematkan di dalam iframe situs asing untuk serangan clickjacking.

PERINTAH EKSEKUSI TERMINAL:

$ Uji response header dengan curl -I http://localhost:3000

OUTPUT YANG DIHARAPKAN:

X-Frame-Options: DENY

[BAGIAN 05 // PANDUAN TROUBLESHOOTING & TANTANGAN]

Mengantisipasi Masalah Umum & Tantangan Ekstensi

Pesan Error: Preview 3D tidak muncul di iframe resmi

Penyebab: DENY memblokir seluruh iframe

Solusi Eksak: Gunakan SAMEORIGIN jika butuh embedding internal.

⚡ TANTANGAN EKSTENSI MANDIRI:

Tambahkan konfigurasi Content-Security-Policy (CSP) yang membatasi script eksternal.

[RUBRIK EVALUASI KOMPETENSI 100 POIN // B3-M3]

Uji Kompetensi Mandiri & Verifikasi Hasil

Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.

BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)

01.Mengapa token autentikasi sesi lebih aman disimpan di dalam cookie 'HttpOnly' daripada di 'localStorage'?

Karena skrip JavaScript jahat (serangan XSS) tidak dapat membaca isi cookie bertanda HttpOnly.

Karena cookie HttpOnly secara otomatis mengenkripsi seluruh file hard disk.

BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN — MIN. 21 POIN)

Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar:

Header X-Frame-Options terpasang di seluruh rute+25 Poin

← MODUL SEBELUMNYA[B3-M2] Persistensi Data, Pemodelan Skema Database & Transaksi MODUL SELANJUTNYA →[B3-M4] Alur Kerja Git, Audit Core Web Vitals & Deployment Produksi