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

Maud Nalpas

โดยส่วนใหญ่แล้ว http://localhost จะทำงานเหมือน HTTPS เพื่อวัตถุประสงค์ในการพัฒนา อย่างไรก็ตาม มีบางกรณีพิเศษ เช่น การใช้ชื่อโฮสต์ที่กำหนดเองหรือการใช้คุกกี้ที่ปลอดภัยในเบราว์เซอร์ต่างๆ ซึ่งคุณต้องตั้งค่าเว็บไซต์สำหรับนักพัฒนาซอฟต์แวร์ให้ทำงานเหมือน HTTPS อย่างชัดเจน เพื่อแสดงการทำงานของเว็บไซต์ในเวอร์ชันที่ใช้งานจริงได้อย่างถูกต้อง (หากเว็บไซต์ในสภาพแวดล้อมจริงไม่ได้ ใช้ HTTPS คุณควรเปลี่ยนไปใช้ HTTPS โดยเร็วที่สุด)

หน้านี้จะอธิบายวิธีเรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS

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

ดูคำแนะนำสั้นๆ ได้ที่ ข้อมูลอ้างอิงฉบับย่อของ mkcert.**

เรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS โดยใช้ mkcert (แนะนำ)

หากต้องการใช้ HTTPS กับเว็บไซต์สำหรับการพัฒนาในเครื่องและเข้าถึง https://localhost หรือ https://mysite.example (ชื่อโฮสต์ที่กำหนดเอง) คุณต้องมี ใบรับรอง TLS ที่ลงนามโดยเอนทิตีที่อุปกรณ์และเบราว์เซอร์เชื่อถือ ซึ่งเรียกว่า ผู้ออกใบรับรอง (CA) ที่เชื่อถือได้ เบราว์เซอร์จะตรวจสอบว่าใบรับรองของเซิร์ฟเวอร์สำหรับการพัฒนาลงนามโดย CA ที่เชื่อถือได้หรือไม่ก่อนที่จะสร้างการเชื่อมต่อ HTTPS

เราขอแนะนำให้ใช้ mkcert ซึ่งเป็น CA ข้ามแพลตฟอร์มเพื่อสร้างและลงนามใบรับรอง ดูตัวเลือกที่เป็นประโยชน์อื่นๆ ได้ที่ เรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS: ตัวเลือกอื่นๆ

ระบบปฏิบัติการหลายระบบมีไลบรารีสำหรับการสร้างใบรับรอง เช่น openssl อย่างไรก็ตาม ไลบรารีเหล่านี้มีความซับซ้อนและเชื่อถือได้น้อยกว่า mkcert และไม่จำเป็นต้องเป็นข้ามแพลตฟอร์ม ซึ่งทำให้ทีมพัฒนาขนาดใหญ่เข้าถึงได้ยากขึ้น

ข้อควรระวัง:

• ห้ามส่งออกหรือแชร์ไฟล์ rootCA-key.pem ที่ mkcert สร้างขึ้นโดยอัตโนมัติเมื่อคุณเรียกใช้ mkcert -install หากผู้โจมตีได้ไฟล์นี้ไป ก็จะสามารถสร้างการโจมตีแบบ On-Path สำหรับเว็บไซต์ที่คุณอาจเข้าชมได้ ผู้โจมตีอาจสกัดกั้นคำขอที่ปลอดภัยจากเครื่องของคุณไปยังเว็บไซต์ต่างๆ เช่น ธนาคาร ผู้ให้บริการด้านการดูแลสุขภาพ หรือโซเชียลเน็ตเวิร์ก หากต้องการทราบตำแหน่งของ rootCA-key.pem เพื่อให้แน่ใจว่าไฟล์ปลอดภัย ให้เรียกใช้ mkcert -CAROOT
• ใช้ mkcert เพื่อวัตถุประสงค์ในการพัฒนา เท่านั้น และอย่าขอให้ผู้ใช้ปลายทางเรียกใช้คำสั่ง mkcert
• ทีมพัฒนา: สมาชิกทุกคนในทีมควรติดตั้งและเรียกใช้ mkcert แยกกัน (ไม่จัดเก็บและแชร์ CA และใบรับรอง)

ตั้งค่า

1. ติดตั้ง mkcert (เพียงครั้งเดียว)

   ทำตาม วิธีการติดตั้ง mkcert ในระบบปฏิบัติการ เช่น ใน macOS ให้ทำดังนี้

   brew install mkcert
   brew install nss # if you use Firefox
   

2. เพิ่ม mkcert ลงใน CA หลักในเครื่อง

   เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

   mkcert -install
   

   ซึ่งจะสร้างผู้ออกใบรับรอง (CA) ในเครื่อง CA ในเครื่องที่สร้างโดย mkcert จะได้รับความเชื่อถือในเครื่อง เท่านั้น ในอุปกรณ์ของคุณ

3. สร้างใบรับรองสำหรับเว็บไซต์ของคุณที่ลงนามโดย mkcert

   ในเทอร์มินัล ให้ไปที่ไดเรกทอรีรูทของเว็บไซต์หรือไดเรกทอรีที่คุณต้องการเก็บใบรับรอง

   จากนั้นเรียกใช้คำสั่งต่อไปนี้

   mkcert localhost
   

   หากคุณใช้ชื่อโฮสต์ที่กำหนดเอง เช่น mysite.example ให้เรียกใช้คำสั่งต่อไปนี้

   mkcert mysite.example
   

   คำสั่งนี้จะทำ 2 สิ่งต่อไปนี้

   • สร้างใบรับรองสำหรับชื่อโฮสต์ที่คุณระบุ
   • อนุญาตให้ mkcert ลงนามใบรับรอง

   ตอนนี้ใบรับรองของคุณพร้อมใช้งานและลงนามโดยผู้ออกใบรับรองที่เบราว์เซอร์เชื่อถือในเครื่องแล้ว

4. กำหนดค่าเซิร์ฟเวอร์ให้ใช้ 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"
   

   👩🏻‍💻 ตัวอย่างอื่นๆ:

   • เซิร์ฟเวอร์สำหรับการพัฒนา Angular
   • Python

5. เปิด https://localhost หรือ https://mysite.example ในเบราว์เซอร์เพื่อตรวจสอบอีกครั้งว่าคุณเรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS คุณจะไม่เห็นคำเตือนของเบราว์เซอร์ เนื่องจากเบราว์เซอร์เชื่อถือ mkcert ในฐานะผู้ออกใบรับรองในเครื่อง

ข้อมูลอ้างอิงฉบับย่อของ mkcert

ข้อมูลอ้างอิงฉบับย่อของ mkcert

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

1. ตั้งค่า mkcert

   หากยังไม่ได้ติดตั้ง ให้ติดตั้ง mkcert เช่น ใน macOS ให้ทำดังนี้

   brew install mkcert
   
   
   

   ดูวิธีการติดตั้ง mkcert สำหรับ Windows และ Linux

   จากนั้นสร้างผู้ออกใบรับรองในเครื่องโดยทำดังนี้

   mkcert -install

2. สร้างใบรับรองที่เชื่อถือได้

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   ซึ่งจะสร้างใบรับรองที่ถูกต้องที่ mkcert ลงนามโดยอัตโนมัติ

3. กำหนดค่าเซิร์ฟเวอร์สำหรับการพัฒนาให้ใช้ HTTPS และใบรับรองที่คุณ สร้างขึ้นในขั้นตอนที่ 2

ตอนนี้คุณเข้าถึง https://{YOUR HOSTNAME} ในเบราว์เซอร์ได้แล้วโดยไม่มีคำเตือน

ข้อควรระวัง: ทำเช่นนี้เพื่อวัตถุประสงค์ในการพัฒนา เท่านั้น และห้ามส่งออกหรือแชร์ ไฟล์ rootCA-key.pem หากต้องการทราบตำแหน่งของไฟล์นี้เพื่อให้แน่ใจว่าไฟล์ปลอดภัย ให้เรียกใช้ mkcert -CAROOT

</div>

เรียกใช้เว็บไซต์ในเครื่องด้วย HTTPS: ตัวเลือกอื่นๆ

วิธีอื่นๆ ในการตั้งค่าใบรับรองมีดังนี้ โดยทั่วไปแล้ววิธีเหล่านี้จะซับซ้อนกว่าหรือมีความเสี่ยงมากกว่าการใช้ mkcert

ใบรับรองแบบ Self-signed

คุณยังเลือกที่จะไม่ใช้ผู้ออกใบรับรองในเครื่อง เช่น mkcert และลงนามใบรับรองด้วยตนเอง แทนก็ได้ วิธีการนี้มีข้อเสียบางประการดังนี้

• เบราว์เซอร์ไม่เชื่อถือคุณในฐานะผู้ออกใบรับรอง ดังนั้นเบราว์เซอร์จะแสดงคำเตือนที่คุณต้องข้ามด้วยตนเอง ใน Chrome คุณสามารถใช้แฟล็ก #allow-insecure-localhost เพื่อข้ามคำเตือนนี้โดยอัตโนมัติใน localhost
• วิธีนี้ไม่ปลอดภัยหากคุณทำงานในเครือข่ายที่ไม่ปลอดภัย
• วิธีนี้ไม่ได้ง่ายหรือเร็วกว่าการใช้ CA ในเครื่อง เช่น mkcert
• ใบรับรองแบบ Self-signed จะทำงานไม่เหมือนกับใบรับรองที่เชื่อถือได้
• หากคุณไม่ได้ใช้เทคนิคนี้ในบริบทของเบราว์เซอร์ คุณต้องปิดใช้การยืนยันใบรับรองสำหรับเซิร์ฟเวอร์ การลืมเปิดใช้อีกครั้งในสภาพแวดล้อมจริงจะทำให้เกิดปัญหาด้านความปลอดภัย

คำเตือนที่เบราว์เซอร์แสดงเมื่อใช้ใบรับรองแบบ Self-signed

หากคุณไม่ได้ระบุใบรับรอง ตัวเลือก HTTPS ของเซิร์ฟเวอร์สำหรับการพัฒนาของ React และ Vue จะสร้างใบรับรองแบบ Self-signed เบื้องหลัง วิธีนี้รวดเร็ว แต่จะมาพร้อมกับคำเตือนของเบราว์เซอร์และข้อเสียอื่นๆ ของใบรับรองแบบ Self-signed โชคดีที่คุณสามารถใช้ตัวเลือก HTTPS ในตัวของเฟรมเวิร์กฟรอนท์เอนด์และระบุใบรับรองที่เชื่อถือได้ในเครื่องซึ่งสร้างขึ้นโดยใช้ mkcert หรือเครื่องมือที่คล้ายกัน ดูข้อมูลเพิ่มเติมได้ที่ ตัวอย่าง mkcert กับ React

เหตุใดเบราว์เซอร์จึงไม่เชื่อถือใบรับรองแบบ Self-signed

หากคุณเปิดเว็บไซต์ที่ทำงานในเครื่องในเบราว์เซอร์โดยใช้ HTTPS เบราว์เซอร์จะตรวจสอบใบรับรองของเซิร์ฟเวอร์สำหรับการพัฒนาในเครื่อง เมื่อเห็นว่าคุณลงนามใบรับรองด้วยตนเอง เบราว์เซอร์จะตรวจสอบว่าคุณได้ลงทะเบียนเป็นผู้ออกใบรับรองที่เชื่อถือได้หรือไม่ เนื่องจากคุณไม่ได้ลงทะเบียน เบราว์เซอร์จึงไม่เชื่อถือใบรับรองและแสดงคำเตือน ว่าการเชื่อมต่อไม่ปลอดภัย เบราว์เซอร์จะยังคงสร้างการเชื่อมต่อ HTTPS หากคุณดำเนินการต่อ แต่คุณต้องรับความเสี่ยงเอง

เหตุใดเบราว์เซอร์จึงไม่เชื่อถือใบรับรองแบบ Self-signed

ใบรับรองที่ลงนามโดยผู้ออกใบรับรองทั่วไป

คุณยังใช้ใบรับรองที่ลงนามโดย 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 🙌

พื้นหลังรูปภาพหลักโดย @anandu ใน Unsplash (แก้ไขแล้ว)