การทำ WordPress SSL ย้ายจาก HTTP ธรรมดา สู่ความปลอดภัยอีกระดับกับ HTTPS

ช่วงหลังได้ศึกษาเรื่อง SSL (Secure Sockets Layer) มาบ้างพอสมควร และหาวิธีที่จะใช้งาน แต่เนื่องจากมีค่าใช้จ่าย จึงได้ละไป จนมาพบกับ LetsEncrypt ที่มันฟรี!!! และยังติดตั้งไม่ยากผมเลยต้องจัด!! เพื่อความชิค! (ขอตัดบทไม่อธิบายเรื่องราวการติดตั้ง) เพราะในหัวข้อนี้จะแนะนำวิธีการ และขั้นตอนการเปลี่ยน WordPress ที่ใช้งานบน http ธรรมดาๆ เป็น WordPress https

Step 1: Get an SSL certificate

ขั้นที่ 1 ต้องมี SSL ใช้เสียก่อน – ขอข้ามวิธีการได้มาซึ่ง SSL key แล้วกันเน๊อะ เพราะมันอยู่ในขั้นตอนการติดตั้งใน LetsEncrypt อยู่แล้วสำหรับใครที่เช่า VPS ไว้ก็สามารถทำด้วยตัวเองได้เลย หาก hosting ไหนยังไม่มี ก็ย้ายเถอะครับ!

Step 2: Start with the Admin

ขั้นที่ 2 เริ่มต้นกับแอดมิน – ในระบบของ wordpress นั้น ส่วนที่สามารถใช้งานกับ https ได้ง่ายที่สุดคือ “/wp-admin” โดยเราไม่ต้องมานั่งแก้ไขเรื่อง mixed content warnings วิธีการเปิดใช้งาน หรือบังคับให้ส่วนของ admin เป็น https ทำได้โดยเข้าไปแก้ไขไฟล์ wp-config.php ให้เพิ่มคำสั่งด้านล่างนี้เข้าไป

define('FORCE_SSL_ADMIN', true);

และทดสอบได้โดยการ login เข้าจัดการระบบ จะเป็น https://yoursite.com/wp-admin/ แค่นี้เราก็มั่นใจได้เปาะนึงแล้วว่าเรามีการเชื่อมต่อที่ปลอดภัย!

Step 3: HTTPS working on the front end

ขั้นที่ 3 ทำยังไงให้ https ใช้งานได้ทุกหน้า – ในส่วนนี้มันจะมีรายละเอียดพอสมควร จะพยายามแยกออกเป็นข้อๆ เพื่อให้เข้าใจได้ง่ายขึ้น อันดับแรกที่ทำให้เข้าไปที่ Settings เพื่อตั้งค่า URL เปลี่ยนจาก http เป็น https ดังภาพ เพียงเท่านี้ ส่วนที่เป็น link หน้า home, post, page และ meta ของ wordpress ก็จะใช้งานเป็นแบบ https แล้ว

Step 4: Clear your Website’s Cache

ขั้นที่ 4 ล้างแคชให้สิ้นซาก – หลังจากตั้งค่าในส่วนของเว็บไซต์แล้ว อย่าลืม clear cache ออกทั้งหมด และ deactivate plugin ไปก่อน อาทิ WP Super Cache, W3 Total Cache, Gator Cache, Comet Cache และ WP Fastest Cache เป็นต้น (สองตัวสุดท้ายผมใช้อยู่ ตั้งค่าง่ายมากๆ)

Step 5: Mop up Mixed Content Warnings

ขั้นที่ 5 รูรั่วจากเว็บเลือดผสม – ถ้าเจอเครื่องหมายเตือนแบบในภาพนี้ และคลิกที่รูปกุญแจจะพบรายละเอียดการแจ้งเตือน “เนื้อหาผสม” (คือเราจะใช้ http ร่วมกับ https ไม่ได้!!)

image source: https://css-tricks.com/moving-to-https-on-wordpress/

ความหมายของเนื้อหาผสมคือ ในหน้าเว็บนั้นมีทั้ง http และ https ผสมกัน

image source: https://css-tricks.com/moving-to-https-on-wordpress/

วิธีแก้ไขคือไปตรวจสอบการนำเข้าไฟล์อาทิ <script> <link> <iframe> ให้เป็น url ที่ใช้ protocal https ทั้งหมด!

Step 6: Protocol Relative URLs! (or just relative URLs)

ขั้นที่ 6 การเชื่อมโยงที่ดี – ใช้ URL สัมพัทธ์ ที่ไม่อิงกับ protocal อาทิเช่น การใส่ url ของรูปภาพภายนอก หรือ script ภายนอก หากเราจะเป็นต้องใช้ source ภายนอกให้ใส่ดังนี้

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

หรือใส่ไฟล์ภาพแบบนี้

<img alt="image" src="/images/image.jpg" />

ซึ่งถ้าเกิดว่าใน post ของเรา มีการอ้างอิงภาพจากภายนอก หรือ ใส่ full url ให้กับรูปภาพภายในทั้งหมด คงเป็นเรื่องที่หนักหนาสาหัสแน่นอน กับการนั่งแก้ url ภาพทีละ post มาดูวิธีลัดในหัวข้อถัดไปดีกว่า

Step 7: Harder problem: images within legacy content

ขั้นที่ 7 งานหนักอยู่กับเนื้อหาภายใน post – อย่างที่อ้างอิงใน Step 6 นั้น เราจะเข้าไปแก้ไข URL ทั้งหมดได้ในคราวเดียวกันด้วยวิธีที่ต้องเข้าถึงฐานข้อมูลซักเล็กน้อย เราจะทำการ query ด้วย คำสั่งด้านล่างนี้ เพื่อ replace URL ภายใน post ทั้งหมด จาก http ให้เป็น https

* จุดสังเกตุในการใช้งาน code ด้านล่างนี้คือเมื่อเรา run query แล้วมีรายการที่ถูกแก้ไข

สำหรับใครที่ใช้ ” double quote ให้ใช้ code นี้

UPDATE wp_posts 
SET   post_content = ( Replace (post_content, 'src="//', 'src="https://') )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

ใครที่ใช้ ‘ single qoute ให้ใช้ code นี้

UPDATE wp_posts 
SET   post_content = ( Replace (post_content, "src='https://", "src='//") )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

และสุดท้ายแก้ใน postmeta เช่นเดียวกัน

UPDATE wp_postmeta 
SET meta_value=(REPLACE (meta_value, 'iframe src="https://','iframe src="//'));

Step 8: Start forcing HTTPS everywhere

ขั้นที่ 8 HTTPS ทุกที่ – บังคับให้เข้าเว็บเราด้วย HTTPS ตลอดเวลา ด้วย .htaccess ไฟล์ แบบตัวอย่างนี้ครับ

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteCond %{HTTPS} !=on
   RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>

ซึ่งในขั้น 7 – 8 ถ้าใครทำแล้วไม่ work หรือรู้สึกว่ามันยุ่งยากสำหรับฉัน ผมแนะนำ plugin แบบให้งานช้างๆ เป็นหนูตัวกระจ้อยไปเลยกับ Really Simple SSL

เมื่อ Activate แล้ว จะได้สถานะแบบนี้ ง่ายมากๆ

Step 9: Create new Google Webmaster Tools Site

ขั้นที่ 9 สร้างไซต์ใหม่ – เนื่องจาก GWT มองว่า HTTP กับ HTTPS เป็นคนละไซต์กัน แม้ว่ามันจะโดเมนเดียวกันก็ตาม!! หากเราใช้งาน Google Webmaster Tools อยู่ ก็ควรจะไปเพิ่มไซต์ใหม่ ถ้าไม่ได้ใช้ก็ผ่านไปได้เลย ไปที่ https://www.google.com/webmasters/tools/home

* ใน Bing Webmaster Tools ก็ทำเหมือนกันนะ! 


เพิ่ม URL เว็บไซต์เราเข้าไปใหม่ โดยใช้ https

Step 10: Submit Sitemaps to new GWT Site

ขั้นที่ 10 submit sitemaps เข้าไปใหม่ – คือเราทำทุกอย่างตามเดิมเหมือนตอนที่ได้เว็บใหม่เลยแล้วกัน เมื่อ submit sitemap แล้วก็เรียก bot ให้เข้ามาเก็บข้อมูลหน้าเว็บหน่อย ด้วยการ Fetch and Crawl

Step 11: Update Google Analytics Profile URL

ขั้นที่ 11 ปรับปรุงข้อมูลใน Google Analytics – โดยเข้าไปที่ site ของเรา เลือก Property Settings และแก้ไขตรง “Default URL” ให้เลือกเป็น https:// 

ขั้นที่ 12 เชื่อมลิงค์กับไซต์ใหม่ – ในหน้า Property Settings ให้เลื่อนลงไปด้านล่างสุด ในส่วนของ Search Console คลิก “Adjust Search Console” จากนั้นเลือก Edit และไปเลือก Site ใหม่ของเราเพื่อผูกกับ Google Analytics อีกครั้ง

Step 13: Update your Social Network

ขั้นที่ 13 อัพเดท Link URL บรรดาโซเชียลทั้งหลาย – เช่น Youtube Channel , facebook App เป็นต้น ถ้าใครไม่มีก็ข้ามไปไม่ต้องทำ อย่าง facebook app นั้นก็เปลี่ยนเพียงแค่ส่วนของ site url เท่านั้น

อย่าลืม upgrade CDN ให้เป็น SSL ด้วย

แหล่งอ้างอิง:

  1. https://css-tricks.com/moving-to-https-on-wordpress/
  2. http://www.wpbeginner.com/wp-tutorials/how-to-add-ssl-and-https-in-wordpress/
  3. https://woorkup.com/how-to-migrate-from-http-to-https-complete-tutorial