REFERRER-POLICY HTTP-HEADERS WEB-SECURITY PRIVACY FRONTEND-SECURITY BACKEND-SECURITY NETWORKING WEB-STANDARDS DATA-PROTECTION BROWSER-SECURITY ANALYTICS BEST-PRACTICES

Referrer-Policy: Mengontrol Informasi Referer untuk Privasi dan Keamanan Aplikasi Web Anda

⏱️ 13 menit baca
👨‍💻

1. Pendahuluan

Pernahkah Anda bertanya-tanya bagaimana sebuah website tahu dari mana Anda datang? Atau mungkin Anda khawatir data sensitif di URL Anda bisa bocor ke website lain? Jawabannya terletak pada Referer Header dan bagaimana kita sebagai developer mengaturnya melalui Referrer-Policy.

Referer Header adalah salah satu bagian dari permintaan HTTP yang dikirim oleh browser ke server saat Anda berpindah dari satu halaman ke halaman lain. Header ini berisi URL halaman sebelumnya. Terdengar sepele, tapi informasi ini punya implikasi besar terhadap privasi pengguna, keamanan aplikasi, hingga akurasi data analitik Anda.

Di era di mana privasi data menjadi perhatian utama, mengelola Referer Header dengan bijak bukan lagi sekadar nice-to-have, melainkan sebuah keharusan. Artikel ini akan membawa Anda menyelami Referrer-Policy, menjelaskan berbagai direktifnya, dan memberikan panduan praktis untuk mengimplementasikannya di aplikasi web Anda. Mari kita pastikan aplikasi kita tidak hanya fungsional, tapi juga bertanggung jawab dan aman!

2. Memahami Referer Header dan Referrer-Policy

Sebelum kita membahas Referrer-Policy, mari kita pahami dulu apa itu Referer Header.

Ketika Anda mengklik sebuah link dari situs-a.com yang menuju ke situs-b.com, browser Anda akan mengirimkan permintaan HTTP ke situs-b.com. Dalam permintaan tersebut, ada sebuah header bernama Referer (ya, ejaannya memang salah, seharusnya “referrer”, tapi ini sudah jadi standar historis di HTTP). Header ini akan berisi URL lengkap dari situs-a.com.

Contoh Referer Header:

GET /halaman-tujuan HTTP/1.1
Host: situs-b.com
Referer: https://situs-a.com/halaman-asal?query=data-sensitif
User-Agent: Mozilla/5.0 (...)
...

Kenapa ini jadi masalah? Jika halaman-asal di situs-a.com memiliki URL yang mengandung informasi sensitif (misalnya, token sesi, ID pengguna, parameter pencarian rahasia), informasi tersebut bisa bocor ke situs-b.com melalui Referer Header. Ini adalah celah privasi dan keamanan yang serius!

Di sinilah Referrer-Policy berperan. Referrer-Policy adalah sebuah mekanisme yang memungkinkan Anda mengontrol seberapa banyak informasi Referer yang dikirim oleh browser. Anda bisa mengatur apakah Referer Header harus dikirim, sebagian, atau tidak sama sekali, tergantung pada konteks navigasi (misalnya, navigasi ke origin yang sama, atau ke origin yang berbeda).

🎯 Tujuan utama Referrer-Policy:

3. Direktif Referrer-Policy yang Berbeda

Ada beberapa direktif yang bisa Anda gunakan untuk mengatur Referrer-Policy. Setiap direktif memiliki aturan berbeda tentang kapan dan bagaimana Referer Header dikirim. Mari kita bedah satu per satu:

DirektifDeskripsi
no-referrer❌ Tidak ada Referer Header yang akan dikirim, sama sekali. Baik ke origin yang sama maupun berbeda. Ini adalah kebijakan paling ketat untuk privasi.
no-referrer-when-downgrade⚠️ Ini adalah default lama di banyak browser. Referer akan dikirim jika protokolnya sama atau lebih aman (misalnya, HTTPS ke HTTPS). Tapi tidak akan dikirim jika terjadi “downgrade” (misalnya, HTTPS ke HTTP).
origin✅ Hanya origin (skema, host, port) yang dikirim, tanpa path atau query string. Contoh: https://example.com/path?a=b akan menjadi https://example.com/.
origin-when-cross-origin↔️ Jika navigasi ke origin yang sama, Referer lengkap akan dikirim. Jika ke origin yang berbeda, hanya origin yang dikirim.
same-origin🏠 Referer lengkap hanya dikirim saat navigasi ke origin yang sama. Jika ke origin yang berbeda, tidak ada Referer Header yang dikirim.
strict-origin🔒 Hanya origin yang dikirim, tetapi hanya jika protokolnya sama atau lebih aman. Tidak akan dikirim jika terjadi downgrade (HTTPS ke HTTP).
strict-origin-when-cross-origin🛡️ Ini adalah default baru dan direkomendasikan di banyak browser modern. Jika ke origin yang sama, Referer lengkap dikirim. Jika ke origin berbeda, hanya origin yang dikirim, tetapi hanya jika protokolnya sama atau lebih aman (HTTPS ke HTTPS). Tidak ada Referer jika downgrade.
unsafe-url🚨 Hindari ini! Referer lengkap (termasuk path dan query string) akan selalu dikirim, terlepas dari keamanan protokol. Ini berisiko tinggi terhadap kebocoran data.

💡 Penting: Default Referrer-Policy di browser modern (Chrome, Firefox, Edge, Safari) telah beralih ke strict-origin-when-cross-origin untuk alasan privasi dan keamanan. Ini adalah kabar baik, tapi Anda tetap harus secara eksplisit mengatur kebijakan yang sesuai dengan kebutuhan aplikasi Anda.

4. Memilih Referrer-Policy yang Tepat

Memilih Referrer-Policy yang tepat adalah tentang menyeimbangkan privasi, keamanan, dan fungsionalitas. Berikut adalah beberapa skenario umum dan rekomendasi:

Skenario 1: Situs Pribadi atau Blog Sederhana

Skenario 2: Aplikasi E-commerce atau Fintech

Skenario 3: Aplikasi Enterprise atau Dashboard Internal

Skenario 4: Integrasi dengan Pihak Ketiga (Analytics, Iklan, Widget)

5. Implikasi Privasi dan Keamanan

Mengatur Referrer-Policy bukan hanya tentang mematuhi standar, tapi juga tentang memahami dampak nyata pada aplikasi Anda:

📌 Mencegah Kebocoran Data Sensitif

Ini adalah manfaat paling jelas. Jika URL Anda berisi data seperti https://aplikasi.com/user/profile?id=123&token=abc, strict-origin-when-cross-origin akan memastikan token=abc tidak bocor ke situs pihak ketiga yang Anda kunjungi. Tanpa kebijakan yang tepat, data ini bisa disalahgunakan.

📈 Dampak pada Analitik dan Atribusi

Banyak tool analitik (seperti Google Analytics) mengandalkan Referer Header untuk melacak dari mana pengunjung datang. Jika Anda menggunakan no-referrer secara global, Anda akan kehilangan data atribusi yang berharga dari link keluar. strict-origin-when-cross-origin biasanya memberikan keseimbangan yang baik, masih mengirimkan origin yang cukup untuk analitik dasar tanpa membocorkan detail path.

🌐 Dampak pada CDN dan Caching

Beberapa CDN atau sistem caching mungkin menggunakan Referer Header untuk optimasi atau kontrol akses. Pastikan Referrer-Policy Anda tidak mengganggu fungsionalitas ini. Konsultasikan dokumentasi penyedia CDN Anda jika ragu.

🤝 Pertimbangan Integrasi Pihak Ketiga

Ketika Anda mengintegrasikan widget, SDK iklan, atau layanan pihak ketiga lainnya, mereka mungkin memiliki ekspektasi tertentu terhadap Referer Header. Selalu periksa dokumentasi mereka. Jika mereka meminta kebijakan yang lebih permisif, pertimbangkan risiko dan batasi cakupannya hanya pada elemen HTML tertentu jika memungkinkan.

6. Implementasi Referrer-Policy

Ada beberapa cara untuk mengimplementasikan Referrer-Policy di aplikasi web Anda, dari global hingga granular:

1. Melalui HTTP Header (Direkomendasikan)

Ini adalah cara paling kuat dan direkomendasikan karena diterapkan di tingkat server untuk seluruh halaman atau aplikasi.

Contoh di Nginx:

server {
    # ...
    add_header Referrer-Policy "strict-origin-when-cross-origin";
    # ...
}

Contoh di Apache:

<IfModule mod_headers.c>
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

Contoh di Express.js (Node.js):

const express = require('express');
const helmet = require('helmet'); // Helmet is a popular security middleware

const app = express();

app.use(helmet.referrerPolicy({ policy: "strict-origin-when-cross-origin" }));

// Atau secara manual:
// app.use((req, res, next) => {
//   res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
//   next();
// });

// ... rute dan logika aplikasi lainnya

2. Melalui Tag <meta> HTML

Ini adalah cara yang baik jika Anda tidak memiliki akses ke konfigurasi server atau ingin mengatur kebijakan per halaman. Namun, perlu diingat bahwa kebijakan ini mungkin tidak berlaku untuk semua permintaan (misalnya, permintaan gambar atau CSS dari halaman tersebut) dan mungkin tidak sekuat HTTP header.

<!DOCTYPE html>
<html>
<head>
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <!-- Konten head lainnya -->
</head>
<body>
    <!-- Konten body -->
</body>
</html>

3. Melalui Atribut referrerpolicy pada Elemen HTML

Anda bisa mengatur Referrer-Policy untuk elemen spesifik seperti <a>, <area>, <img>, <iframe>, <script>, atau <link>. Ini berguna jika Anda memiliki kebutuhan khusus untuk beberapa link atau sumber daya.

<!-- Link ini tidak akan mengirim Referer sama sekali -->
<a href="https://external-site.com" referrerpolicy="no-referrer">Kunjungi Situs Eksternal (Privasi Maksimal)</a>

<!-- Gambar ini hanya akan mengirim origin saat di-load -->
<img src="https://assets.cdn.com/image.jpg" referrerpolicy="origin" alt="Gambar">

Untuk link yang dibuat secara dinamis, Anda bisa mengatur atribut referrerPolicy pada elemen DOM.

const dynamicLink = document.createElement('a');
dynamicLink.href = "https://some-other-site.com";
dynamicLink.textContent = "Link Dinamis";
dynamicLink.referrerPolicy = "same-origin"; // Atur kebijakan di sini

document.body.appendChild(dynamicLink);

✅ Best Practice: Mulai dengan mengatur Referrer-Policy melalui HTTP Header di server Anda dengan strict-origin-when-cross-origin. Ini memberikan cakupan terluas dan pertahanan pertama yang kuat. Kemudian, jika ada kebutuhan khusus untuk link atau elemen tertentu, Anda bisa menimpanya dengan atribut referrerpolicy di HTML.

Kesimpulan

Referrer-Policy adalah salah satu pahlawan tanpa tanda jasa di dunia web development. Dengan memahami dan mengimplementasikannya secara benar, Anda tidak hanya meningkatkan privasi pengguna, tapi juga memperkuat postur keamanan aplikasi web Anda. Kebijakan strict-origin-when-cross-origin adalah titik awal yang sangat baik dan direkomendasikan untuk sebagian besar aplikasi modern, menyeimbangkan kebutuhan akan analitik dasar dengan perlindungan data sensitif.

Jangan biarkan informasi Referer Anda bocor tanpa disadari. Ambil kendali, terapkan kebijakan yang tepat, dan bangun aplikasi web yang lebih bertanggung jawab dan aman!

🔗 Baca Juga