การรองรับ HTTPS สำหรับเว็บไซต์เป็นขั้นตอนสำคัญในการปกป้องเว็บไซต์และผู้ใช้จากการโจมตี แต่เนื้อหาผสมอาจทำให้การป้องกันนั้นไม่มีประโยชน์ เบราว์เซอร์จะบล็อกเนื้อหาผสมที่ไม่ปลอดภัยได้มากขึ้น ตามที่อธิบายไว้ในเนื้อหาผสมคืออะไร
ในคู่มือนี้ เราจะสาธิตเทคนิคและเครื่องมือในการแก้ไขปัญหาเนื้อหาผสมที่มีอยู่และป้องกันไม่ให้เกิดปัญหาใหม่
การค้นหาเนื้อหาผสมโดยไปที่เว็บไซต์ของคุณ
เมื่อไปที่หน้า HTTPS ใน Google Chrome เบราว์เซอร์จะแจ้งเตือนคุณเกี่ยวกับเนื้อหาผสมโดยเป็นข้อผิดพลาดและคำเตือนในคอนโซล JavaScript
ในส่วนเนื้อหาผสมคืออะไร คุณจะเห็นตัวอย่างต่างๆ มากมายและดูวิธีรายงานปัญหาได้ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ตัวอย่างของเนื้อหาผสมแบบแพสซีฟจะแสดงคำเตือนต่อไปนี้
หากเบราว์เซอร์พบเนื้อหาที่ URL ของ https เบราว์เซอร์จะอัปเกรดเนื้อหาโดยอัตโนมัติและแสดงข้อความ
เนื้อหาผสมที่ใช้งานอยู่จะถูกบล็อกและแสดงคำเตือน
หากพบคำเตือนเช่นนี้สำหรับ URL http:// ในเว็บไซต์ คุณจะต้องแก้ไขในแหล่งที่มาของเว็บไซต์
คุณควรจดรายการ URL เหล่านี้ไว้พร้อมกับหน้าที่คุณพบ URL เหล่านี้ไว้ใช้เมื่อคุณแก้ไขปัญหา
การค้นหาเนื้อหาผสมในเว็บไซต์ของคุณ
คุณค้นหาเนื้อหาผสมได้โดยตรงในซอร์สโค้ด
ค้นหา http:// ในแหล่งที่มาและมองหาแท็กที่มีแอตทริบิวต์ HTTP URL
โปรดทราบว่าการมี http:// ในแอตทริบิวต์ href ของแท็ก Anchor (<a>) มักไม่ใช่ปัญหาด้านเนื้อหาผสม โดยจะมีข้อยกเว้นที่สำคัญบางประการซึ่งเราจะกล่าวถึงในภายหลัง
หากเว็บไซต์เผยแพร่โดยใช้ระบบจัดการเนื้อหา อาจเป็นไปได้ว่าจะมีการแทรกลิงก์ไปยัง URL ที่ไม่ปลอดภัยเมื่อเผยแพร่หน้าเว็บ ตัวอย่างเช่น รูปภาพอาจรวมอยู่ใน URL แบบเต็มแทนที่จะเป็นเส้นทางแบบสัมพัทธ์ คุณจะต้องหาและแก้ไขปัญหาเหล่านี้ในเนื้อหา CMS
การแก้ไขเนื้อหาผสม
เมื่อคุณพบเนื้อหาผสมในแหล่งที่มาของไซต์ คุณสามารถทำตามขั้นตอนเหล่านี้เพื่อแก้ไขปัญหา
หากคุณได้รับข้อความในคอนโซลว่าคำขอทรัพยากรได้รับการอัปเกรดจาก HTTP เป็น HTTPS โดยอัตโนมัติแล้ว คุณสามารถเปลี่ยน URL http:// สำหรับทรัพยากรในโค้ดเป็น https:// ได้อย่างปลอดภัย
นอกจากนี้คุณยังตรวจสอบได้ว่าทรัพยากรพร้อมใช้งานอย่างปลอดภัยหรือไม่โดยเปลี่ยน http:// เป็น https:// ในแถบ URL ของเบราว์เซอร์และพยายามเปิด URL ในแท็บเบราว์เซอร์
หากทรัพยากรไม่พร้อมใช้งานผ่าน https:// คุณควรพิจารณาตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
- รวมทรัพยากรจากโฮสต์อื่น หากมี
- ดาวน์โหลดและโฮสต์เนื้อหาไว้บนเว็บไซต์ของคุณโดยตรงหากได้รับอนุญาตตามกฎหมายให้ทำเช่นนั้น
- ยกเว้นทรัพยากรจากเว็บไซต์ทั้งหมด
เมื่อแก้ไขปัญหาแล้ว ให้ดูหน้าเว็บที่คุณพบข้อผิดพลาดในตอนแรกและยืนยันว่าข้อผิดพลาดนั้นไม่ได้ปรากฏขึ้นอีกต่อไป
ระวังการใช้แท็กที่ไม่เป็นไปตามมาตรฐาน
ระวังการใช้แท็กที่ไม่เป็นไปตามมาตรฐานในเว็บไซต์
ตัวอย่างเช่น URL ของแท็ก Anchor (<a>) ไม่ส่งผลให้เกิดข้อผิดพลาดเกี่ยวกับเนื้อหาผสม
เนื่องจากทำให้เบราว์เซอร์ไปยังหน้าใหม่
ซึ่งหมายความว่ามักไม่จำเป็นต้องแก้ไข
อย่างไรก็ตาม สคริปต์ของแกลเลอรีรูปภาพบางสคริปต์จะลบล้างฟังก์ชันการทำงานของแท็ก <a> และโหลดทรัพยากร HTTP ที่ระบุโดยแอตทริบิวต์ href ลงในการแสดงไลท์บ็อกซ์ในหน้าเว็บ ซึ่งทำให้เกิดปัญหาเกี่ยวกับเนื้อหาผสม
จัดการเนื้อหาผสมในวงกว้าง
ขั้นตอนที่ต้องทำด้วยตนเองด้านบนทำงานได้ดีสำหรับเว็บไซต์ขนาดเล็ก แต่สำหรับเว็บไซต์ขนาดใหญ่หรือเว็บไซต์ที่มีทีมพัฒนาแยกกันอยู่มากมาย การติดตามเนื้อหาทั้งหมดที่โหลดอาจเป็นเรื่องยาก เพื่อช่วยในเรื่องนี้ คุณสามารถใช้นโยบายรักษาความปลอดภัยเนื้อหาเพื่อสั่งให้เบราว์เซอร์แจ้งเตือนคุณเกี่ยวกับเนื้อหาผสมและตรวจสอบว่าหน้าเว็บของคุณไม่โหลดทรัพยากรที่ไม่ปลอดภัยโดยไม่คาดคิด
นโยบายรักษาความปลอดภัยเนื้อหา
นโยบายรักษาความปลอดภัยเนื้อหา (CSP) คือฟีเจอร์เบราว์เซอร์อเนกประสงค์ที่คุณใช้จัดการเนื้อหาผสมจำนวนมากได้ กลไกการรายงาน CSP สามารถใช้เพื่อติดตามเนื้อหาผสมในเว็บไซต์ และแสดงนโยบายการบังคับใช้เพื่อปกป้องผู้ใช้โดยการอัปเกรดหรือบล็อกเนื้อหาผสม
คุณเปิดใช้ฟีเจอร์เหล่านี้สำหรับหน้าเว็บได้โดยใส่ส่วนหัว Content-Security-Policy หรือ Content-Security-Policy-Report-Only ในการตอบกลับที่ส่งจากเซิร์ฟเวอร์
นอกจากนี้ คุณยังตั้งค่า Content-Security-Policy
(แต่ไม่ใช่ Content-Security-Policy-Report-Only) ได้โดยใช้แท็ก <meta> ในส่วน <head> ของหน้า
การค้นหาเนื้อหาผสมที่มีนโยบายรักษาความปลอดภัยเนื้อหา
คุณใช้นโยบายรักษาความปลอดภัยเนื้อหาเพื่อรวบรวมรายงานเนื้อหาผสมในเว็บไซต์ได้
หากต้องการเปิดใช้ฟีเจอร์นี้ ให้ตั้งค่าคำสั่ง Content-Security-Policy-Report-Only โดยเพิ่มเป็นส่วนหัวการตอบกลับสำหรับเว็บไซต์
ส่วนหัวการตอบกลับ:
Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint
เมื่อใดก็ตามที่ผู้ใช้เข้าชมหน้าเว็บในเว็บไซต์ เบราว์เซอร์จะส่งรายงานรูปแบบ JSON เกี่ยวกับสิ่งที่ละเมิดนโยบายความปลอดภัยเนื้อหาไปยัง https://example.com/reportingEndpoint
ในกรณีนี้ เมื่อใดก็ตามที่ทรัพยากรย่อยโหลดผ่าน HTTP ระบบจะส่งรายงาน
รายงานเหล่านี้ประกอบด้วย URL ของหน้าที่มีการละเมิดนโยบายและ URL ทรัพยากรย่อยที่ละเมิดนโยบาย
หากกำหนดค่าปลายทางการรายงานให้บันทึกรายงานเหล่านี้ คุณจะติดตามเนื้อหาผสมในเว็บไซต์ได้โดยไม่ต้องไปที่หน้าเว็บแต่ละหน้าด้วยตัวเอง
ข้อควรระวัง 2 ประการคือ
- ผู้ใช้ต้องเข้าชมหน้าเว็บในเบราว์เซอร์ที่เข้าใจส่วนหัว CSP ซึ่งจะเป็นเช่นนั้นสำหรับเบราว์เซอร์ที่ทันสมัยส่วนใหญ่
- คุณจะได้รับรายงานเฉพาะหน้าเว็บที่ผู้ใช้ของคุณเข้าชมเท่านั้น ดังนั้นหากคุณมีหน้าเว็บที่มีการเข้าชมไม่มาก อาจใช้เวลาสักระยะ กว่าที่คุณจะได้รับรายงานทั้งเว็บไซต์
คำแนะนำเกี่ยวกับนโยบายรักษาความปลอดภัยเนื้อหามีข้อมูลเพิ่มเติมและตัวอย่างปลายทาง
ทางเลือกอื่นๆ ในการรายงานด้วย CSP
หากแพลตฟอร์มอย่าง Blogger โฮสต์เว็บไซต์ให้คุณ คุณอาจไม่มีสิทธิ์เข้าถึงเพื่อแก้ไขส่วนหัวและเพิ่ม CSP อีกทางเลือกหนึ่งที่ทำได้คือใช้โปรแกรมรวบรวมข้อมูลเว็บไซต์เพื่อค้นหาปัญหาในเว็บไซต์ให้คุณ เช่น HTTPSChecker หรือการสแกนเนื้อหาผสม
การอัปเกรดคำขอที่ไม่ปลอดภัย
เบราว์เซอร์จะเริ่มอัปเกรดและบล็อกคำขอที่ไม่ปลอดภัย คุณสามารถใช้คำสั่ง CSP เพื่อบังคับให้อัปเกรดหรือบล็อกเนื้อหาเหล่านี้โดยอัตโนมัติได้
คําสั่ง CSP ของ upgrade-insecure-requests จะสั่งให้เบราว์เซอร์อัปเกรด URL ที่ไม่ปลอดภัยก่อนส่งคําขอเครือข่าย
ตัวอย่างเช่น หากหน้าเว็บมีแท็กรูปภาพที่มี HTTP URL เช่น <img src="http://example.com/image.jpg">
เบราว์เซอร์จะส่งคำขอที่ปลอดภัยสำหรับ https://example.com/image.jpg แทน ซึ่งจะบันทึกผู้ใช้จากเนื้อหาผสม
คุณเปิดใช้ลักษณะการทำงานนี้ได้โดยส่งส่วนหัว Content-Security-Policy พร้อมคำสั่งนี้
Content-Security-Policy: upgrade-insecure-requests
หรือฝังคำสั่งเดียวกันนั้นในบรรทัดในส่วน <head> ของเอกสารโดยใช้องค์ประกอบ <meta> ดังนี้
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
เช่นเดียวกับการอัปเกรดอัตโนมัติของเบราว์เซอร์ หากทรัพยากรไม่พร้อมใช้งานผ่าน HTTPS คำขอที่อัปเกรดจะล้มเหลวและไม่มีการโหลดทรัพยากร
การดำเนินการนี้จะรักษาความปลอดภัยของหน้าเว็บ คำสั่ง upgrade-insecure-requests จะทำงานมากกว่าการอัปเกรดเบราว์เซอร์อัตโนมัติ โดยพยายามอัปเกรดคำขอที่เบราว์เซอร์ยังไม่ได้ทำในปัจจุบัน
คำสั่ง upgrade-insecure-requests จะเรียงต่อกันเป็นเอกสาร <iframe> ฉบับ
เพื่อให้มั่นใจว่าทั้งหน้าได้รับการปกป้อง