Memasang SSL Cloudflare dan mengatasi Insecure Content WordPress

CloudFlare merupakan sebuah Content Delivery Network (CDN) yang akan menampung data website anda sementara sebelum di tampilkan kepada pengunjung untuk meningkatkan kemanan dan kecepatan situs web. CloudFlare juga mempunyai beberapa Fitur menarik salah satunya SSL gratis tanpa ada batasan waktu (Aktif selamanya). saya akan membahas cara Memasang SSL Cloudflare dan mengatasi Insecure Content WordPress karena sering terjadi masalah ketika pemasangan cloudflare pada situs WordPress

banyak juga yang laporan malah tampilanya jadi error dan berantakan karena CSS tidak terload. Dan SSL nya tidak jadi ijo atau masih untrusted connection (SSL ERROR / https di silang merah).

Contoh seperti gambar di bawah ini jika di lihat di browser (Google Chrome + Console)

SSL Error

HTTPS Error

Pada posting kali ini saya akan membahas cara memperbaiki hal tersebut. Oke, ada beberapa hal yang perlu kita benahi dan utak atik sedemikian rupa. Ingat, kemungkinan ini justru membuat blog anda error, walaupun prosentasenya kecil. Tapi tetaplah berhati2.

Cara Memasang SSL Cloudflare dan mengatasi Insecure Content WordPress

Cloudflare juga punya plugin wordpress agar kita lebih mudah untuk menggunakannya. Untuk installasinya silahkan gunakan plugin dengan nama CloudFlare atau bisa klik link ini : https://wordpress.org/plugins/cloudflare/ .

Lalu buka plugin nya dan setting seperti contoh milik sucipto.net di bawah ini.

CloudFlare Domain Name : sucipto.net

CloudFlare API Key : ed1f4672349b46fxxx (untuk Cara Lihatnya Disini / Atau klik Get This? di halaman pluginnya)

CloudFlare API Email :  emailku@sucipto.net

Development Mode : Off

HTTPS Protocol Rewriting : On (wajib)

Klik tombol Update Options Jika udah selesai. Kemudian langkah selanjutnya …

Setting URL

Masuk ke Dashboard wordpres, Setting > General Ubah pada bagian berikut ini

Site Address (URL) : https://webanda.com  <== http:// di ganti menjadi https://

Lalu Pada WordPress Address (URL) tetap menggunakan http,

Setting Force SSL

jika domain kita sudah terpasang SSL, kita harus memberitahu kepada pengunjung bahwa situs kita harus di akses melalui  https atau protokol yang aman. Jadi salah satu caranya harus dengan force redirect atau di alihkan paksa bagi pengunjung yang mengakses melalui protokol http.

Pada umumnya pengaturan ini berada pada file konfigurasi .htaccess. Tapi untuk SSL dari cloudflare ini sedikit beda, karena sertifikat SSL tidak tertanam di server hosting kita. Untung saja di Cloudflare juga menyediakan fitur force redirect ke ssl, langkah langkahnya sebagai berikut.

Login ke dashboard CloudFlare, kemudian pada daftar website anda, pilih menu pengaturanPage Rules seperti gambar dibawah ini.

Setting Page rules cloudflare

Kemudian tambahkan parameter seperti contoh gambar dibawah ini.

Setting page rule

Setting seperti diatas dan klik tombol add rule untuk menyimpan.  Pastikan menambahkan setting diatas setelah permintaan SSL sudah di approve (biasanya 24 jam setelah menambahkan website).

Update: Setting wp-config.php

Setelah beberapa lama saya menggunakan SSL gratis dari cloudflare, masih terdapat kendala di bagian WP-Admin. Yakni masih ada error di bagian post (membuat/mengedit posting), disebabkan javascript tinymce tidak di load di protokol https. Setelah gugling kesana kemari akhirnya ketemu caranya, cukup menambahkan baris konfigurasi berikut ini di file wp-config.php

define(‘FORCE_SSL_ADMIN’, true);

define(‘FORCE_SSL_LOGIN’, true);

if ($_SERVER[‘HTTP_X_FORWARDED_PROTO’] == ‘https’){

       $_SERVER[‘HTTPS’]=‘on’;

}

Sebelum baris

/* That’s all, stop editing! Happy blogging. */

Sampai disini website kita sudah bisa diakses melalui ssl dengan aman. Dan juga pastikan saat posting gambar dari url hosting lain misal (blogger, photobucket, imgur, dll) harus yang sudah support https ya.