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

Maud Nalpas

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

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

โปรดดูวิธีการสั้นๆ ได้ที่ข้อมูลอ้างอิงด่วนของ mkcert**

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

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

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

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

ตั้งค่า

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} ในเบราว์เซอร์โดยไม่มีคำเตือนได้แล้ว

</div>

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

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

ใบรับรองที่ลงนามด้วยตนเอง

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

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

ถ้าไม่ระบุใบรับรอง ให้ยืนยัน และ Vue's ตัวเลือก HTTPS ของเซิร์ฟเวอร์การพัฒนาสร้างใบรับรองที่ลงชื่อด้วยตนเองภายใต้ ฮู้ด วิธีนี้รวดเร็ว แต่ก็มาพร้อมกับคำเตือนของเบราว์เซอร์เหมือนกัน รวมถึงคำเตือนอื่นๆ กับใบรับรองที่ลงชื่อด้วยตนเอง โชคดีที่คุณสามารถใช้ฟรอนท์เอนด์ ของเฟรมเวิร์ก ตัวเลือก HTTPS ในตัวและระบุใบรับรองที่เชื่อถือได้ในเครื่อง สร้างโดยใช้ mkcert หรือสิ่งที่คล้ายกัน สำหรับข้อมูลเพิ่มเติม โปรดดู mkcert ที่มี 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 🙌

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