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

Jo-el van Bergen

Rachel Andrew Technical Writer

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ: เบราว์เซอร์ที่ทันสมัยจะบังคับใช้นโยบายรักษาความปลอดภัยเนื้อหาทั้งหมดที่ได้รับ ค่าส่วนหัว CSP หลายค่าที่เบราว์เซอร์ได้รับในส่วนหัวการตอบกลับหรือองค์ประกอบ <meta> จะรวมกันและบังคับใช้เป็นนโยบายเดียว เช่นเดียวกับนโยบายการรายงานที่รวมกัน นโยบายจะรวมกันโดยใช้จุดตัดของนโยบาย กล่าวคือ นโยบายแต่ละรายการหลังจากนโยบายแรกจะจำกัดเนื้อหาที่อนุญาตเพิ่มเติมเท่านั้น ไม่ใช่ขยายขอบเขตเนื้อหา

การค้นหาเนื้อหาผสมด้วยนโยบายรักษาความปลอดภัยเนื้อหา

คุณใช้นโยบายรักษาความปลอดภัยเนื้อหาเพื่อรวบรวมรายงานเนื้อหาแบบผสมในเว็บไซต์ได้ หากต้องการเปิดใช้ฟีเจอร์นี้ ให้ตั้งค่าคำสั่ง Content-Security-Policy-Report-Only โดยเพิ่มเป็นส่วนหัวการตอบกลับสำหรับเว็บไซต์

ส่วนหัวการตอบกลับ:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

หมายเหตุ: เราจะเลิกใช้งานส่วนหัวการตอบกลับ report-uri เพื่อเปลี่ยนไปใช้ report-to แทน

Browser Support

• 70
• 79
• 149
• 16.4

Source

คุณระบุส่วนหัวทั้ง 2 รายการได้ ซึ่งในกรณีนี้ ระบบจะไม่สนใจ report-uri หากเบราว์เซอร์รองรับ report-to

เมื่อใดก็ตามที่ผู้ใช้เข้าชมหน้าเว็บในเว็บไซต์ของคุณ เบราว์เซอร์ของผู้ใช้จะส่งรายงานที่จัดรูปแบบ JSON เกี่ยวกับสิ่งใดก็ตามที่ละเมิดนโยบายความปลอดภัยของเนื้อหาไปยัง https://example.com/reportingEndpoint ในกรณีนี้ ระบบจะส่งรายงานทุกครั้งที่มีการโหลดทรัพยากรย่อยผ่าน HTTP รายงานเหล่านี้ประกอบด้วย URL ของหน้าเว็บที่เกิดการละเมิดนโยบายและ URL ของทรัพยากรย่อยที่ละเมิดนโยบาย หากกำหนดค่าปลายทางการรายงานเพื่อบันทึกรายงานเหล่านี้ คุณจะติดตามเนื้อหาแบบผสมในเว็บไซต์ได้โดยไม่ต้องไปที่แต่ละหน้าด้วยตนเอง

ข้อควรระวัง 2 ประการมีดังนี้

• ผู้ใช้ต้องเข้าชมหน้าเว็บของคุณในเบราว์เซอร์ที่เข้าใจส่วนหัว CSP ซึ่งเป็นกรณีที่เกิดขึ้นกับเบราว์เซอร์ที่ทันสมัยส่วนใหญ่
• คุณจะได้รับรายงานเฉพาะหน้าเว็บที่ผู้ใช้เข้าชมเท่านั้น ดังนั้น หากคุณมีหน้าเว็บที่ได้รับการเข้าชมไม่มากนัก อาจต้องใช้เวลาสักพักก่อนที่คุณจะได้รับรายงานสำหรับทั้งเว็บไซต์

คู่มือนโยบายรักษาความปลอดภัยเนื้อหามีข้อมูลเพิ่มเติมและตัวอย่างปลายทาง

ทางเลือกอื่นนอกเหนือจากการรายงานด้วย CSP

หากเว็บไซต์ของคุณโฮสต์โดยแพลตฟอร์ม เช่น Blogger คุณอาจไม่มีสิทธิ์เข้าถึงเพื่อแก้ไขส่วนหัวและเพิ่ม CSP ทางเลือกอื่นที่ทำได้คือใช้ Crawler ของเว็บไซต์เพื่อค้นหาปัญหาทั่วทั้งเว็บไซต์ เช่น HTTPSChecker หรือ Mixed Content Scan

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

Browser Support

• 44
• 17
• 48
• 10.1

Source

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

คำสั่ง CSP upgrade-insecure-requests จะสั่งให้เบราว์เซอร์อัปเกรด URL ที่ไม่ปลอดภัยก่อนส่งคำขอเครือข่าย

ตัวอย่างเช่น หากหน้าเว็บมีแท็กรูปภาพที่มี HTTP URL เช่น <img src="https://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> เพื่อให้มั่นใจว่าทั้งหน้าได้รับการปกป้อง