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

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

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

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

ค้นหาเนื้อหาผสมด้วยการเข้าชมเว็บไซต์

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

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

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

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

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

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

หากพบคําเตือนเช่นนี้สําหรับ URL http:// ในเว็บไซต์ คุณจะต้องแก้ไขในแหล่งที่มาของเว็บไซต์ คุณควรสร้างรายการ URL เหล่านี้พร้อมกับหน้าเว็บที่พบเพื่อใช้เมื่อแก้ไข

การค้นหาเนื้อหาแบบผสมในเว็บไซต์

คุณค้นหาเนื้อหาที่ผสมกันในซอร์สโค้ดได้โดยตรง ค้นหา http:// ในแหล่งที่มา แล้วมองหาแท็กที่มีแอตทริบิวต์ URL ของ HTTP โปรดทราบว่าการมี http:// ในแอตทริบิวต์ href ของแท็กแอตทริบิวต์ (<a>) มักไม่ใช่ปัญหาเนื้อหาที่หลากหลาย โดยมีข้อยกเว้นบางประการที่ควรทราบซึ่งจะกล่าวถึงในภายหลัง

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

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

เมื่อพบเนื้อหาที่หลากหลายในแหล่งที่มาของเว็บไซต์แล้ว ให้ทำตามขั้นตอนเหล่านี้เพื่อแก้ไขปัญหา

หากได้รับข้อความคอนโซลว่าคําขอทรัพยากรได้รับการอัปเกรดจาก HTTP เป็น HTTPS โดยอัตโนมัติแล้ว คุณเปลี่ยน URL http:// ของทรัพยากรในโค้ดเป็น https:// ได้ นอกจากนี้ คุณยังตรวจสอบได้ว่าทรัพยากรพร้อมใช้งานอย่างปลอดภัยหรือไม่โดยเปลี่ยน http:// เป็น https:// ในแถบ URL ของเบราว์เซอร์ และพยายามเปิด URL ในแท็บเบราว์เซอร์

หากทรัพยากรไม่พร้อมใช้งานผ่าน https:// คุณควรพิจารณาใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

  • ใส่ทรัพยากรจากโฮสต์อื่น หากมี
  • ดาวน์โหลดและโฮสต์เนื้อหาในเว็บไซต์ของคุณโดยตรง หากคุณได้รับอนุญาตตามกฎหมายให้ดำเนินการดังกล่าว
  • ยกเว้นทรัพยากรจากเว็บไซต์โดยสิ้นเชิง

เมื่อแก้ไขปัญหาแล้ว ให้ดูหน้าที่พบข้อผิดพลาดตั้งแต่แรกและตรวจสอบว่าข้อผิดพลาดไม่ปรากฏขึ้นอีก

ระวังการใช้แท็กที่ไม่เป็นไปตามมาตรฐาน

ระวังการใช้แท็กที่ไม่ใช่มาตรฐานในเว็บไซต์ ตัวอย่างเช่น URL ของแท็กแอตทริบิวต์แองเคอร์ (<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 แต่วิธีอื่นที่ใช้งานได้อาจเป็นการใช้ Crawler ของเว็บไซต์เพื่อค้นหาปัญหาในเว็บไซต์ให้คุณ เช่น HTTPSChecker หรือการสแกนเนื้อหาผสม

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

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

  • Chrome: 44
  • Edge: 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> ทั้งหมด เพื่อให้มั่นใจว่าหน้าเว็บทั้งหน้าได้รับการปกป้อง