Mixed Content คืออะไร
Mixed Content เกิดเมื่อหน้าเว็บโหลดผ่าน HTTPS แต่ยังมีทรัพยากรบางอย่าง (รูป, CSS, JS, Font, iframe) ที่ถูกเรียกผ่าน HTTP เบราว์เซอร์มองว่า "ปลอดภัยไม่สมบูรณ์" จึงขึ้นกุญแจมีเครื่องหมายเตือน หรือบล็อกทรัพยากรนั้นทิ้ง ทำให้เว็บแสดงผลเพี้ยน
- Mixed Passive Content — รูป, วิดีโอ, เสียง ที่โหลดผ่าน HTTP เบราว์เซอร์มักยอมแสดงแต่เตือน
- Mixed Active Content — Script, CSS, iframe ที่โหลดผ่าน HTTP เบราว์เซอร์มักบล็อกทิ้งเพื่อความปลอดภัย
หาว่าไฟล์ไหนเป็นต้นเหตุ
เปิดหน้าเว็บ → กด F12 เปิด Developer Tools → แท็บ Console จะเห็นข้อความเตือนสีเหลือง/แดง เช่น
Mixed Content: The page at 'https://yourdomain.com/' was loaded
over HTTPS, but requested an insecure image
'http://yourdomain.com/wp-content/uploads/logo.png'.
This content should also be served over HTTPS.บรรทัดนี้บอกตรงๆ ว่าไฟล์ไหน (logo.png) ถูกเรียกผ่าน http:// — นั่นคือสิ่งที่ต้องแก้
วิธีแก้บน WordPress (ง่ายที่สุด)
วิธีที่ 1: ปลั๊กอิน Really Simple SSL
ติดตั้งและเปิดใช้ปลั๊กอิน "Really Simple SSL" ปลั๊กอินจะแก้ URL ภายในให้เป็น HTTPS อัตโนมัติและเพิ่ม Redirect ให้ เหมาะกับมือใหม่ที่ไม่อยากแตะฐานข้อมูล
วิธีที่ 2: แก้ Site URL
ไปที่ Settings → General เปลี่ยน "WordPress Address" และ "Site Address" จาก http:// เป็น https:// แล้ว Save
วิธีที่ 3: Search & Replace ในฐานข้อมูล
URL เก่าที่ฝังในเนื้อหา/Widget ต้องแก้ด้วย ใช้ปลั๊กอิน "Better Search Replace" แทนค่า http://yourdomain.com เป็น https://yourdomain.com ทั้งฐานข้อมูล (เลือก "Run as dry run" ดูก่อนจริง)
# แก้ผ่าน WP-CLI (ถ้า Hosting รองรับใน Terminal cPanel)
wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --dry-run
# ตรวจผลแล้วค่อยรันจริงโดยตัด --dry-run ออกวิธีแก้บนเว็บ HTML ธรรมดา
แก้ในโค้ดให้ใช้ Protocol-relative หรือ HTTPS ตรงๆ
<!-- ❌ ผิด: บังคับ http -->
<img src="http://yourdomain.com/logo.png">
<script src="http://cdn.example.com/lib.js"></script>
<!-- ✅ ถูก: ใช้ https ตรงๆ -->
<img src="https://yourdomain.com/logo.png">
<script src="https://cdn.example.com/lib.js"></script>
<!-- ✅ หรือใช้ relative path (ดีที่สุดสำหรับไฟล์ในเว็บ) -->
<img src="/logo.png">บังคับ HTTPS ด้วย .htaccess และ CSP
เพิ่ม Redirect ใน .htaccess เพื่อบังคับทุกคนเข้า HTTPS และใช้ Header ช่วยอัปเกรดทรัพยากรเก่าอัตโนมัติ
# .htaccess — บังคับ HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
# อัปเกรด request ที่เป็น http ให้เป็น https อัตโนมัติ
Header always set Content-Security-Policy "upgrade-insecure-requests"ดูวิธีบังคับ HTTPS แบบละเอียดเพิ่มที่ บังคับ HTTPS ด้วย .htaccess
ตรวจสอบว่า Mixed Content หายแล้ว
# 1. เปิด Console (F12) แล้วโหลดหน้าใหม่ — ต้องไม่มีคำว่า "Mixed Content"
# 2. ตรวจกุญแจ — ต้องเป็นกุญแจปิดสมบูรณ์ ไม่มีเครื่องหมายเตือน
# 3. ตรวจด้วย curl ว่าไม่มี http:// หลงเหลือใน HTML
curl -s https://yourdomain.com | grep -o 'http://[^"]*' | sort -u
# ควรไม่คืนค่า URL ภายในเว็บตัวเอง (ลิงก์ http ของเว็บอื่นไม่นับ)
# 4. ล้าง Cache ทั้งเบราว์เซอร์และปลั๊กอิน Cache แล้วทดสอบใหม่แก้ปัญหาที่พบบ่อย
แก้แล้วแต่ Console ยังขึ้น Mixed Content
มักเป็น URL ที่ฝังในฐานข้อมูล (Widget, Page Builder, Custom Field) ที่ Search & Replace ไม่ครอบคลุม ให้ดูใน Console ว่าไฟล์ไหน แล้วตามไปแก้ที่ต้นทางโดยตรง
รูปบางรูปหายไปเลยหลังบังคับ HTTPS
เป็น Active/Passive content ที่ถูกบล็อก ตรวจว่าไฟล์นั้นมีเวอร์ชัน HTTPS จริงหรือไม่ ถ้า CDN ภายนอกไม่รองรับ HTTPS ให้เปลี่ยนไปใช้ CDN อื่นหรือโหลดไฟล์มาเก็บในเว็บตัวเอง
เว็บ Redirect วนไม่สิ้นสุด (Too many redirects)
เกิดเมื่อตั้ง Redirect ซ้ำทั้งใน .htaccess และปลั๊กอิน หรือ Cloudflare ตั้ง SSL เป็น Flexible ให้เปลี่ยน Cloudflare SSL เป็น "Full" และตัด Redirect ที่ซ้ำออกให้เหลือที่เดียว
iframe หรือ Google Maps ไม่แสดง
iframe ที่ฝัง http:// จะถูกบล็อกเด็ดขาด เปลี่ยน src ของ iframe ให้เป็น https:// โดยเฉพาะ Embed Code เก่าของ YouTube/Maps ที่ยังเป็น http
คำถามที่พบบ่อย
Q: Mixed Content กระทบ SEO ไหม?
A: กระทบทางอ้อม Google ชอบเว็บ HTTPS สมบูรณ์ และผู้ใช้ที่เห็นคำเตือน "ไม่ปลอดภัย" มักกดออก ทำให้ Bounce Rate สูง การแก้ให้สมบูรณ์ช่วยทั้งความน่าเชื่อถือและสัญญาณ SEO
Q: ต้องแก้ทุกหน้าด้วยมือไหม?
A: ไม่ บน WordPress ใช้ Search & Replace ทั้งฐานข้อมูลครั้งเดียวก็ครอบคลุมทุกหน้า ส่วนเว็บ HTML ใช้ Find & Replace ในโปรแกรมแก้โค้ดทั้งโปรเจกต์
Q: ติด SSL ฟรีของ cPanel ใช้แก้ Mixed Content ได้เลยไหม?
A: SSL ทำหน้าที่เข้ารหัสการเชื่อมต่อ แต่ Mixed Content เป็นเรื่องของ URL ในเนื้อหาเว็บ ต้องแก้ URL แยกต่างหาก ดูการติด SSL ฟรีที่ AutoSSL ใน cPanel