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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อพบเนื้อหาแบบผสมในแหล่งที่มาของเว็บไซต์ คุณสามารถทำตามขั้นตอนต่อไปนี้เพื่อแก้ไข

หากได้รับข้อความในคอนโซลว่าระบบได้อัปเกรดคำขอทรัพยากรจาก HTTP เป็น HTTPS โดยอัตโนมัติ คุณสามารถเปลี่ยน http:// URL สำหรับทรัพยากรในโค้ดเป็น 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 แต่คุณอาจใช้เครื่องมือ Crawl เว็บไซต์เพื่อค้นหาปัญหาในเว็บไซต์แทนได้ เช่น HTTPSChecker หรือ Mixed Content Scan

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

Browser Support

  • Chrome: 44.
  • Edge: 17.
  • Firefox: 48.
  • Safari: 10.1.

Source

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

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

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