Lewati ke konten utama
Numekara
Konsultasi GratisKontak

F4 · Modul 15

API bertipe, keamanan, dan aksesibilitas

48 langkah singkat, dari mudah sampai tantangan.

  1. Level 1

    Kenal

  2. Level 2

    Paham

  3. Level 3

    Terapkan

  4. Level 4

    Tantangan

  5. Level 5

    Pendalaman

Intinya

  • OpenAPI 3.1 adalah kontrak API yang dibaca mesin. openapi-typescript menghasilkan tipe darinya, dan klien bertipe menolak jalur serta query yang salah sebelum ada permintaan yang dikirim.
  • Tipe dihapus saat program berjalan; as hanyalah janji. Data yang menyeberang batas kepercayaan divalidasi saat jalan.
  • XSS dicegah per konteks: React meloloskan teks dan atribut, URL butuh daftar izin skema, HTML mentah butuh sanitizer. CSP bernonce adalah lapis kedua.
  • CSRF ditahan berlapis: metode aman tidak mengubah data, cookie SameSite, dan route handler pengubah data memeriksa Origin. Rahasia hanya dibaca di modul server.
  • Aksesibilitas diuji, bukan dirasa: kontras dihitung dengan rumus WCAG, setiap kontrol punya nama, dan semua fungsi bisa dipakai dengan keyboard.

Sebelum mulai

±4,5 jam, ditambah ±1 jam Lab Codespaces.

Modul ini memakai materi di bawah. Belum yakin? Ulas dulu bagian yang disebut.

Hasil belajar: membaca kontrak OpenAPI 3.1 dan menghasilkan tipe TypeScript darinya dengan openapi-typescript; menulis klien /api/* bertipe yang mengubah Problem Details menjadi GalatLaporan("http"); menjelaskan apa yang tidak dijamin tipe saat program berjalan dan memvalidasi di batas sistem; mencegah XSS di tiga konteks (teks HTML, atribut URL, HTML mentah); memasang dan memeriksa Content Security Policy; menjelaskan CSRF dan pertahanannya (SameSite, pemeriksaan Origin, Fetch Metadata); menulis kepala Set-Cookie yang aman; menjaga rahasia tetap di server (termasuk jebakan variabel lingkungan di Client Component); serta menerapkan dan menguji kriteria WCAG 2.2 dasar (kontras, nama yang bisa diakses, struktur) dan mengenal Core Web Vitals.

Proyek: Laporan Warung langkah 15: klien bertipe /api/* dari data/laporan-api.json, CSP dan kepala keamanan di laporan-warung, penjaga CSRF untuk POST /api/kasbon, dan audit aksesibilitas dasbor (kontrak proyek §3, §4).

Istilah di modul ini (64)

Ketuk istilah untuk melihat penjelasannya. Di materi, istilah bergaris titik membuka kartu yang sama. Semua istilah course

Bahan modul

Semua kode, latihan, dan data modul ini dalam satu zip, untuk dijalankan di laptop atau Google Colab.

  • 9 berkas latihan + tes
  • 1 berkas data
Semua data course (data-f4.zip) Cara menjalankan di laptop
Lihat isi zip
  • BACA-DULU.txt
  • api-skema.ts
  • latihan_f4_15_1.ts
  • latihan_f4_15_9.ts
  • latihan_f4_15_2.ts
  • latihan_f4_15_6.ts
  • latihan_f4_15_7.ts
  • latihan_f4_15_3.ts
  • latihan_f4_15_5.ts
  • latihan_f4_15_8.tsx
  • latihan_f4_15_4.ts
  • laporan-api.json