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

Maud Nalpas
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 ได้ที่ install mkcert

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

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

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

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

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

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

</div>

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

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

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

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

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

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

เหตุใดเบราว์เซอร์จึงไม่เชื่อถือใบรับรองที่ลงนามด้วยตนเอง

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

สาเหตุที่เบราว์เซอร์ไม่เชื่อถือใบรับรองที่ลงนามด้วยตนเอง แผนภาพ
สาเหตุที่เบราว์เซอร์ไม่เชื่อถือใบรับรองที่ลงนามด้วยตนเอง

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

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

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

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

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

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

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

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

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

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