การรองรับ 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 ของทรัพยากรย่อยที่ละเมิดนโยบาย
หากคุณกำหนดค่าปลายทางการรายงานให้บันทึกรายงานเหล่านี้
คุณสามารถติดตามเนื้อหาผสมในเว็บไซต์ได้โดยไม่ต้องไปที่หน้าเว็บแต่ละหน้าด้วยตัวเอง
ข้อควรระวังสองประการคือ
- ผู้ใช้ต้องเข้าชมหน้าเว็บของคุณในเบราว์เซอร์ที่เข้าใจส่วนหัว CSP กรณีนี้เกิดขึ้นกับเบราว์เซอร์รุ่นใหม่ๆ ส่วนใหญ่
- คุณจะได้รับรายงานสำหรับหน้าที่ผู้ใช้เข้าชมเท่านั้น ดังนั้น หากคุณมีหน้าเว็บที่ไม่ได้รับการเข้าชมมากนัก อาจใช้เวลาสักระยะก่อนที่คุณจะได้รับรายงานสำหรับทั้งเว็บไซต์
นโยบายรักษาความปลอดภัยเนื้อหา จะมีข้อมูลเพิ่มเติมและตัวอย่างปลายทาง
ทางเลือกอื่นแทนการรายงานโดยใช้ CSP
หากเว็บไซต์โฮสต์ให้คุณโดยแพลตฟอร์ม เช่น Blogger คุณอาจไม่มีสิทธิ์เข้าถึงเพื่อแก้ไขส่วนหัวและเพิ่ม CSP แต่อีกทางเลือกหนึ่งที่ใช้ได้คือการใช้ Crawler เว็บไซต์เพื่อค้นหาปัญหาทั่วเว็บไซต์ให้คุณ เช่น HTTPSChecker หรือ การสแกนเนื้อหาผสม
การอัปเกรดคำขอที่ไม่ปลอดภัย
เบราว์เซอร์เริ่มอัปเกรดและบล็อกคำขอที่ไม่ปลอดภัย คุณใช้คำสั่ง CSP เพื่อบังคับให้อัปเกรดหรือบล็อกเนื้อหาเหล่านี้โดยอัตโนมัติได้
upgrade-insecure-requests
คำสั่ง CSP สั่งให้เบราว์เซอร์อัปเกรด 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> รายการ
เพื่อให้มั่นใจว่าหน้าเว็บทั้งหน้ามีการป้องกัน