โดยส่วนใหญ่ http://localhost จะทำงานเหมือนกับ HTTPS เพื่อวัตถุประสงค์ในการพัฒนาซอฟต์แวร์ อย่างไรก็ตาม มีกรณีพิเศษบางอย่าง เช่น ชื่อโฮสต์ที่กำหนดเองหรือการใช้คุกกี้ที่ปลอดภัยในเบราว์เซอร์ต่างๆ ซึ่งคุณจะต้องตั้งค่าเว็บไซต์การพัฒนาอย่างชัดแจ้งให้มีลักษณะการทำงานเหมือน HTTPS เพื่อให้นำเสนอวิธีการทำงานของเว็บไซต์ในเวอร์ชันที่ใช้งานจริงอย่างถูกต้อง (หากเว็บไซต์เวอร์ชันที่ใช้งานจริงไม่ได้ใช้ HTTPS ให้ให้ความสำคัญกับการเปลี่ยนไปใช้ HTTPS)
หน้านี้อธิบายวิธีเรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS
โปรดดูคำแนะนำสั้นๆ ที่ข้อมูลอ้างอิงด่วนของ mkcert**
เรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS โดยใช้ mkcert (แนะนำ)
หากต้องการใช้ HTTPS กับเว็บไซต์การพัฒนาในเครื่องและเข้าถึง https://localhost หรือ https://mysite.example (ชื่อโฮสต์ที่กำหนดเอง) คุณต้องมีใบรับรอง TLS ที่ลงนามโดยเอนทิตีที่อุปกรณ์และเบราว์เซอร์ของคุณเชื่อถือ ซึ่งเรียกว่าหน่วยงานรับรอง (CA) ที่เชื่อถือได้
ก่อนที่จะสร้างการเชื่อมต่อ HTTPS เบราว์เซอร์จะตรวจสอบว่าใบรับรองของเซิร์ฟเวอร์การพัฒนามีการลงนามโดย CA ที่เชื่อถือได้หรือไม่
เราขอแนะนำให้ใช้ mkcert ซึ่งเป็น CA แบบข้ามแพลตฟอร์มในการสร้างและลงนามใบรับรอง ดูตัวเลือกอื่นๆ ที่เป็นประโยชน์ได้ที่เรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS: ตัวเลือกอื่นๆ
ระบบปฏิบัติการจำนวนมากมีไลบรารีสำหรับสร้างใบรับรอง เช่น openssl อย่างไรก็ตาม แพลตฟอร์มเหล่านี้มีความซับซ้อนและน่าเชื่อถือน้อยกว่า mkcert และไม่จำเป็นต้องเป็นแบบข้ามแพลตฟอร์มเสมอไป ทำให้ทีมนักพัฒนาซอฟต์แวร์ขนาดใหญ่เข้าถึงเกมได้น้อยลง
ตั้งค่า
ติดตั้ง mkcert (เพียงครั้งเดียว)
ทำตามinstructionsติดตั้ง mkcert บนระบบปฏิบัติการของคุณ เช่น ใน macOS ให้ทำดังนี้
brew install mkcert brew install nss # if you use Firefoxเพิ่ม mkcert ไปยัง CA รูทในเครื่อง
จากนั้นเรียกใช้คำสั่งต่อไปนี้
mkcert -installวิธีนี้จะสร้างผู้ออกใบรับรอง (CA) ในพื้นที่ CA ในเครื่องที่ mkcert สร้างขึ้นได้รับการเชื่อถือในอุปกรณ์ในเครื่องเท่านั้น
สร้างใบรับรองสำหรับเว็บไซต์ของคุณ ซึ่งลงชื่อโดย mkcert
ในเทอร์มินัล ให้ไปที่ไดเรกทอรีรากของเว็บไซต์หรือไดเรกทอรีใดก็ตามที่คุณต้องการเก็บใบรับรองไว้
จากนั้นเรียกใช้
mkcert localhostหากใช้ชื่อโฮสต์ที่กำหนดเอง เช่น
mysite.exampleให้เรียกใช้mkcert mysite.exampleคำสั่งนี้จะทำหน้าที่ 2 อย่าง ได้แก่
- สร้างใบรับรองสำหรับชื่อโฮสต์ที่คุณระบุ
- อนุญาตให้ mkcert ลงนามใบรับรองได้
ตอนนี้ใบรับรองของคุณพร้อมแล้วและได้รับการลงนามโดยผู้ออกใบรับรองที่เบราว์เซอร์ของคุณเชื่อถือในเครื่อง
กำหนดค่าเซิร์ฟเวอร์ให้ใช้ HTTPS ใบรับรอง TLS ที่คุณเพิ่งสร้าง
รายละเอียดของวิธีดำเนินการจะขึ้นอยู่กับเซิร์ฟเวอร์ของคุณ ดังตัวอย่างต่อไปนี้
👩🏻 💻 ที่มีโหนด:
server.js(แทนที่{PATH/TO/CERTIFICATE...}และ{PORT}):const https = require('https'); const fs = require('fs'); const options = { key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'), cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'), }; https .createServer(options, function (req, res) { // server code }) .listen({PORT});👩🏻 💻 เมื่อใช้ http-server
เริ่มต้นเซิร์ฟเวอร์ดังนี้ (แทนที่
{PATH/TO/CERTIFICATE...})http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem-Sเรียกใช้เซิร์ฟเวอร์ของคุณด้วย HTTPS ขณะที่-Cตั้งค่าใบรับรองและ-Kจะตั้งค่าคีย์👩🏻 💻 กับเซิร์ฟเวอร์การพัฒนา React:
แก้ไข
package.jsonดังนี้ และแทนที่{PATH/TO/CERTIFICATE...}:"scripts": { "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"เช่น หากคุณสร้างใบรับรองสำหรับ
localhostไว้ในไดเรกทอรีรากของเว็บไซต์ ให้ทำดังนี้|-- my-react-app |-- package.json |-- localhost.pem |-- localhost-key.pem |--...สคริปต์
startควรมีลักษณะดังนี้"scripts": { "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"👩🏻 💻 ตัวอย่างอื่นๆ
เปิด
https://localhostหรือhttps://mysite.exampleในเบราว์เซอร์เพื่อตรวจสอบอีกครั้งว่าคุณเรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS คุณจะไม่เห็นคำเตือนของเบราว์เซอร์เนื่องจากเบราว์เซอร์เชื่อถือ mkcert เป็นผู้ออกใบรับรองในเครื่อง
ข้อมูลอ้างอิงด่วนของ mkcert
หากต้องการเรียกใช้เว็บไซต์การพัฒนาท้องถิ่นด้วย HTTPS ให้ทำดังนี้
-
ตั้งค่า mkcert
หากยังไม่ได้ติดตั้ง ให้ติดตั้ง mkcert เช่น ใน macOS
brew install mkcert
ดูวิธีการติดตั้ง mkcert สำหรับ Windows และ Linux
จากนั้นสร้างผู้ออกใบรับรองในเครื่อง
mkcert -install
-
สร้างใบรับรองที่เชื่อถือได้
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}การดำเนินการนี้จะสร้างใบรับรองที่ถูกต้องซึ่ง mkcert ลงนามโดยอัตโนมัติ
-
กำหนดค่าเซิร์ฟเวอร์การพัฒนาให้ใช้ HTTPS และใบรับรองที่คุณสร้างในขั้นตอนที่ 2
ตอนนี้คุณเข้าถึง https://{YOUR HOSTNAME} ในเบราว์เซอร์ได้แล้วโดยไม่มีคำเตือน
</div>
เรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS: ตัวเลือกอื่นๆ
วิธีอื่นๆ ในการตั้งค่าใบรับรองมีดังนี้ ซึ่งโดยทั่วไปแล้วจะซับซ้อนหรือมีความเสี่ยงกว่าการใช้ mkcert
ใบรับรองที่ลงนามด้วยตนเอง
หรือคุณจะตัดสินใจไม่ใช้ผู้ออกใบรับรองในพื้นที่ เช่น mkcert และลงนามใบรับรองด้วยตนเองแทนก็ได้ วิธีการนี้มีข้อเสียบางประการดังนี้
- เบราว์เซอร์ไม่เชื่อถือคุณว่าเป็นผู้ออกใบรับรอง ดังนั้นจะแสดงคำเตือนที่คุณจะต้องข้ามด้วยตนเอง ใน Chrome คุณสามารถใช้ Flag
#allow-insecure-localhostเพื่อข้ามคำเตือนนี้โดยอัตโนมัติได้บนlocalhost - การดำเนินการนี้ไม่ปลอดภัยหากคุณทำงานในเครือข่ายที่ไม่ปลอดภัย
- การใช้ CA ในเครื่องอย่าง mkcert ก็ไม่ได้ง่ายหรือรวดเร็วเสมอไป
- ใบรับรองที่ลงชื่อด้วยตนเองจะไม่ทำงานเหมือนกับใบรับรองที่เชื่อถือได้
- หากไม่ได้ใช้เทคนิคนี้ในบริบทของเบราว์เซอร์ คุณต้องปิดใช้การยืนยันใบรับรองสำหรับเซิร์ฟเวอร์ การไม่เปิดใช้อีกครั้งในเวอร์ชันที่ใช้งานจริงจะทำให้เกิดปัญหาด้านความปลอดภัย
หากคุณไม่ระบุใบรับรอง ตัวเลือก HTTPS ของเซิร์ฟเวอร์การพัฒนาของ React และ Vue จะสร้างใบรับรองแบบ Self-signed ในส่วนขั้นสูง นี่เป็นวิธีการที่รวดเร็ว แต่มาพร้อมกับคำเตือนของเบราว์เซอร์เดียวกันและข้อผิดพลาดอื่นๆ ของใบรับรองแบบ Self-signed โชคดีที่คุณสามารถใช้ตัวเลือก HTTPS ในตัวของฟรอนท์เอนด์เฟรมเวิร์กและระบุใบรับรองที่เชื่อถือได้ภายในเครื่องซึ่งสร้างโดยใช้ mkcert หรือใบรับรองที่คล้ายกัน ดูข้อมูลเพิ่มเติมได้ในตัวอย่าง mkcert with React
หากคุณเปิดเว็บไซต์ที่เรียกใช้ในเครื่องในเบราว์เซอร์โดยใช้ HTTPS เบราว์เซอร์จะตรวจสอบใบรับรองของเซิร์ฟเวอร์การพัฒนาในเครื่อง เมื่อพบว่าคุณได้ลงนามใบรับรองด้วยตนเองแล้ว ระบบจะตรวจสอบว่าคุณลงทะเบียนเป็นผู้ออกใบรับรองที่เชื่อถือได้หรือไม่ และเนื่องจากคุณไม่ปลอดภัย เบราว์เซอร์จึงเชื่อถือใบรับรองไม่ได้ และจะแสดงคำเตือนที่แจ้งว่าการเชื่อมต่อไม่ปลอดภัย การดำเนินการนี้จะยังคงสร้างการเชื่อมต่อ HTTPS หากคุณดำเนินการต่อ แต่คุณต้องรับความเสี่ยงเอง
ใบรับรองที่ลงนามโดยผู้ออกใบรับรองทั่วไป
คุณสามารถใช้ใบรับรองที่ลงชื่อโดย CA อย่างเป็นทางการได้เช่นกัน ซึ่งมาพร้อมกับข้อมูลแทรกต่อไปนี้
- โดยคุณต้องมีงานในการตั้งค่ามากกว่าการใช้เทคนิค CA ภายในเครื่องอย่าง mkcert
- คุณต้องใช้ชื่อโดเมนที่ถูกต้องที่คุณเป็นผู้ควบคุม ซึ่งหมายความว่าคุณจะใช้ CA อย่างเป็นทางการต่อไปนี้ไม่ได้
localhostและชื่อโดเมนที่สงวนไว้อื่นๆ เช่นexampleหรือtest- ชื่อโดเมนที่คุณไม่ได้ควบคุม
- โดเมนระดับบนสุดไม่ถูกต้อง โปรดดูข้อมูลเพิ่มเติมในรายการโดเมนระดับบนสุดที่ถูกต้อง
ย้อนกลับพร็อกซี
อีกตัวเลือกหนึ่งในการเข้าถึงเว็บไซต์ที่ทํางานภายในเครื่องด้วย HTTPS คือการใช้พร็อกซีแบบย้อนกลับ เช่น ngrok ซึ่งมาพร้อมกับความเสี่ยงต่อไปนี้
- ทุกคนที่คุณแชร์ URL ของพร็อกซีแบบย้อนกลับด้วยจะเข้าถึงเว็บไซต์การพัฒนาในเครื่องได้ ซึ่งอาจมีประโยชน์ในการสาธิตโปรเจ็กต์ให้กับลูกค้า แต่ก็อาจทำให้ผู้ที่ไม่ได้รับอนุญาตแชร์ข้อมูลที่ละเอียดอ่อนได้เช่นกัน
- บริการพร็อกซีแบบย้อนกลับบางรายการจะเรียกเก็บเงินสำหรับการใช้งาน ดังนั้นราคาจึงอาจเป็นปัจจัยหนึ่งในการเลือกบริการที่คุณเลือก
- มาตรการรักษาความปลอดภัยใหม่ในเบราว์เซอร์อาจส่งผลต่อการทำงานของเครื่องมือเหล่านี้
แจ้งว่าไม่เหมาะสม (ไม่แนะนำ)
หากใช้ชื่อโฮสต์ที่กำหนดเอง เช่น mysite.example ใน Chrome คุณจะใช้แฟล็กเพื่อบังคับให้เบราว์เซอร์ถือว่า mysite.example ปลอดภัยได้ หลีกเลี่ยงการดำเนินการนี้
เนื่องจากสาเหตุต่อไปนี้
- คุณต้องมั่นใจ 100% ว่า
mysite.exampleเปลี่ยนเป็นที่อยู่ท้องถิ่นเสมอ มิฉะนั้น คุณอาจเสี่ยงต่อการรั่วไหลของข้อมูลเข้าสู่ระบบเวอร์ชันที่ใช้งานจริง - แฟล็กนี้ใช้ได้เฉพาะใน Chrome เท่านั้น คุณจึงแก้ไขข้อบกพร่องในเบราว์เซอร์ต่างๆ ไม่ได้
ขอขอบคุณอย่างยิ่งสำหรับการมีส่วนร่วมและความคิดเห็นต่อนักรีวิวและผู้มีส่วนร่วมทุกท่าน โดยเฉพาะ Ryan Sleevi, Filippo Valsorda, Milica Mihajlija และ Rowan Merewood 🙌