แก้ปัญหา Mixed Content หน้าเว็บ HTTPS

คุณติดตั้ง SSL Certificate แล้ว แต่เบราว์เซอร์กลับแสดงไอคอนกุญแจที่ไม่สมบูรณ์หรือมีสัญลักษณ์เตือน? นั่นคืออาการของ Mixed Content ปัญหาที่พบบ่อยที่สุดหลังย้ายเว็บจาก HTTP มาเป็น HTTPS บทความนี้อธิบายสาเหตุ วิธีตรวจสอบ และวิธีแก้ไขแบบครบจบ ทั้งสำหรับ WordPress และเว็บทั่วไป

Mixed Content คืออะไร

Mixed Content เกิดขึ้นเมื่อหน้าเว็บที่โหลดผ่าน HTTPS มี Resource บางอย่าง เช่น รูปภาพ, Script, CSS, หรือ iframe ที่ยังโหลดผ่าน HTTP (ไม่มี S) เบราว์เซอร์สมัยใหม่จะ Block หรือแจ้งเตือนผู้ใช้เพราะ HTTP Content บนหน้า HTTPS ถือเป็นความเสี่ยงด้านความปลอดภัย

Mixed Content มี 2 ประเภท:

วิธีตรวจสอบ Mixed Content

1. Browser Developer Tools

วิธีที่เร็วที่สุดคือกด F12 → Console แล้วดูข้อความ Warning ที่ขึ้นต้นด้วย "Mixed Content" หรือ "Blocked loading mixed-content" ซึ่งจะแสดง URL ของ Resource ที่เป็นปัญหา

2. เครื่องมือออนไลน์

ใช้เครื่องมือเช่น Why No Padlock (whynopadlock.com) หรือ JitBit SSL Check ที่สแกนหน้าเว็บและแสดง URL ของ Mixed Content ทั้งหมดในคลิกเดียว

3. ค้นหาใน Database (WordPress)

ค้นหา URL แบบ HTTP ใน Database ของ WordPress โดยตรง:

SELECT * FROM wp_posts WHERE post_content LIKE '%http://%';

วิธีแก้ Mixed Content บน WordPress

วิธีที่ 1: Plugin Really Simple SSL

วิธีที่ง่ายที่สุดสำหรับ WordPress คือติดตั้ง Plugin Really Simple SSL ซึ่งแก้ไข Mixed Content อัตโนมัติโดย:

วิธีที่ 2: อัพเดต URL ใน WordPress Settings

ไปที่ Settings → General แล้วเปลี่ยน WordPress Address และ Site Address จาก http:// เป็น https://

วิธีที่ 3: แก้ผ่าน Database ด้วย Search-Replace

ใช้ Plugin Better Search Replace หรือ WP-CLI เพื่อค้นหา http://yourdomain.com แล้วแทนที่ด้วย https://yourdomain.com ทั้ง Database:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --all-tables

คำเตือน: สำรองข้อมูล Database ก่อนทำ Search-Replace เสมอ การแก้ไขที่ผิดพลาดอาจทำให้เว็บใช้งานไม่ได้

วิธีแก้ Mixed Content บนเว็บทั่วไป (ไม่ใช่ WordPress)

1. ใช้ Protocol-Relative URLs

แทนที่ URL แบบ http:// ด้วย // เพื่อให้เบราว์เซอร์เลือก Protocol เอง:

<!-- เดิม --> <script src="http://cdn.example.com/library.js"></script> <!-- แก้ไขเป็น --> <script src="//cdn.example.com/library.js"></script>

2. Content Security Policy Header ระดับ Upgrade

เพิ่ม CSP Header ใน .htaccess เพื่อให้เบราว์เซอร์ Upgrade HTTP เป็น HTTPS อัตโนมัติ:

Header always set Content-Security-Policy "upgrade-insecure-requests"

หรือเพิ่มใน HTML head:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

3. แก้ไข URL ใน Source Code โดยตรง

หา URL ที่ยัง http:// ใน HTML, CSS, JS แล้วเปลี่ยนเป็น https:// หรือ URL แบบ Relative ใช้ grep เพื่อค้นหา:

grep -r "http://" /var/www/html/ --include="*.html" --include="*.php"

ป้องกัน Mixed Content ในอนาคต

ตั้งค่า HSTS เพื่อป้องกัน Mixed Content ระยะยาว

HTTP Strict Transport Security (HSTS) คือ Header ที่บอกเบราว์เซอร์ว่าเว็บไซต์นี้ต้องใช้ HTTPS เสมอ เมื่อเบราว์เซอร์รับ HSTS Header แล้ว จะจำไว้ตามระยะเวลาที่กำหนด และจะ Upgrade ทุก HTTP Request เป็น HTTPS โดยอัตโนมัติโดยไม่ต้องอาศัย Redirect จากเซิร์ฟเวอร์

วิธีเพิ่ม HSTS Header ใน .htaccess:

Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

ค่าที่ควรรู้ในแต่ละ Directive:

คำเตือน: ก่อนเพิ่ม HSTS ต้องมั่นใจว่า HTTPS ทุก URL บนเว็บทำงานได้สมบูรณ์ เพราะ HSTS Header จะทำให้เบราว์เซอร์ปฏิเสธ HTTP ทั้งหมดในระยะเวลา max-age ถ้า SSL พังหลังจากนี้ผู้ใช้จะเข้าไม่ได้เลยจนกว่า max-age จะหมด

ตรวจสอบ Mixed Content ด้วยเครื่องมือขั้นสูง

นอกจาก Developer Tools และเครื่องมือออนไลน์ทั่วไป ยังมีวิธีตรวจสอบที่ครอบคลุมกว่าสำหรับเว็บที่มีหลาย URL:

ใช้ Screaming Frog หรือ Sitebulb

โปรแกรม Crawler เหล่านี้สามารถ Crawl ทุก URL บนเว็บและตรวจหา Mixed Content ได้อัตโนมัติ รองรับ Export รายการ URL ที่มีปัญหาออกมาเป็น CSV เพื่อแก้ไขเป็น Batch

ตรวจสอบผ่าน Google Search Console

Google Search Console แจ้งเตือน Security Issues รวมถึง Mixed Content ที่ Google Bot ตรวจพบระหว่างการ Crawl ไปที่ Security & Manual Actions → Security Issues เพื่อดูรายการหน้าที่มีปัญหา

ตรวจ Source Code ด้วย grep บน Server

ถ้ามี SSH Access สามารถค้นหา URL แบบ HTTP ได้รวดเร็วกว่าด้วย grep:

grep -rn "src=[\"']http://" /var/www/html/ --include="*.php" --include="*.html" --include="*.js" grep -rn "href=[\"']http://" /var/www/html/ --include="*.php" --include="*.html" --include="*.css"

แก้ Mixed Content บน WooCommerce และ E-Commerce

ร้านค้าออนไลน์ที่ใช้ WooCommerce มักพบปัญหา Mixed Content จากรูปภาพสินค้าหรือ Script ของ Payment Gateway ที่ยังเป็น HTTP ซึ่งอันตรายกว่าปกติเพราะเกิดขึ้นในหน้าที่รับข้อมูลการชำระเงิน การแก้ไขใน WooCommerce มีขั้นตอนเพิ่มเติมดังนี้:

ใช้ WP-CLI แก้ URL ทั้ง Database

สำหรับ WooCommerce ที่มีสินค้าหลายร้อยรายการ การใช้ WP-CLI จะเร็วที่สุด:

wp search-replace 'http://yourdomain.com/wp-content/uploads' 'https://yourdomain.com/wp-content/uploads' --all-tables --precise

ใช้ --precise เพื่อ Replace แบบ Regex-safe ไม่ให้ URL แบบ Serialized Data ใน WordPress พังหลัง Replace

กรณีพิเศษ: Mixed Content จาก Third-party Plugins

บ่อยครั้งที่ Mixed Content ไม่ได้มาจาก Content ของเว็บเอง แต่มาจาก Plugin ที่โหลด External Resource ผ่าน HTTP สาเหตุหลักๆ คือ Plugin เก่าที่ Developer ไม่ได้อัพเดตให้รองรับ HTTPS หรือ Plugin ที่ Hard-code URL ของ External Library ที่ยังเป็น HTTP

วิธีระบุว่า Plugin ตัวไหนเป็นต้นเหตุ:

  1. เปิด Developer Tools → Network Tab แล้ว Filter ด้วย Mixed-Content หรือดูที่ Console
  2. ดู URL ของ Resource ที่เป็น HTTP แล้วเทียบกับ Plugin ที่ติดตั้งไว้ (โดยมากจะมีชื่อ Plugin หรือ Library ปรากฏใน URL)
  3. ปิด Plugin ทีละตัวแล้วรีเฟรชหน้า ดูว่า Mixed Content หายไปหรือเปล่า
  4. ถ้าพบ Plugin ที่เป็นต้นเหตุ ให้ติดต่อ Developer เพื่อขอ Version ที่รองรับ HTTPS หรือมองหา Plugin ทดแทน

Plugin ที่ Abandon แล้ว: ถ้า Plugin ไม่ได้รับการอัพเดตมานานเกิน 2 ปีและมี Mixed Content ควรพิจารณาเปลี่ยนไปใช้ Plugin ทางเลือกที่ Active Development มากกว่า เพราะ Plugin เก่าอาจมีปัญหาความปลอดภัยอื่นด้วย

Mixed Content กับ Core Web Vitals และ SEO

Mixed Content ไม่ใช่แค่ปัญหาด้านความปลอดภัย แต่ส่งผลกระทบต่อ Core Web Vitals และ SEO โดยตรง เบราว์เซอร์ที่ Block Mixed Active Content ทำให้ Script บางตัวไม่ทำงาน ส่งผลต่อ Interactivity ที่เป็นส่วนหนึ่งของ Interaction to Next Paint (INP) ซึ่ง Google ใช้เป็น Ranking Signal

ประเภท Mixed Content ผลต่อ Browser ผลต่อ SEO
Mixed Passive (รูปภาพ, วิดีโอ) แสดง Warning ใน Console แต่ยังโหลด ผลกระทบน้อย แต่ Padlock ไม่สมบูรณ์ลด Trust
Mixed Active (Script, CSS, iframe) Block ไม่โหลด ฟีเจอร์เว็บพัง กระทบ CWV (INP/LCP) และ User Signals อย่างมาก
Mixed Content ใน iframe Block ทั้ง iframe CLS เพิ่มขึ้นถ้า iframe ไม่โหลด Layout shift

นอกจากนี้ Google ยัง Index เนื้อหาผ่าน HTTPS เป็นหลัก ถ้าหน้าแสดง Mixed Content Warning อาจทำให้ Google Bot ประเมิน Signal ด้านความน่าเชื่อถือของหน้าลดลง ซึ่งส่งผลกระทบต่อ E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) ในระยะยาว

เช็คลิสต์สรุปก่อนถือว่า Mixed Content แก้เสร็จแล้ว

ก่อนปิดงาน Mixed Content ควรตรวจสอบตามรายการนี้ให้ครบ เพื่อมั่นใจว่าปัญหาถูกแก้อย่างถาวรและไม่เกิดซ้ำ:

  1. ไอคอนกุญแจใน Address Bar แสดงสีเขียวหรือกุญแจปิดสมบูรณ์โดยไม่มีสัญลักษณ์เตือน
  2. Developer Tools Console ไม่มี Warning หรือ Error เกี่ยวกับ Mixed Content
  3. ตรวจสอบทุกหน้าหลักของเว็บ ไม่ใช่แค่หน้าแรก เพราะแต่ละหน้าอาจมี Mixed Content ของตัวเอง
  4. เช็ค WordPress Settings → General ว่า URL ทั้งสองช่องเปลี่ยนเป็น HTTPS แล้ว
  5. รัน Search-Replace ใน Database และตรวจว่าไม่มี http://yourdomain.com เหลืออยู่
  6. ทดสอบ Online Checker เช่น Why No Padlock อีกครั้งหลังแก้ไขทุกขั้นตอน
  7. ตรวจสอบว่า HSTS Header ถูกส่งออกไปแล้ว ด้วย curl -I https://yourdomain.com | grep Strict
  8. ตรวจ Google Search Console หลังจาก 3–7 วัน ว่า Security Issues หมดหรือยัง

การแก้ Mixed Content อย่างครบวงจรไม่ใช่แค่การแก้ URL ที่ขึ้น Warning แต่ต้องป้องกันไม่ให้เกิดใหม่ด้วย การตั้ง HSTS, ใช้ URL แบบ Protocol-Relative, และตรวจสอบอย่างสม่ำเสมอเป็นขั้นตอนที่ขาดไม่ได้ในการดูแลเว็บบน HTTPS ให้ปลอดภัยตลอดระยะยาว

AsiaGB Hosting รองรับ SSL Let's Encrypt ฟรีทุกแผน และรองรับ HTTPS ได้ทันทีไม่ต้องตั้งค่าพิเศษ หลังติดตั้ง SSL แล้วใช้คู่มือนี้แก้ Mixed Content ที่อาจค้างอยู่จากก่อนย้าย

Hosting พร้อม SSL ฟรีทุกแผน

Let's Encrypt SSL ฟรี ติดตั้งง่าย พร้อมใช้ได้ทันที เริ่มต้น 500 บาท/ปี SSD Uptime 99%

ดูแพ็กเกจ Hosting