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