Mengatasi Mixed Content Error Ketika Memuat Halaman
Beberapa hari lalu saya mempunyai aplikasi menggunakan framework codeigniter yang berjalan di server linux local dengan URL localhost. Karena aplikasi yang saya bangun terdapat fitur untuk menampilkan dokumen seperti work, excel dan pdf menggunakan Google Docs Viewer, maka aplikasi saya ini memerlukan hosting atau ip public. Karena google docs viewer sendiri tidak bisa melakukan embed terhadap dokumen yang lokasinya berada di localhost atau server lokal.
Saya menggunakan ngrok agar aplikasi saya yang tadinya berjalan di localhost bisa diakses dari luar melalui internet. ngrok sendiri menggunakan protokol https pada saat melakukan tunneling ke aplikasi lokal kita.
Ketika dicoba diakses menggunakan url ngrok, ternyata banyak komponen-komponen website seperti CSS dan Javascript yang gagal dimuat. Ketika melakukan inspeksi menggunakan inspect element pada browser muncul log error sebagai berikut :
Pesan error tersebut muncul karena halaman website dimuat diatas protokol https tetapi terdapat reques yang tidak aman yang berasal dari protokol http. Ya ketika website kita dibuka dengan menggunakan ngrok maka secara otomatis halaman web kita menggunakan saluran https, namun ngrok memuat resource di web yang berada di localhost sehingga terjadilah Mixed Content.
Cara mengatasi kesalahan tersebut sangatlah mudah. Cari kode <head> pada file utama website, kemudian tambahkan tag html dibawah ini tepat dibawah kode <head>
Meta tag diatas memungkinkan HTML Anda memuat konten campuran (https dan http). Namun hal ini tidak disarankan dari segi keamanan. Kita bisa menggunakan cara ini hanya untuk keperluan pengembangan saja.
