ควรใช้ HTTPS สำหรับการพัฒนาในพื้นที่เมื่อใด

การใช้ http://localhost สำหรับการพัฒนาในเครื่องนั้นใช้ได้ในกรณีส่วนใหญ่ ยกเว้นในบางกรณีพิเศษ โพสต์นี้อธิบายถึงกรณีที่คุณต้องเรียกใช้เว็บไซต์ที่พัฒนาในเครื่องด้วย HTTPS

Maud Nalpas

ดูเพิ่มเติมที่วิธีใช้ HTTPS สำหรับการพัฒนาในเครื่อง

ในโพสต์นี้ ข้อความเกี่ยวกับ localhost ใช้ได้กับ 127.0.0.1 และ [::1] ด้วย เนื่องจากทั้ง 2 รายการอธิบายที่อยู่คอมพิวเตอร์ในเครื่อง ซึ่งเรียกอีกอย่างว่า "ที่อยู่ Loopback" นอกจากนี้ เราจะไม่ระบุหมายเลขพอร์ตเพื่อให้ง่ายต่อการใช้งาน ดังนั้นเมื่อเห็น http://localhost ให้อ่านเป็น http://localhost:{PORT} หรือ http://127.0.0.1:{PORT}

สรุป

เมื่อพัฒนาในเครื่อง ให้ใช้ http://localhost เป็นค่าเริ่มต้น Service Worker, Web Authentication API และอื่นๆ จะทํางานได้ อย่างไรก็ตาม ในกรณีต่อไปนี้ คุณจะต้องใช้ HTTPS สำหรับการพัฒนาในเครื่อง

  • การแก้ไขข้อบกพร่องของปัญหาเนื้อหาผสม
  • การใช้ HTTP/2 ขึ้นไป
  • การใช้ไลบรารีหรือ API ของบุคคลที่สามที่ต้องใช้ HTTPS

  • การใช้ชื่อโฮสต์ที่กำหนดเอง

    รายการกรณีที่คุณต้องใช้ HTTPS สำหรับการพัฒนาในเครื่อง
    กรณีที่ควรใช้ HTTPS สำหรับการพัฒนาในเครื่อง

✨ ข้อมูลทั้งหมดที่คุณจำเป็นต้องทราบ หากสนใจดูรายละเอียดเพิ่มเติม โปรดอ่านต่อ

เหตุผลที่เว็บไซต์ที่ใช้ในการพัฒนาควรทำงานอย่างปลอดภัย

คุณควรให้เว็บไซต์ที่พัฒนาในเครื่องทำงานเหมือนเว็บไซต์เวอร์ชันที่ใช้งานจริงมากที่สุดเพื่อหลีกเลี่ยงปัญหาที่ไม่คาดคิด ดังนั้น หากเว็บไซต์เวอร์ชันที่ใช้งานจริงใช้ HTTPS คุณก็ควรให้เว็บไซต์ที่พัฒนาในเครื่องทำงานเหมือนเว็บไซต์ HTTPS

ใช้ http://localhost โดยค่าเริ่มต้น

เบราว์เซอร์จะจัดการ http://localhost ในลักษณะพิเศษ: แม้ว่าจะเป็น HTTP แต่ส่วนใหญ่จะทำงานเหมือนเว็บไซต์ HTTPS

ใน http://localhost ระบบจะรองรับ Service Worker, Sensor API, Authentication API, การชำระเงิน และฟีเจอร์อื่นๆ ที่ต้องมีการรับประกันความปลอดภัยที่แน่นอน และจะทำงานเหมือนกับในเว็บไซต์ HTTPS ทุกประการ

กรณีที่ควรใช้ HTTPS สำหรับการพัฒนาในเครื่อง

คุณอาจพบกรณีพิเศษที่ http://localhost ไม่ทํางานเหมือนเว็บไซต์ HTTPS หรือคุณอาจเพียงต้องการใช้ชื่อเว็บไซต์ที่กําหนดเองซึ่งไม่ใช่ http://localhost

คุณต้องใช้ HTTPS สำหรับการพัฒนาในเครื่องในกรณีต่อไปนี้

  • คุณต้องแก้ไขข้อบกพร่องในเครื่องสำหรับปัญหาที่เกิดขึ้นในเว็บไซต์ HTTPS เท่านั้น แต่ไม่เกิดขึ้นในเว็บไซต์ HTTP หรือแม้แต่ http://localhost เช่น ปัญหาเนื้อหาผสม
  • คุณต้องทดสอบในเครื่องหรือจำลองลักษณะการทำงานที่เฉพาะเจาะจงสำหรับ HTTP/2 หรือใหม่กว่า เช่น หากคุณต้องการทดสอบประสิทธิภาพการโหลดใน HTTP/2 หรือใหม่กว่า ไม่รองรับ HTTP/2 หรือใหม่กว่าที่ไม่ปลอดภัย แม้แต่ใน localhost
  • คุณต้องทดสอบไลบรารีหรือ API ของบุคคลที่สามที่ต้องใช้ HTTPS (เช่น OAuth) ในเครื่อง

  • คุณไม่ได้ใช้ localhost แต่ใช้ชื่อโฮสต์ที่กำหนดเองสำหรับการพัฒนาในเครื่อง เช่น mysite.example โดยปกติแล้ว การดำเนินการนี้หมายความว่าคุณได้ลบล้างไฟล์โฮสต์ในเครื่องแล้ว

    ภาพหน้าจอของเทอร์มินัลที่แก้ไขไฟล์โฮสต์
    การแก้ไขไฟล์ hosts เพื่อเพิ่มชื่อโฮสต์ที่กำหนดเอง

    ในกรณีนี้ Chrome, Edge, Safari และ Firefox จะไม่ถือว่า mysite.example ปลอดภัยโดยค่าเริ่มต้น แม้ว่าจะเป็นเว็บไซต์ในเครื่องก็ตาม จึงไม่ทำงานเหมือนเว็บไซต์ HTTPS

  • กรณีอื่นๆ รายการนี้เป็นเพียงตัวอย่างบางส่วน แต่หากพบกรณีที่ไม่ได้ระบุไว้ที่นี่ คุณจะทราบได้ว่าสิ่งต่างๆ จะใช้งานไม่ได้ใน http://localhost หรืออาจไม่ทำงานเหมือนเว็บไซต์เวอร์ชันที่ใช้งานจริง 🙃

ในกรณีเหล่านี้ คุณต้องใช้ HTTPS สำหรับการพัฒนาในเครื่อง

วิธีใช้ HTTPS สำหรับการพัฒนาในเครื่อง

หากต้องการใช้ HTTPS สำหรับการพัฒนาในเครื่อง โปรดไปที่วิธีใช้ HTTPS สำหรับการพัฒนาในเครื่อง

เคล็ดลับหากคุณใช้ชื่อโฮสต์ที่กำหนดเอง

หากคุณใช้ชื่อโฮสต์ที่กำหนดเอง เช่น การแก้ไขไฟล์ hosts ให้ทำดังนี้

  • อย่าใช้ชื่อโฮสต์เปล่าๆ เช่น mysite เพราะหากมีโดเมนระดับบนสุด (TLD) ที่มีชื่อเดียวกัน (mysite) คุณจะพบปัญหา และก็ไม่ได้เป็นไปไม่ได้เลย ในปี 2020 มี TLD มากกว่า 1,500 รายการ และรายการนี้ก็เพิ่มขึ้นเรื่อยๆ coffee, museum, travel และชื่อบริษัทขนาดใหญ่อีกมากมาย (อาจรวมถึงบริษัทที่คุณทำงานอยู่ด้วย) เป็น TLD ดูรายการแบบเต็มที่นี่
  • ใช้เฉพาะโดเมนของคุณเองหรือโดเมนที่สงวนไว้เพื่อวัตถุประสงค์นี้เท่านั้น หากไม่มีโดเมนของตัวเอง คุณสามารถใช้ test หรือ localhost (mysite.localhost) ได้ test จะไม่มีการจัดการพิเศษในเบราว์เซอร์ แต่ localhost จะมีการจัดการพิเศษ โดย Chrome และ Edge รองรับ http://<name>.localhost ทันที และจะทำงานอย่างปลอดภัยเมื่อ localhost ทำงาน ลองใช้: เรียกใช้เว็บไซต์ใดก็ได้ใน localhost และเข้าถึง http://<whatever name you like>.localhost:<your port> ใน Chrome หรือ Edge ซึ่งอาจทำได้ใน Firefox และ Safari ในเร็วๆ นี้ เหตุผลที่คุณทำเช่นนี้ได้ (มีโดเมนย่อย เช่น mysite.localhost) ก็เพราะว่า localhost ไม่ใช่แค่ชื่อโฮสต์ แต่ยังเป็น TLD แบบเต็ม เช่น com ด้วย

ดูข้อมูลเพิ่มเติม

ขอขอบคุณอย่างยิ่งสำหรับผลงานและฟีดแบ็กจากผู้ตรวจสอบทุกท่าน โดยเฉพาะอย่างยิ่ง Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood และ Jake Archibald 🙌

รูปภาพหลักโดย @moses_lee ใน Unsplash ดัดแปลง