استخدام HTTPS في التطوير المحلي

Maud Nalpas

في معظم الأحيان، يتصرّف http://localhost مثل HTTPS لأغراض التطوير. ومع ذلك، هناك بعض الحالات الخاصة، مثل أسماء المضيفين المخصّصة أو استخدام ملفات تعريف الارتباط الآمنة في جميع المتصفّحات، حيث تحتاج إلى إعداد موقعك الإلكتروني المخصّص للمطوّرين صراحةً ليتصرف مثل HTTPS لتمثيل كيفية عمل موقعك الإلكتروني بدقة في مرحلة الإنتاج. (إذا كان موقعك الإلكتروني المخصّص للنشر لا يستخدم بروتوكول HTTPS، اجعل من الأولوية التبديل إلى HTTPS).

توضّح هذه الصفحة كيفية تشغيل موقعك الإلكتروني على الجهاز باستخدام بروتوكول HTTPS.

للحصول على تعليمات موجزة، يُرجى الاطّلاع على مرجع mkcert السريع.**

تشغيل موقعك الإلكتروني محليًا باستخدام HTTPS باستخدام mkcert (يُنصَح به)

لاستخدام HTTPS مع موقع التطوير المحلي والوصول إلى https://localhost أو https://mysite.example (اسم مضيف مخصّص)، تحتاج إلى شهادة بروتوكول أمان طبقة النقل (TLS) موقَّعة من كيان يثق به جهازك ومتصفّحك، يُعرف باسم مرجع تصديق موثوق به. يتحقّق المتصفّح ممّا إذا كانت شهادة خادم التطوير موقَّعة من مرجع مصدق موثوق به قبل إنشاء اتصال HTTPS.

ننصحك باستخدام mkcert، وهو مرجع تصديق من عدّة منصات لإنشاء شهادتك وتوقيعها. للحصول على خيارات أخرى مفيدة، يمكنك الاطّلاع على إدارة موقعك الإلكتروني محليًا باستخدام HTTPS: خيارات أخرى.

تتضمّن العديد من أنظمة التشغيل مكتبات لإنشاء الشهادات، مثل openssl. ومع ذلك، فهي أكثر تعقيدًا وأقل اعتمادية من mkcert، ولا تعمل بالضرورة على جميع المنصات، ما يجعلها أقل سهولة في الاستخدام بالنسبة إلى فِرق المطوّرين الأكبر حجمًا.

ضبط إعدادات الجهاز

1. ثبِّت mkcert (مرة واحدة فقط).

   اتّبِع التعليمات لتثبيت mkcert على نظام التشغيل. على سبيل المثال، في نظام التشغيل macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. أضِف mkcert إلى شهادات CA الجذر المحلية.

   في الوحدة الطرفية، شغِّل الأمر التالي:

   mkcert -install
   

   يؤدي هذا إلى إنشاء مرجع تصديق محلي (CA). إنّ هيئة إصدار الشهادات المحلية التي تم إنشاؤها باستخدام mkcert تكون موثوقًا بها محليًا فقط على جهازك.

3. أنشئ شهادة لموقعك الإلكتروني موقَّعة من mkcert.

   في وحدة التحكّم، انتقِل إلى الدليل الجذر لموقعك الإلكتروني أو أي دليل تريد الاحتفاظ بشهادتك فيه.

   بعد ذلك، نفِّذ ما يلي:

   mkcert localhost
   

   في حال استخدام اسم مضيف مخصّص مثل mysite.example، عليك تشغيل:

   mkcert mysite.example
   

   ينفِّذ هذا الأمر أمرَين:

   • إنشاء شهادة لاسم المضيف الذي حددته
   • لنوقّع الشهادة باستخدام 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 في directory root (الدليل الجذر) لموقعك الإلكتروني:

   |-- 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.
• هذا الإجراء غير آمن إذا كنت تعمل في شبكة غير آمنة.
• ولا يعني ذلك بالضرورة أنّه أسهل أو أسرع من استخدام مرجع تصديق محلي مثل mkcert.
• لن تعمل الشهادات الموقَّعة ذاتيًا بالطريقة نفسها تمامًا التي تعمل بها الشهادات الموثوق بها.
• إذا كنت لا تستخدم هذه التقنية في سياق المتصفّح، عليك إيقاف إثبات صحة الشهادة لخادمك. إنّ نسيان إعادة تمكينه في الإنتاج يتسبب في حدوث مشكلات تتعلق بالأمان.

إذا لم تحدِّد شهادة، تنشئ خيارات HTTPS لخادم التطوير في React وVue's شهادة موقعة ذاتيًا ضمنها. هذه الطريقة سريعة، ولكنها تتضمّن تحذيرات المتصفح نفسها وغيرها من الصعوبات المتعلّقة بالشهادات الموقَّعة ذاتيًا. لحسن الحظ، يمكنك استخدام خيار HTTPS المضمّن في منصّات برمجة تطبيقات الويب المخصّصة للواجهة الأمامية وتحديد شهادة موثوق بها محليًا تم إنشاؤها باستخدام mkcert أو أداة مشابهة. لمزيد من المعلومات، يُرجى الاطّلاع على مثال mkcert مع React.

لماذا لا تثق المتصفّحات بالشهادات الموقَّعة ذاتيًا؟

إذا فتحت موقعك الإلكتروني الذي يتم تشغيله على الجهاز في المتصفّح باستخدام HTTPS، يفحص المتصفّح شهادة خادم التطوير المحلي. وعندما يرصد أنّك وقّعت على الشهادة بنفسك، يتحقّق مما إذا كنت مسجّلاً كمصدر شهادة موثوق به. وبما أنّك لا تملك هذا المرجع، لا يمكن للمتصفّح الوثوق بالشهادة، ويعرض تحذيرًا يُعلمك بأنّ الاتصال غير آمن. سيستمر إنشاء اتصال HTTPS في حال المتابعة، ولكنّك تفعل ذلك على مسؤوليتك الخاصة.

شهادة موقَّعة من قِبل هيئة إصدار شهادات عادية

يمكنك أيضًا استخدام شهادة موقَّعة من مرجع تصديق رسمي. ويؤدي ذلك إلى الصعوبات التالية:

• عليك تنفيذ المزيد من إجراءات الإعداد مقارنةً باستخدام تقنية CA المحلية مثل mkcert.
• يجب استخدام اسم نطاق صالح يمكنك التحكّم فيه. وهذا يعني أنّه لا يمكنك استخدام CA الرسمية لتنفيذ ما يلي:
  • localhost وأسماء النطاقات الأخرى المحجوبة مثل example أو test
  • أي اسم نطاق لا تتحكم فيه.
  • نطاقات المستوى الأعلى غير صالحة. لمزيد من المعلومات، يُرجى الاطّلاع على قائمة النطاقات الصالحة من المستوى الأعلى.

الخادم الوكيل العكسي

هناك خيار آخر للوصول إلى موقع إلكتروني يعمل على الجهاز باستخدام HTTPS، وهو استخدام خادم وكيل عكسي مثل ngrok. يأتي هذا مع المخاطر التالية:

• يمكن لأي مستخدم تشارك معه عنوان URL للوكيل الخلفي الوصول إلى موقع التطوير الداخلي. يمكن أن يكون هذا مفيدًا لعرض مشروعك للعملاء، ولكنه قد يسمح أيضًا للأشخاص غير المصرح لهم بمشاركة معلومات حساسة.
• تفرض بعض خدمات الخادم الوكيل العكسي رسومًا مقابل الاستخدام، لذا قد يكون السعر عاملاً في اختيارك للخدمة.
• يمكن أن تؤثّر إجراءات الأمان الجديدة في المتصفّحات في طريقة عمل هذه الأدوات.

إبلاغ (غير مستحسن)

إذا كنت تستخدم اسم مضيف مخصّصًا مثل mysite.example في Chrome، يمكنك استخدام علامة لفرض اعتبار المتصفّح mysite.example آمنًا. تجنَّب إجراء ذلك للأسباب التالية:

• يجب التأكّد تمامًا من أنّ mysite.example يُحدّد دائمًا عنوانًا محليًا. وإلا، قد تخاطر بتسرّب بيانات اعتماد الإنتاج.
• لا تعمل هذه العلامة إلا في Chrome، لذا لا يمكنك تصحيح الأخطاء في جميع المتصفّحات.

شكرًا جزيلاً على المساهمات والملاحظات التي أرسلها جميع المراجعين والمساهمين، لا سيما "ريان سليفي" و"فيليبو فالسوردا" و"ميليكا ميهاجيليا" و"روان ميروود". 🙌

خلفية الصورة الرئيسية من إنشاء @anandu على Unsplash، تم تعديلها.