PWA dan Caching Strategies: Performa Kilat Tanpa Mengorbankan Keamanan

Progressive Web App (PWA) adalah aplikasi web yang mampu bekerja layaknya aplikasi native—lengkap dengan kemampuan offline, push notification, dan instalasi ke home screen. Pilar utamanya adalah Service Worker, sebuah script yang berjalan di background dan bertindak sebagai proxy jaringan. Lewat Service Worker, developer bisa menentukan strategi caching secara presisi. Namun kebebasan ini juga membawa risiko keamanan yang sering luput dari perhatian.

Memahami Caching Strategies

Beberapa strategi populer yang wajib dipahami developer pemula:

• Cache First: cek cache dulu, jika tidak ada baru ke network. Cocok untuk aset statis seperti CSS, JS, dan gambar.
• Network First: utamakan network, cache hanya sebagai fallback. Cocok untuk data dinamis.
• Stale-While-Revalidate: sajikan cache segera sambil memperbarui di background. Kombinasi terbaik antara kecepatan dan kesegaran data.

Contoh Implementasi

Berikut Service Worker yang menerapkan strategi berbeda berdasarkan jenis request:

// sw.js
const CACHE = 'app-v1';
const ASSETS = ['/', '/styles.css', '/app.js'];

self.addEventListener('install', (e) => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS)));
});

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  // Aset statis: cache first
  if (url.pathname.match(/\.(css|js|png|jpg)$/)) {
    event.respondWith(
      caches.match(event.request).then(r => r || fetch(event.request))
    );
  } else {
    // Data dinamis: network first
    event.respondWith(
      fetch(event.request)
        .then(res => {
          const clone = res.clone();
          caches.open(CACHE).then(c => c.put(event.request, clone));
          return res;
        })
        .catch(() => caches.match(event.request))
    );
  }
});

Analisis Keamanan: Web Cache Deception

Vulnerabilitas paling umum pada caching adalah Web Cache Deception. Serangan ini memanfaatkan kebijakan cache yang terlalu longgar terhadap URL, sehingga konten privat user tersimpan di cache dan bisa diakses pihak lain.

Bayangkan backend menyajikan data profil di /account/details dengan header Cache-Control: no-store. Namun karena reverse proxy atau CDN menganggap URL dengan ekstensi .css sebagai aset statis, request ke /account/details/x.css justru dicache secara publik. Penyerang mengirim link tersebut ke korban—browser korban memuat data sensitifnya dan proxy menyimpannya—lalu penyerang cukup mengakses URL yang sama untuk memanen data tersebut.

Demonstrasi eksploitasi:

# 1. Attacker kirim link ke korban
https://app.com/account/details/foo.css



curl -H "Cookie: session=attacker" https://app.com/account/details/foo.css

Cara Pencegahan

Langkah mitigasi yang direkomendasikan:

1. Validasi berdasarkan Content-Type response, bukan hanya ekstensi URL. Jangan percaya .css atau .png sebagai jaminan aset publik.
2. Terapkan Cache-Control: private, no-store pada semua endpoint yang memuat data user.
3. Gunakan whitelist route eksplisit di Service Worker alih-alih regex ekstensi.
4. Set header Vary: Cookie dan aktifkan CSRF token pada request sensitif.
5. Bersihkan cache Service Worker saat logout agar data tidak tertinggal di perangkat bersama.

Kesimpulan

PWA dengan caching strategies yang tepat mampu memberikan pengalaman offline-friendly dan performa instan tanpa mengorbankan keamanan. Kuncinya adalah explicit over implicit: pilih strategi per-route, jangan cache sembarang URL berbasis ekstensi, dan perlakukan data autentikasi sebagai non-cacheable. Dengan memadukan Cache First untuk aset statis, Network First untuk data dinamis, serta prinsip least-privilege pada Service Worker, developer bisa memetik manfaat penuh PWA sekaligus menutup celah cache deception.