การแก้ไขเนื้อหาผสม

Jo-el van Bergen
Jo-el van Bergen
X
Rachel Andrew

การรองรับ HTTPS สำหรับเว็บไซต์เป็นขั้นตอนสำคัญในการปกป้องเว็บไซต์และผู้ใช้จากการโจมตี แต่เนื้อหาผสมอาจทำให้การป้องกันนั้นไร้ประโยชน์ เนื้อหาผสมที่ไม่ปลอดภัยมากขึ้นจะถูกบล็อกโดยเบราว์เซอร์ ตามที่อธิบายไว้ในเนื้อหาผสมคืออะไร

ในคู่มือนี้เราจะสาธิตเทคนิคและเครื่องมือในการแก้ไขปัญหาเนื้อหาผสมที่มีอยู่ และป้องกันไม่ให้เกิดปัญหาใหม่ๆ ขึ้น

ค้นหาเนื้อหาผสมโดยไปที่เว็บไซต์ของคุณ

เมื่อไปที่หน้า HTTPS ใน Google Chrome เบราว์เซอร์จะแจ้งเตือนคุณเกี่ยวกับเนื้อหาผสมว่าเป็นข้อผิดพลาดและคำเตือนในคอนโซล JavaScript

ในหัวข้อเนื้อหาผสมคืออะไร คุณจะเห็นตัวอย่างจำนวนหนึ่งและดูว่ามีการรายงานปัญหาอย่างไรในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ตัวอย่างของเนื้อหาผสมแบบแพสซีฟจะมีคำเตือนต่อไปนี้ หากเบราว์เซอร์พบเนื้อหาใน URL https ได้ ระบบจะอัปเกรดเนื้อหาดังกล่าวโดยอัตโนมัติและจะแสดงข้อความ

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แสดงคำเตือนที่แสดงขึ้นเมื่อตรวจพบและอัปเกรดเนื้อหาผสม

เนื้อหาผสมที่ใช้งานอยู่จะถูกบล็อกและแสดงคำเตือน

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงคำเตือนที่แสดงเมื่อมีการบล็อกเนื้อหาผสมที่ใช้งานอยู่

หากเห็นคำเตือนเช่นนี้สำหรับ 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 หรือ การสแกนเนื้อหาผสม

การอัปเกรดคำขอที่ไม่ปลอดภัย

การรองรับเบราว์เซอร์

  • Chrome: 44
  • ขอบ: 17
  • Firefox: 48
  • Safari: 10.1

แหล่งที่มา

เบราว์เซอร์เริ่มอัปเกรดและบล็อกคำขอที่ไม่ปลอดภัย คุณใช้คำสั่ง 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> รายการ เพื่อให้มั่นใจว่าหน้าเว็บทั้งหน้ามีการป้องกัน