ใช้ 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"

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

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

ข้อมูลอ้างอิงโดยย่อเกี่ยวกับ mkcert

ข้อมูลอ้างอิงโดยย่อเกี่ยวกับ mkcert

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

  1. ตั้งค่า mkcert

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

    brew install mkcert

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

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

    mkcert -install

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

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

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

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

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

</div>

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

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

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

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

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

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

ทำไมเบราว์เซอร์จึงไม่เชื่อถือใบรับรองแบบ Self-signed

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

แผนภาพแสดงสาเหตุที่เบราว์เซอร์ไม่เชื่อถือใบรับรองแบบ Self-signed
เหตุใดเบราว์เซอร์จึงไม่เชื่อถือใบรับรองที่รับรองตนเอง

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

หรือจะใช้ใบรับรองที่ลงนามโดย CA อย่างเป็นทางการก็ได้ ซึ่งมาพร้อมกับข้อมูลแทรกต่อไปนี้

  • คุณจะต้องตั้งค่ามากกว่าเมื่อใช้เทคนิค CA ในเครื่อง เช่น mkcert
  • คุณต้องใช้ชื่อโดเมนที่ถูกต้องซึ่งคุณควบคุมอยู่ ซึ่งหมายความว่าคุณไม่สามารถใช้ CA อย่างเป็นทางการสำหรับสิ่งต่อไปนี้

พร็อกซีแบบย้อนกลับ

อีกตัวเลือกหนึ่งในการเข้าถึงเว็บไซต์ที่ทำงานในเครื่องด้วย HTTPS คือการใช้พร็อกซีแบบย้อนกลับ เช่น ngrok ซึ่งมีความเสี่ยงดังต่อไปนี้

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

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

  • คุณต้องแน่ใจ 100% ว่า mysite.example จะเปลี่ยนเส้นทางไปยังที่อยู่ภายในเครื่องเสมอ มิฉะนั้น คุณอาจเสี่ยงต่อการรั่วไหลของข้อมูลเข้าสู่ระบบเวอร์ชันที่ใช้งานจริง
  • แฟล็กนี้ใช้ได้เฉพาะใน Chrome คุณจึงแก้ไขข้อบกพร่องข้ามเบราว์เซอร์ไม่ได้

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

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