استخدام 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 (مرة واحدة فقط).

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

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

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

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

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

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

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

الوكيل العكسي

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

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

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

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

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

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

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