Mixed Content adalah kondisi ketika sebuah halaman web yang menggunakan protokol aman (HTTPS) memuat sumber daya tambahan—seperti gambar, skrip (JavaScript), lembar gaya (CSS), atau iframe—melalui protokol yang tidak aman (HTTP). Kondisi ini melemahkan keamanan total situs karena elemen HTTP dapat disadap atau dimanipulasi oleh pihak ketiga melalui serangan Man-in-the-Middle (MitM), meskipun alamat utama situs sudah menggunakan gembok hijau HTTPS.
Peramban modern seperti Google Chrome dan Mozilla Firefox secara otomatis memblokir sumber daya HTTP yang dimuat dalam halaman HTTPS atau menampilkan peringatan "Not Secure" pada bilah alamat. Hal ini berdampak buruk pada kredibilitas situs, pengalaman pengguna, serta peringkat SEO di mesin pencari.
Jenis-Jenis Mixed Content
Secara teknis, Mixed Content dibagi menjadi dua kategori utama dengan tingkat keparahan yang berbeda terhadap keamanan sistem:
| Jenis Mixed Content | Definisi | Dampak oleh Peramban (Browser) |
|---|---|---|
| Active Mixed Content | Sumber daya yang dapat mengubah perilaku halaman atau mengakses data sensitif (skrip, iframe, plugin, stylesheet). | Diblokir sepenuhnya oleh peramban secara default karena ancaman keamanan yang sangat tinggi. |
| Display / Passive Mixed Content | Sumber daya yang hanya bersifat visual atau pelengkap tanpa kemampuan mengubah struktur halaman (gambar, audio, video). | Ditampilkan dengan peringatan keamanan (ikon gembok rusak atau peringatan tidak aman). |
Penyebab Utama Terjadinya Mixed Content
Masalah ini umumnya muncul setelah sebuah situs migrasi dari HTTP ke HTTPS tanpa memperbarui referensi URL di dalam basis data atau kode sumber. Beberapa pemicu spesifik meliputi:
- Penggunaan URL absolut (menggunakan
http://domain.com/gambar.jpgalih-alih URL relatif atauhttps://) pada kode templat atau postingan. - Plugin atau tema pihak ketiga pada CMS (seperti WordPress) yang memanggil aset eksternal via HTTP.
- Aset pihak ketiga (seperti widget iklan, pelacak analitik, atau CDN) yang tidak mendukung protokol HTTPS.
Langkah-Langkah Memperbaiki Mixed Content
Untuk menyelesaikan masalah Mixed Content secara tuntas, ikuti prosedur teknis berikut:
1. Identifikasi Sumber Daya yang Bermasalah
Gunakan fitur Console pada Developer Tools di peramban (tekan F12 di Chrome) saat mengakses halaman web Anda. Pesan peringatan seperti "Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script 'http://...'" akan muncul secara spesifik beserta baris kodenya.
2. Perbarui Basis Data dan Kode Sumber
Jika menggunakan sistem manajemen konten seperti WordPress, perbarui URL situs dari HTTP ke HTTPS menggunakan plugin migrasi tepercaya atau jalankan kueri SQL langsung pada database untuk mengganti string tautan:
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://namadomain.com', 'https://namadomain.com');3. Implementasikan Content Security Policy (CSP)
Tambahkan header HTTP Content-Security-Policy dengan arahan upgrade-insecure-requests pada konfigurasi server (seperti Nginx atau Apache). Header ini memerintahkan peramban untuk secara otomatis mengonversi semua permintaan HTTP menjadi HTTPS sebelum memuatnya.
Header always set Content-Security-Policy "upgrade-insecure-requests;"4. Perbaiki Tautan Eksternal
Pastikan semua skrip atau pustaka pihak ketiga (seperti Google Fonts, jQuery CDN, atau skrip iklan) dipanggil menggunakan URL yang berawalan https:// atau menggunakan protokol relatif (misalnya //ajax.googleapis.com/...).
Tips Pencegahan Jangka Panjang
Lakukan pemindaian secara berkala menggunakan alat bantu seperti Screaming Frog SEO Spider atau ekstensi peramban untuk mendeteksi tautan rusak atau aset lama yang masih menggunakan protokol HTTP. Selalu aktifkan pengalihan otomatis (HTTP to HTTPS redirection) melalui pengaturan server atau panel hosting Anda.