Pengertian Mixed Content Error dan Cara Mengatasinya

Definisi Mixed Content Error

Mixed content error adalah kondisi keamanan pada situs web di mana halaman utama dimuat melalui protokol HTTPS yang aman, namun elemen pendukung di dalamnya (seperti gambar, skrip, atau stylesheet) masih dipanggil melalui protokol HTTP yang tidak terenkripsi. Browser modern seperti Google Chrome atau Mozilla Firefox akan mendeteksi ketidaksesuaian ini dan memberikan peringatan kepada pengguna bahwa koneksi ke situs tersebut tidak sepenuhnya aman.

Mengapa Mixed Content Berbahaya?

Masalah utama dari mixed content adalah kerentanan terhadap serangan Man-in-the-Middle (MitM). Jika elemen dimuat melalui HTTP, penyerang dapat menyadap atau memodifikasi konten tersebut tanpa sepengetahuan pemilik situs atau pengunjung. Hal ini merusak integritas enkripsi SSL/TLS yang seharusnya melindungi seluruh data di halaman tersebut.

Tipe Mixed ContentDeskripsiTingkat Risiko
Display Mixed ContentGambar, video, atau audio yang dimuat via HTTP.Rendah (Browser biasanya hanya menampilkan peringatan)
Active Mixed ContentSkrip (JS), CSS, atau iframe yang dimuat via HTTP.Tinggi (Dapat mengeksekusi kode berbahaya)

Langkah Teknis Perbaikan

Untuk mengatasi error ini, Anda harus memastikan seluruh aset di situs web menggunakan protokol HTTPS. Berikut adalah langkah-langkah praktisnya:

1. Identifikasi Aset Bermasalah

Gunakan fitur Inspect Element pada browser (F12) dan buka tab Console. Browser akan menampilkan daftar URL yang masih menggunakan HTTP secara spesifik.

2. Update Database dan File

Jika Anda menggunakan CMS seperti WordPress, Anda dapat melakukan pencarian dan penggantian (search and replace) pada database untuk mengubah semua tautan http://domainanda.com menjadi https://domainanda.com. Gunakan perintah SQL berikut jika memiliki akses ke database:

UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://domainanda.com', 'https://domainanda.com');

3. Implementasi Content Security Policy (CSP)

Anda dapat memaksa browser untuk memutakhirkan permintaan HTTP ke HTTPS secara otomatis dengan menambahkan header CSP pada file .htaccess atau konfigurasi server Nginx/Apache:

Header always set Content-Security-Policy "upgrade-insecure-requests;"

4. Gunakan Plugin atau Tools Otomatis

Bagi pengguna WordPress, plugin seperti Really Simple SSL dapat membantu mengotomatisasi proses pengalihan dan perbaikan tautan secara sistematis tanpa harus menyentuh kode secara manual.

Troubleshooting Lapangan

Jika setelah melakukan langkah di atas error masih muncul, periksa kembali file CSS atau JS eksternal yang mungkin dipanggil melalui CDN (Content Delivery Network). Pastikan penyedia CDN Anda telah mendukung HTTPS dan Anda telah memperbarui tautan pemanggilan skrip tersebut di dalam tema atau plugin yang digunakan.