استخدام 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
   

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

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

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

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

   mkcert localhost
   

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

   mkcert mysite.example
   

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

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

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

4. اضبط خادمك لاستخدام بروتوكول 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 آمنًا. تجنَّب فعل ذلك للأسباب التالية:

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

مع خالص الشكر لجميع المراجعين والمساهمين على مساهماتهم وملاحظاتهم، وخاصةً Ryan Sleevi وFilippo Valsorda وMilica Mihajlija وRowan Merewood. 🙌

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