ใช้แผงความปลอดภัยใน Chrome DevTools เพื่อให้แน่ใจว่ามีการติดตั้งใช้งาน HTTPS ในหน้าเว็บอย่างถูกต้อง ดูเหตุใด HTTPS จึงเป็นเรื่องสำคัญเพื่อเรียนรู้สาเหตุที่ทุกเว็บไซต์ควรได้รับการปกป้องด้วย HTTPS แม้กระทั่งเว็บไซต์ที่ไม่ได้จัดการข้อมูลที่ละเอียดอ่อนของผู้ใช้ก็ตาม
เปิดแผงความปลอดภัย
แผงความปลอดภัยคือส่วนหลักในเครื่องมือสำหรับนักพัฒนาเว็บในการตรวจสอบความปลอดภัยของหน้าเว็บ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกแท็บความปลอดภัยเพื่อเปิดแผงความปลอดภัย
รูปที่ 1 แผงความปลอดภัย
ปัญหาทั่วไป
ต้นทางหลักที่ไม่ปลอดภัย
เมื่อต้นทางหลักของหน้าเว็บไม่ปลอดภัย ภาพรวมความปลอดภัยจะแสดงข้อความหน้านี้ไม่ปลอดภัย
รูปที่ 2 หน้าเว็บที่ไม่ปลอดภัย
ปัญหานี้เกิดขึ้นเมื่อ URL ที่คุณเข้าชมถูกร้องขอผ่าน HTTP คุณต้องส่งคำขอผ่าน HTTPS เพื่อรักษาความปลอดภัย ตัวอย่างเช่น หากคุณดู URL ในแถบที่อยู่ URL นั้นอาจดูคล้ายกับ http://example.com URL ควรเป็น https://example.com เพื่อให้มีความปลอดภัย
หากตั้งค่า HTTPS บนเซิร์ฟเวอร์แล้ว สิ่งที่คุณต้องทำเพื่อแก้ไขปัญหานี้คือกำหนดค่าเซิร์ฟเวอร์ให้เปลี่ยนเส้นทางคำขอ HTTP ทั้งหมดไปยัง HTTPS
หากไม่ได้ตั้งค่า HTTPS บนเซิร์ฟเวอร์ Let's Encrypt เป็นวิธีที่ไม่มีค่าใช้จ่ายและค่อนข้างง่ายในการเริ่มกระบวนการ หรือคุณอาจพิจารณาโฮสต์เว็บไซต์บน CDN ก็ได้ CDN หลักส่วนใหญ่จะโฮสต์เว็บไซต์บน HTTPS โดยค่าเริ่มต้นอยู่แล้ว
เคล็ดลับ การตรวจสอบเปลี่ยนเส้นทางการรับส่งข้อมูล HTTP ไปยัง HTTPS ใน Lighthouse จะช่วยให้กระบวนการเปลี่ยนเส้นทางตรวจสอบว่าคำขอ HTTP ทั้งหมดเปลี่ยนเส้นทางไปยัง HTTPS เป็นแบบอัตโนมัติได้
เนื้อหาแบบผสม
เนื้อหาผสมหมายความว่าต้นทางหลักของหน้าเว็บมีความปลอดภัย แต่หน้าเว็บขอทรัพยากรจากต้นทางที่ไม่ปลอดภัย หน้าเนื้อหาผสมจะได้รับการปกป้องเพียงบางส่วนเท่านั้นเนื่องจากเนื้อหา HTTP นั้นสามารถเข้าถึงผู้ดักฟังได้และเสี่ยงต่อการถูกโจมตีแบบแทรกกลางการสื่อสาร
รูปที่ 3 เนื้อหาแบบผสม
ในรูปที่ 3 ด้านบน การคลิกดูคำขอ 1 รายการในแผงเครือข่ายจะเปิดแผงเครือข่าย และใช้ตัวกรอง mixed-content:displayed เพื่อให้บันทึกเครือข่ายแสดงเฉพาะทรัพยากรที่ไม่ปลอดภัย
รูปที่ 4 ทรัพยากรผสมในบันทึกเครือข่าย
ดูรายละเอียด
ดูใบรับรองต้นทางหลัก
จากภาพรวมความปลอดภัย ให้คลิกดูใบรับรองเพื่อตรวจสอบใบรับรองของต้นทางหลักอย่างรวดเร็ว
รูปที่ 5 ใบรับรองต้นทางหลัก
ดูรายละเอียดต้นทาง
คลิกรายการที่ต้องการในการนำทางด้านซ้ายเพื่อดูรายละเอียดต้นทาง คุณจะดูข้อมูลการเชื่อมต่อและใบรับรองได้จากหน้ารายละเอียด ระบบจะแสดงข้อมูลความโปร่งใสของใบรับรองด้วย หากมี
รูปที่ 6 รายละเอียดต้นทางหลัก