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

Maud Nalpas

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

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

ملاحظة: في هذه المشاركة، تكون البيانات حول localhost صالحة لـ 127.0.0.1 و [::1] أيضًا، لأن كلاهما يصف عنوان الكمبيوتر المحلي (أيضًا يُسمى عنوان النسخ الاحتياطي). لتبسيط الأمور، لا تتضمن هذه التعليمات لتحديد أرقام المنافذ. ولذلك عندما ترى http://localhost، يمكنك قراءته على النحو التالي: http://localhost:{PORT} أو http://127.0.0.1:{PORT}.

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

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

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

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

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

تنبيه:

• يجب عدم تصدير أو مشاركة الملف rootCA-key.pem الذي تنشئه mkcert تلقائيًا عند تشغيل "mkcert -install". يمكن للمهاجم الذي يمتلك هذا الملف أن ينشئ هجمات على المسار لأي موقع إلكتروني قد تزوره. ويمكن لهذه الملفات اعتراض الطلبات الآمنة من جهازك إلى أي موقع إلكتروني، مثل المصرف أو مقدّم الرعاية الصحية أو الشبكات الاجتماعية. إذا كنت بحاجة إلى معرفة مكان rootCA-key.pem للتأكّد من أنّه آمن، شغِّل mkcert -CAROOT.
• لا تستخدِم mkcert إلا لأغراض التطوير، وبالتالي لا تطلب من المستخدمين النهائيين تشغيل أوامر mkcert.
• فِرق التطوير: على جميع أعضاء فريقك تثبيت 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
   

   يؤدي هذا الأمر إلى شيئين:

   • إنشاء شهادة لاسم المضيف الذي حددته
   • يتيح 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} في المتصفّح، بدون تحذيرات.

تنبيه: يجب تنفيذ هذه الإجراء في التطوير فقط. الأغراض وعدم تصدير الملف أو مشاركته على الإطلاق rootCA-key.pem إذا كنت بحاجة إلى معرفة مكان هذا الملف للتأكّد من أنّها آمنة، يُرجى تشغيل "mkcert -CAROOT".

</div>

تشغيل موقعك الإلكتروني محليًا باستخدام HTTPS: خيارات أخرى

في ما يلي طرق أخرى لإعداد شهادتك. وهي بشكل عام أكثر تعقيدًا أو خطورة من استخدام mkcert.

شهادة موقَّعة ذاتيًا

ويمكنك أيضًا أن تقرر عدم استخدام مرجع مصدق محلي مثل mkcert بدلاً من ذلك، وقّع شهادتك بنفسك. لهذا النهج بعض الصعوبات:

• المتصفحات لا تثق بك كمرجع تصديق، لذا ستعرض تحذيرات فإنك تحتاج إلى تجاوزها يدويًا. في Chrome، يمكنك استخدام العلامة #allow-insecure-localhost لتجاوز هذا التحذير تلقائيًا على localhost
• هذا غير آمن إذا كنت تعمل في شبكة غير آمنة.
• وليس بالضرورة أن يكون استخدام مرجع تصديق محلي مثل mkcert أسهل أو أسرع من ذلك.
• لن تعمل الشهادات الموقعة ذاتيًا بنفس الطريقة الموثوق بها تمامًا الشهادات.
• إذا كنت لا تستخدم هذا الأسلوب في سياق المتصفح، يجب إيقاف التحقق من الشهادة لخادمك. نسيان إعادة تفعيله في إلا أن عملية الإنتاج تتسبب في مشكلات أمنية.

تظهر متصفِّحات التحذيرات عند استخدام شهادة موقَّعة ذاتيًا.

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

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

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

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

شهادة موقعة من مرجع تصديق عادي

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

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

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

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

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

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

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

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

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

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