Cara Mengatasi Mixed Content Error di WordPress (Plugin dan File .htaccess)

Mixed content warning adalah error WordPress yang umum terjadi karena pengaturan SSL (Secure Socket Layer) yang salah. Error ini menunjukkan bahwa website WordPress Anda memiliki aset yang tidak aman dari URL yang tidak menggunakan HTTPS.

Apabila mengalaminya, Anda harus segera mengatasi error ini karena bisa mengganggu pengalaman pengguna dan menyebabkan mesin pencari menandai website Anda sebagai tidak aman. Akibatnya, peringkat website pun bisa turun, bahkan dicuri datanya oleh penjahat cyber.

Tidak perlu panik! Artikel kami kali ini akan membantu Anda mengatasi mixed content di WordPress berdasarkan kemungkinan penyebabnya. Ada tiga metode yang kami jelaskan, yaitu menggunakan plugin, mengubah URL website dari HTTP ke HTTPS, dan mengedit file .htaccess.

Apa Itu Mixed Content Error di WordPress?

Mixed content di WordPress muncul ketika website menyajikan konten yang aman (HTTPS) sekaligus tidak aman (HTTP) akibat pengaturan SSL yang salah.

Untuk mengatasinya, Anda harus memaksa WordPress untuk menampilkan semua konten dari koneksi HTTPS yang aman, yang bisa dilakukan dengan menggunakan plugin, mengubah link HTTP menjadi HTTPS, atau mengedit file .htaccess.

Apa Penyebab Error Mixed Content di WordPress?

Mengaktifkan HTTPS/SSL merupakan langkah keamanan yang sangat dianjurkan untuk website WordPress. Dengan sertifikat SSL, data yang ditransfer antara website Anda dan pengunjung akan dienkripsi untuk memastikan koneksi yang aman.

Beberapa provider hosting, termasuk Hostinger, sudah menyertakan sertifikat SSL gratis dengan paket hostingnya. Atau, Anda juga bisa membeli sertifikat SSL dari penyedia pihak ketiga dan menginstalnya sendiri.

Sayangnya, Anda mungkin tetap menjumpai peringatan mixed content di WordPress bahkan setelah menginstal sertifikat SSL yang valid. Peringatan ini muncul ketika website HTTPS menggunakan path absolut untuk memuat skrip HTTP.

Path absolut adalah lokasi folder atau file di website yang ditulis lengkap dengan protokolnya dari awal hingga akhir. Berikut contohnya:

http://domain.tld/featured-image.jpg

Cara Mengetahui Apakah Ada Error Mixed Content di WordPress

Cara termudah untuk menemukan error mixed content di WordPress adalah dengan melihat kolom alamat website Anda di browser. 

Tergantung pada web browser yang digunakan, peringatan Tidak aman atau ikon gembok rusak mungkin muncul di samping URL website Anda dengan pesan, “Your connection to this site is not fully secure.

tampilan google chrome yang menunjukkan pesan tidak aman

Nah Anda bisa menemukan aset-aset yang dimuat melalui koneksi HTTP dengan menggunakan Developer tools (Alat pengembang) di browser Google Chrome. 

Untuk membukanya, klik ikon tiga titik pada menu bagian atas Chrome, lalu pilih More tools (Fitur lainnya) → Developer tools (Alat pengembang). Atau, tekan Ctrl+Shift+I untuk Windows atau Linux, dan Cmd+Option+I untuk macOS.

Buka tab Console (Konsol) di tool tersebut untuk melihat semua konten WordPress yang tidak aman di website Anda.

tampilan developer tools di chrome yang menunjukkan konten tidak aman

Cara Mengatasi Mixed Content WordPress

Di bagian ini, kami akan membagikan tiga solusi debug website WordPress yang bisa Anda coba untuk mengatasi error mixed content, dimulai dengan metode yang paling mudah.

Cara Mengatasi Mixed Content WordPress Menggunakan Plugin

Apabila Anda masih bisa mengakses dashboard admin WordPress, instal plugin HTTPS/SSL untuk memperbaiki peringatan mixed content. Beberapa plugin ini menyediakan versi gratis yang menyertakan fitur untuk mengatasi masalah konten tidak aman dengan mudah.

Di tutorial ini, kami akan menggunakan plugin SSL Insecure Content Fixer untuk mengatasi mixed content WordPress:

  1. Instal dan aktifkan SSL Insecure Content Fixer dari direktori plugin WordPress. Apabila memerlukan panduan penginstalan plugin, baca artikel kami lainnya tentang cara instal plugin WordPress.
tampilan plugin ssl insecure content fixer di wordpress
  1. Buka SettingsSSL Insecure Content dari dashboard admin untuk mengonfigurasi plugin.
  2. Bagian Fix insecure content menentukan tingkat perbaikan yang perlu diterapkan oleh plugin ini. Opsi Simple menangani skrip, stylesheet, dan file media WordPress, yang prosesnya tidak terlalu mengganggu performa website. Mulailah dari opsi ini ke opsi yang lebih tinggi sampai error teratasi.
tampilan halaman konfigurasi plugin ssl insecure content fixer
  1. Bagian HTTPS detection menentukan bagaimana website WordPress Anda mengidentifikasi halaman HTTPS. Anda bisa mengaturnya ke standard WordPress function atau memilih opsi lain di bawahnya kalau menggunakan reverse proxy seperti NGINX atau Cloudflare CDN.
tampilan bagian https detection di plugin ssl insecure content fixer
  1. Biarkan pengaturan lainnya pada opsi default, lalu klik Save Changes
  2. Kunjungi website WordPress Anda untuk mengecek apakah error mixed content telah teratasi.

Apabila masalahnya belum teratasi dengan plugin HTTPS/SSL, mungkin ada URL yang ditulis menggunakan hard-code dalam database atau file WordPress Anda. Untuk hal ini, Anda perlu mengganti semua URL dengan HTTPS.

Apabila hanya ada beberapa link yang tidak aman, Anda bisa menghapusnya secara manual. Kalau jumlahnya banyak, gunakan plugin search-and-replace untuk mengubah semua link yang tidak aman dalam tabel database Anda.

Penting! Backup website WordPress Anda dulu sebelum melakukan perubahan apa pun pada database.

Ikuti langkah-langkah berikut ini untuk melakukan perubahan massal pada database WordPress Anda menggunakan plugin Better Search Replace:

  1. Instal dan aktifkan Better Search Replace dari direktori plugin WordPress.
tampilan plugin better search replace di direktori wordpress
  1. Buka ToolsBetter Search Replace dari dashboard admin Anda.
  2. Isi kolom Search for dengan alamat website HTTP Anda, lalu tambahkan versi HTTPS ke kolom Replace with.
  3. Kolom Select tables menentukan tabel yang akan diperbarui. Tekan Ctrl dan klik setiap entri untuk memilih semua tabel.
  4. Biarkan pengaturan lainnya pada opsi default. Tampilan kolomnya akan terlihat seperti ini:
tampilan bagian konfigurasi plugin Better Search Replace
  1. Klik Run Search/Replace untuk memulai proses update.
  2. Karena mode Dry run diaktifkan, plugin ini hanya akan menampilkan hasil temuannya. Pastikan bahwa hasil tersebut memang URL HTTP.
  3. Nonaktifkan mode Dry run lalu jalankan kembali proses pencarian dan penggantian.

Tips Berguna

Bersihkan cache browser Anda sebelum melakukan pengujian pada website WordPress untuk memastikan data yang dimuat adalah yang terbaru.

Cara Mengatasi Mixed Content WordPress dengan .htaccess

Metode terakhir untuk mengatasi mixed content warning di WordPress adalah dengan memaksa koneksi HTTPS yang aman melalui file .htaccess. 

File ini mengatur berbagai fungsi untuk website yang dihosting di beberapa web server, termasuk Apache. Salah satu fungsinya yaitu untuk memaksa WordPress agar mengarahkan pengunjung dari koneksi HTTP ke HTTPS yang lebih aman.

Anda bisa menemukan atau membuat file .htaccess di direktori root website yang menyimpan semua file inti WordPress.

Di tutorial ini, kami akan menunjukkan cara mengedit .htaccess menggunakan File Manager Hostinger. Namun, Anda juga bisa menggunakan FTP client seperti FileZilla. Berikut caranya:

  1. Buka bagian FileFile Manager di hPanel.
  2. Pilih Akses file [domain Anda] untuk melihat file website Anda.
tampilan bagian file manager di hpanel dengan tombol akses file manager yang dipilih
  1. Klik dua kali folder public_html dan cari file .htaccess. Kalau file tersebut belum ada, Anda bisa membuatnya.
File .htaccess pada File Manager Hostinger
  1. Klik kanan file tersebut, kemudian pilih Edit.
  2. Tempel cuplikan kode berikut di bagian bawah file .htaccess Anda.
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
Header always set Content-Security-Policy "upgrade-insecure-requests;"
  1. Klik Simpan dan muat ulang website WordPress Anda untuk melihat apakah error mixed content sudah berhasil diatasi. 

Apabila prosesnya berhasil, pengunjung yang mengakses website Anda melalui link HTTP yang tidak aman akan dialihkan ke koneksi HTTPS yang aman.

Kesimpulan

Error mixed content mungkin muncul setelah Anda menginstal sertifikat SSL. Apabila dibiarkan saja, error ini bisa merusak SEO dan pengalaman pengguna website Anda, bahkan menimbulkan celah keamanan yang bisa dimanfaatkan oleh pihak yang tidak bertanggung jawab.

Jadi, Anda harus mengatasinya sesegera mungkin sebelum bertambah parah. Ada tiga solusi untuk memperbaiki error mixed content di WordPress:

  • Gunakan plugin untuk mengatasi error tanpa perlu ribet.
  • Edit link HTTP yang dikodekan secara manual lalu ubah ke HTTPS.
  • Paksa WordPress untuk mengalihkan koneksi HTTP ke HTTPS melalui file .htaccess.

Semoga artikel ini berhasil membantu Anda mengatasi error mixed content dan mengoptimalkan pengalaman pengguna website WordPress Anda, ya. Apabila masih memiliki pertanyaan, lihat bagian FAQ di bawah ini atau sampaikan lewat komentar yuk! Semoga berhasil!

Tanya Jawab (FAQ) Cara Mengatasi Mixed Content WordPress

Bagian ini akan menjawab beberapa pertanyaan umum tentang cara memperbaiki mixed content di WordPress.

Bagaimana Cara Mengatasi Mixed Content di WordPress?

Ada tiga cara untuk mengatasi error mixed content di WordPress. Metode yang paling mudah adalah dengan menggunakan plugin. Atau, Anda bisa mengalihkan koneksi HTTP ke HTTPS secara manual untuk URL yang ditulis dengan hard-code, serta mengedit skrip .htaccess untuk memaksa koneksi HTTPS yang aman.

Apakah Error Mixed Content Berbahaya?

Ya, mixed content warning bisa menyebabkan masalah yang cukup serius. Error ini bisa membahayakan SEO dan pengalaman pengguna website WordPress Anda. Bahkan, mixed content warning bisa menimbulkan celah keamanan di website Anda, yang berujung pada pengintaian oleh pihak yang tidak bertanggung jawab dan serangan cyber.

Bagaimana Cara Menemukan Mixed Content Error di Website?

Cari peringatan Tidak aman atau ikon gembok rusak di kolom alamat browser Anda. Di Google Chrome, buka tab Console (Konsol) di Developer tools (Alat pengembang) untuk menemukan aset yang dimuat menggunakan HTTP.

Author
Penulis

Faradilla A.

Faradilla, yang lebih akrab disapa Ninda, adalah Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.