Mixed Content Setelah Pasang SSL, Begini Cara Mengatasinya

Mixed content adalah kondisi ketika halaman yang dibuka lewat HTTPS masih memanggil sebagian isinya, seperti gambar, skrip, stylesheet, atau font, lewat alamat http:// yang tidak terenkripsi.

Kenapa ini penting? Sertifikat SSL-mu bisa saja sudah benar, tapi browser tetap tidak menganggap halaman sepenuhnya aman. Lebih parah lagi, browser memblokir sebagian besar jenis konten campuran, sehingga slider tidak jalan, font berubah, formulir tidak terkirim, atau tata letak berantakan. Banyak pemilik website mengira SSL-nya rusak, padahal masalahnya ada di URL lama yang tertinggal.

Kenapa mixed content muncul setelah pasang SSL?

Website yang awalnya berjalan di HTTP menyimpan banyak alamat lengkap berawalan http://. Di WordPress, alamat itu tersimpan di database: isi artikel, pengaturan tema, widget, menu, dan data page builder. Sertifikat baru tidak mengubah apa pun di sana.

Sumber lain yang sering ditemukan:

• Alamat situs di pengaturan aplikasi masih http://.
• Kode tema atau file CSS memanggil gambar dan font dengan alamat lengkap HTTP.
• Skrip pihak ketiga lama, misalnya widget chat, peta, atau penghitung pengunjung, yang ditempel dengan http://.
• Gambar yang dipanggil langsung lewat alamat IP server.

Apa yang dilakukan browser terhadap mixed content?

Dokumentasi MDN membagi mixed content menjadi dua kelompok:

Satu pengecualian penting: permintaan ke alamat IP (misalnya http://103.x.x.x/gambar.png) tidak di-upgrade, melainkan langsung diblokir. Jadi kalau tema lamamu memanggil aset lewat IP, aset itu pasti hilang setelah pindah ke HTTPS.

Cara menemukan sumber mixed content

Cara tercepat memakai browser sendiri:

Catat polanya. Bila semua URL bermasalah berasal dari domainmu sendiri, solusinya cari dan ganti di database. Bila berasal dari domain pihak ketiga, perbaiki kode sematannya.

Cara memperbaiki mixed content di WordPress

Perbarui alamat situs

Buka Settings > General, pastikan WordPress Address (URL) dan Site Address (URL) sama-sama berawalan https://. Kalau kolom itu terkunci, alamatnya didefinisikan di wp-config.php lewat WP_HOME dan WP_SITEURL, jadi ubah di sana.

Ganti URL lama di database

Jangan mengedit artikel satu per satu. Gunakan WP-CLI bila tersedia di hostingmu. Jalankan dulu dengan --dry-run untuk melihat berapa banyak yang akan diubah:

wp search-replace 'http://domainkamu.com' 'https://domainkamu.com' --all-tables --dry-run

Bila hasilnya masuk akal, jalankan lagi tanpa --dry-run. WP-CLI menangani data serialisasi PHP dengan benar, sesuatu yang bisa rusak bila kamu mengganti teks langsung lewat query SQL. Kalau tidak ada akses terminal, plugin pencari dan pengganti URL di database bisa menjadi alternatif. Apa pun caranya, backup database dulu.

Periksa tema, plugin, dan kode sematan

Cari teks http:// di file tema anak, CSS kustom, dan kotak kode tambahan (header atau footer script). Ganti dengan https://, atau gunakan alamat relatif bila aset berada di domain yang sama. Untuk skrip pihak ketiga, ambil kode sematan versi terbaru dari penyedianya.

Bersihkan cache

Setelah perubahan, kosongkan cache plugin, cache server, dan cache CDN. Tanpa itu, pengunjung masih menerima halaman lama yang berisi URL HTTP.

Bisakah dipaksa lewat header?

Bisa sebagai jaring pengaman. Header Content Security Policy berikut meminta browser mengubah semua permintaan HTTP di halaman menjadi HTTPS, termasuk konten yang biasanya diblokir:

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

Baris di atas untuk .htaccess di server Apache dengan modul mod_headers. Syaratnya, aset tersebut memang tersedia lewat HTTPS. Kalau sumbernya tidak mendukung HTTPS, aset tetap gagal dimuat. Jadi header ini melengkapi perbaikan di database, bukan menggantikannya. Pembahasan header keamanan lain ada di cara memasang security headers seperti CSP dan HSTS.

Bagaimana memastikan semua halaman sudah bersih?

Memeriksa satu per satu lewat DevTools cukup untuk website kecil. Untuk website dengan ratusan halaman, gunakan alat perayap situs (crawler) yang bisa melaporkan aset HTTP di setiap halaman. Banyak alat audit SEO punya fitur ini, termasuk versi gratis dengan batas jumlah halaman.

Setelah semuanya bersih, buka lagi beberapa halaman acak di perangkat berbeda, misalnya HP dan laptop, karena tema kadang memuat gambar atau skrip yang berbeda untuk tampilan seluler. Ulangi pemeriksaan ini setiap kali memasang plugin, tema, atau widget baru, karena kode sematan lama bisa membawa alamat HTTP kembali. Kebiasaan kecil ini jauh lebih ringan daripada membersihkan ratusan halaman sekaligus di kemudian hari.