โดยส่วนใหญ่แล้ว การใช้ http://localhost สำหรับการพัฒนาในเครื่องสามารถทำได้ ยกเว้นในกรณีพิเศษ โพสต์นี้อธิบายเมื่อคุณต้องการเรียกใช้เว็บไซต์การพัฒนาท้องถิ่นด้วย HTTPS
ดูเพิ่มเติมที่วิธีใช้ HTTPS สำหรับการพัฒนาในเครื่อง
ในโพสต์นี้ ข้อความเกี่ยวกับ localhost ใช้ได้สำหรับ 127.0.0.1 และ [::1] เช่นกัน เนื่องจากทั้งคู่อธิบายที่อยู่ของคอมพิวเตอร์ในท้องถิ่น หรือที่เรียกว่า "ที่อยู่ Loopback" นอกจากนี้ เพื่อไม่ให้สับสน เราไม่ได้ระบุหมายเลขพอร์ต
ดังนั้นเมื่อเห็น http://localhost ให้อ่านเป็น http://localhost:{PORT} หรือ http://127.0.0.1:{PORT}
สรุป
เมื่อพัฒนาในเครื่อง ให้ใช้ http://localhost โดยค่าเริ่มต้น Service Workers, Web Authentication API และอื่นๆ จะใช้งานได้
อย่างไรก็ตาม ในกรณีต่อไปนี้ คุณจะต้องใช้ HTTPS สำหรับการพัฒนาภายใน
- การตั้งค่าคุกกี้ที่ปลอดภัยอย่างสอดคล้องกันในทุกเบราว์เซอร์
- การแก้ปัญหาเนื้อหาผสม
- การใช้ HTTP/2 และเวอร์ชันใหม่กว่า
- การใช้ไลบรารีหรือ API ของบุคคลที่สามที่ต้องใช้ HTTPS
การใช้ชื่อโฮสต์ที่กำหนดเอง
กรณีที่ควรใช้ HTTPS สำหรับการพัฒนาในพื้นที่
✨ ข้อมูลทั้งหมดที่คุณควรทราบ โปรดอ่านต่อหากสนใจรายละเอียดเพิ่มเติม
เหตุใดเว็บไซต์การพัฒนาจึงควรทำงานได้อย่างปลอดภัย
เพื่อหลีกเลี่ยงปัญหาที่ไม่คาดคิด คุณต้องทำให้เว็บไซต์การพัฒนาท้องถิ่นทำงานเหมือนกับเว็บไซต์เวอร์ชันที่ใช้งานจริงมากที่สุด ดังนั้น หากเว็บไซต์เวอร์ชันที่ใช้งานจริงใช้ HTTPS คุณต้องการให้เว็บไซต์การพัฒนาท้องถิ่นทำงานเหมือนเว็บไซต์ HTTPS
ใช้ http://localhost โดยค่าเริ่มต้น
เบราว์เซอร์ดำเนินการกับ http://localhost ในลักษณะพิเศษ: แม้ว่าจะเป็น HTTP แต่ก็มีลักษณะการทำงานเหมือนเว็บไซต์ HTTPS เป็นส่วนใหญ่
ใน http://localhost ระบบจะรองรับ Service Worker, Sensor API, API การตรวจสอบสิทธิ์, การชำระเงิน และฟีเจอร์อื่นๆ ที่ต้องการการรับประกันความปลอดภัยบางอย่าง และมีลักษณะการทำงานเหมือนกับในเว็บไซต์ HTTPS
ควรใช้ HTTPS สำหรับการพัฒนาเฉพาะที่เมื่อใด
คุณอาจพบเห็นกรณีพิเศษที่ http://localhost ไม่มีลักษณะการทำงานเหมือนเว็บไซต์ HTTPS หรือคุณอาจต้องการใช้ชื่อเว็บไซต์ที่กำหนดเองที่ไม่ใช่ http://localhost
คุณต้องใช้ HTTPS สำหรับการพัฒนาในเครื่องในกรณีต่อไปนี้
คุณต้องตั้งค่าคุกกี้ในเครื่องซึ่งก็คือ
SecureหรือSameSite:noneหรือมีคำนำหน้า__Hostคุกกี้Secureมีการตั้งค่าเฉพาะบน HTTPS เท่านั้น แต่ไม่ได้ตั้งค่าในhttp://localhostสำหรับทุกเบราว์เซอร์ และเนื่องจากSameSite:noneและ__Hostกำหนดให้คุกกี้เป็นSecureด้วย การตั้งค่าคุกกี้ดังกล่าวในเว็บไซต์การพัฒนาในเครื่องจึงต้องใช้ HTTPS เช่นกันคุณต้องแก้ไขข้อบกพร่องในเครื่องซึ่งเป็นปัญหาที่เกิดขึ้นเฉพาะในเว็บไซต์ HTTPS เท่านั้น แต่ไม่ใช่ในเว็บไซต์ HTTP และไม่มีแม้กระทั่งกับ
http://localhostเช่น ปัญหาเนื้อหาผสมคุณต้องทดสอบหรือทำซ้ำลักษณะการทำงานเฉพาะสำหรับ HTTP/2 ขึ้นไปในเครื่อง เช่น หากคุณต้องการทดสอบประสิทธิภาพการโหลดใน HTTP/2 ขึ้นไป ระบบไม่รองรับ HTTP/2 ที่ไม่ปลอดภัยหรือเวอร์ชันใหม่กว่า แม้กระทั่งใน
localhostคุณต้องทดสอบไลบรารีหรือ API ของบุคคลที่สามที่ต้องใช้ HTTPS ในเครื่อง (เช่น OAuth)
คุณไม่ได้ใช้
localhostแต่เป็นชื่อโฮสต์ที่กำหนดเองสำหรับการพัฒนาในเครื่อง เช่นmysite.exampleโดยทั่วไป หมายความว่าคุณได้ลบล้างไฟล์โฮสต์ในเครื่องแล้ว
การแก้ไขไฟล์โฮสต์เพื่อเพิ่มชื่อโฮสต์ที่กำหนดเอง ในกรณีนี้ Chrome, Edge, Safari และ Firefox โดยค่าเริ่มต้นจะไม่ถือว่า
mysite.exampleมีความปลอดภัย แม้ว่าจะเป็นเว็บไซต์ในเครื่องก็ตาม ดังนั้นจึงมีลักษณะการทำงานไม่เหมือนเว็บไซต์ HTTPSกรณีอื่นๆ รายการนี้ยังไม่ครบถ้วนสมบูรณ์ แต่หากคุณพบเคสที่ไม่ได้แสดงไว้ที่นี่ คุณจะทราบได้ทันทีว่า ความเสียหายต่างๆ จะเกิดขึ้นในวันที่
http://localhostหรือลักษณะการทำงานที่ค่อนข้างไม่เหมือนเว็บไซต์เวอร์ชันที่ใช้งานจริง 🙃
ในทุกกรณี คุณต้องใช้ HTTPS สำหรับการพัฒนาเฉพาะที่
วิธีใช้ HTTPS สำหรับการพัฒนาในเครื่อง
หากคุณต้องการใช้ HTTPS สำหรับการพัฒนาในเครื่อง ให้ไปที่วิธีใช้ HTTPS สำหรับการพัฒนาในท้องถิ่น
เคล็ดลับหากใช้ชื่อโฮสต์ที่กำหนดเอง
หากใช้ชื่อโฮสต์ที่กำหนดเอง เช่น การแก้ไขไฟล์โฮสต์ ให้ทำดังนี้
- อย่าใช้ชื่อโฮสต์เปล่า เช่น
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, แก้ไขแล้ว