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

Maud Nalpas

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

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

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

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

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

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

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

الإعداد

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

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

   brew install mkcert
   brew install nss # if you use Firefox
   

2. أضِف mkcert إلى مراجع التصديق الجذرية المحلية.

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

   mkcert -install
   

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

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

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

   بعد ذلك، شغِّل:

   mkcert localhost
   

   إذا كنت تستخدم اسم مضيف مخصّصًا مثل mysite.example، شغِّل:

   mkcert mysite.example
   

   ينفّذ هذا الأمر إجراءَين:

   • يتم إنشاء شهادة لاسم المضيف الذي حدّدته.
   • يسمح لـ mkcert بتوقيع الشهادة.

   أصبحت شهادتك جاهزة الآن وموقَّعة من قِبل مرجع تصديق يثق به متصفّحك محليًا.

4. اضبط الخادم لاستخدام شهادة بروتوكول أمان طبقة النقل (TLS) التي أنشأتها للتو مع بروتوكول HTTPS.

   تعتمد تفاصيل كيفية إجراء ذلك على الخادم الذي تستخدمه. في ما يلي بعض الأمثلة:

   👩🏻‍💻 باستخدام Node:

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

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

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

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

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

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

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

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

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

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

الإبلاغ (لا يُنصح به)

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

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

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