Memperbaiki tampilan website rusak setelah mengaktifkan SSL

Anda pasti tahu mengenai pengumuman Google akan mulai memperhitungkan adanya sertifikat SSL pada website dalam rankingnya, dan tentu saja tawaran SSL gratis dari CloudFlare baru – baru ini. Setelah anda repot – repot mendaftarkan nama domain anda ke dalam CloudFlare, menunggu antrian pemasangan sertifikat SSL untuk situs anda, hasilnya malah tampilan website rusak atau kacau.

Hal ini sempat saya alami saat berusaha mengaktifkan SSL beberapa saat di situs uTekno ini, dan setelah melihat apa penyebabnya saya yakin secara umum setiap situs baru yang menggunakan SSL (asal menghidupkan) akan mengalami masalah ini.

Silahkan anda cek website anda melalui protokol HTTPS, contohnya: https://utekno.com. Kalau SSL sudah terpasang dengan benar maka akan muncul tampilannya, walau akan tampak kacau. Dari sini saya menyimpulkan adanya masalah terhadap file css, javascript, gambar dan media lainnya melalui SSL.
cloudflare-free-ssl-activated

Dan ternyata benar, pada Google Chrome banyak menunjukkan error bahwa elemen – elemen yang masih tersimpan pada koneksi non-SSL akan diblokir secara otomatis. Pesan errornya seperti “[blocked] The page at 'https://utekno.com/' was loaded over HTTPS, but run insecure content from 'http://cdn.utekno.com/wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.0': this content should also be loaded over HTTPS“. Kalau di Mozilla Firefox atau browser semestinya pesan error yang muncul akan mirip.
google-chrome-blocked-page-loaded-over-https
Solusinya untunglah mudah, anda tinggal memperbaiki lokasi file yang direferensikan dari http menjadi https. Misal http://utekno.com/jquery.js menjadi https://utekno.com/jquery.js.

Atau kalau anda menggunakan WordPress pertama buka dashboard, akses Settings kemudian General, ubah website url anda dari http menjadi https,? plugin WordPress HTTPS mungkin bisa membantu anda juga.

Mungkin anda juga sudah sadar bahwa website anda bisa diakses menggunakan dua protokol berbeda, bagaimana kalau hanya ingin salah satu saja? Seperti setiap orang yang mengakses versi http akan otomatis dialihkan (redirect) ke versi https? Anda bisa menggunakan Page Rules dari CloudFlare atau menggunakan file htaccess untuk ini.

RewriteEngine On
# This will enable the Rewrite capabilities
RewriteCond %{HTTPS} !=on
# This checks to make sure the connection is not already HTTPS
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]

Mungkin anda heran kenapa situs ini masih belum mengaktifkan SSL walaupun sudah tahu apa masalahnya dan solusinya. Saya menundanya karena SSL gratis dari CloudFlare ini terbatas dukungannya terhadap browser versi lama yang ada di Windows XP SP2 dan sebelumnya, juga Android versi 2 yang masih banyak dipakai di Indonesia. Dari pengumuman CloudFlare mengenai Universal SSL hampir separuh pengguna internet di Indonesia akan bermasalah.
cloudflare-indonesia-sni-support
Kalau pengunjung website anda kebanyakan dari luar Indonesia masih bisa dikatakan aman, tapi kalau di Indonesia dan anda ingin menggunakan SSL gratis dari CloudFlare maka saran saya tunda dahulu. Kecuali anda menggunakan layanan CloudFlare yang berbayar maka mereka akan memberikan sertifikat SSL yang kompatibel. Yah… namanya juga gratisan jelas ada batasannya. 🙂

16 pemikiran pada “Memperbaiki tampilan website rusak setelah mengaktifkan SSL”

  1. makasih infonya mas.. ini toh ternyata sebabnya, klo gitu saya juga tunda deh pake SSL nya.. 😀 sekalian tanya deh mas, klo kita mengaktifkan SSL nanti berpengaruh gak ya mas terhadap SEO dan posisi SERP

    terimakasih sebelumnya – Best Regard

    Balas
    • Halo Rangga, dari Google sendiri sudah menyatakan adanya SSL ini akan diperhitungkan dalam faktor rankingnya, jadi memang ada pengaruh. Seberapa besar pengaruhnya saja yang masih misteri. 🙂

      Nah… kalau anda bermaksud menggunakan SSL gratis dari CloudFlare yang memang mudah pemasangannya (cuma satu klik langsung aktif), tapi bila pengunjung situsnya adalah mayoritas dari Indonesia saya sarankan tahan dulu. Pada pembahasan saya mengenai Universal SSL ini sudah saya tuliskan kalau sistem SSL milik CloudFlare hanya didukung oleh separuh lebih perangkat yang online, sisanya akan mengalami error saat membuka halaman situs anda.

      Kecuali anda ingin membeli sertifikat SSL sendiri dan menginstallnya secara manual di website anda, maka masalah ini tidak akan muncul. Ini diakui memang batasan dari CloudFlare karena menggunakan SNI (Server Name Indication bukan Standar Nasional Indonesia 😀 ), kecuali anda memakai paket yang berbayar.

    • waduh.. kapan bisa makenya klo kaya gini, masa mau nunggu sampe semua orang indo pake modern browser, hahaha.. 😀

      klo yg IE 8 di XP sih kata saya udah banyak yg gak pake.. tp yg android ics kebawah ini yg masalah.. soalnya visitor saya 80% datang dari perangkat mobile.. 🙁

      but anyway, makasih penjelasannya mas

      Best Regard

    • Haha… pikiran saya juga serupa, pertama senang karena ada SSL gratis dan tinggal satu klik aktif, tapi setelahnya suram setelah membaca adanya syarat dan ketentuan berlaku seperti syarat undian. 😀

      Jadi mau tidak mau harus mengeluarkan uang, antara membeli sertifikat SSL sendiri atau menggunakan paket CloudFlare yang berbayar supaya tidak bermasalah tampilan websitenya saat dibuka oleh browser dan handphone jaman dinosaurus. 😛

    • Sekilas tampaknya lebih baik menggunakan StartSSL, walau nanti cuma bisa dipakai di domain utama dan subdomain www. Jangan lupa membutuhkan dedicated IP address juga kalau tidak ingin menggunakan SNI.

      Saya belum pernah membahasnya sih, mungkin dalam waktu dekat akan saya coba kembali, dulu sempat gagal soalnya dan jadi malas melanjutkan. 😀

  2. Hallo mas Chandra,

    Utekno kan pakai comodo, trus dnsnya cloudflare juga kan ya?

    itu bagaimana caranya, agar dsnnya tetep di cloudflare tapi Ssl nya pakai dari comodo, mohon info apakah ada perubahan di setingan cloudflare sebelumnya,, soalnya kan sebelumnya tidak pakai ssl

    Balas
    • Konten eksternal JS dan CSSnya bisa dibuka lewat HTTPS tidak mas? Kalau tidak ya jangan dipakai. Atau mas download filenya, upload ke hosting situs sendiri, dan edit referensi urlnya supaya pakai yang lokal saja.

Tulis komentar...