لا بأس باستخدام http://localhost للتطوير المحلي في معظم الأوقات، باستثناء بعض الحالات الخاصة. توضّح هذه المشاركة الحالات التي تحتاج فيها إلى تشغيل موقعك الإلكتروني المخصّص للتطوير المحلي باستخدام HTTPS.
يمكنك أيضًا الاطّلاع على كيفية استخدام HTTPS في التطوير المحلي.
في هذه المشاركة، تكون العبارات حول localhost صالحة أيضًا لـ 127.0.0.1 و[::1]، لأنّ كليهما يصف عنوان الكمبيوتر المحلي، المعروف أيضًا باسم "عنوان الاسترجاع". ولتبسيط الأمور، لم يتم تحديد رقم المنفذ.
عندما ترى الرمز http://localhost، يمكنك قراءته على أنّه http://localhost:{PORT} أو http://127.0.0.1:{PORT}.
ملخّص
عند التطوير محليًا، استخدِم http://localhost تلقائيًا. ستعمل مشغّلات الخدمات وWeb Authentication API وغير ذلك.
ومع ذلك، في الحالات التالية، ستحتاج إلى HTTPS لتطوير المحتوى على الجهاز المحلي:
- تصحيح الأخطاء المتعلّقة بالمحتوى المختلط
- استخدام HTTP/2 والإصدارات الأحدث
- استخدام مكتبات أو واجهات برمجة تطبيقات تابعة لجهات خارجية تتطلّب HTTPS
استخدام اسم مضيف مخصّص
حالات استخدام HTTPS في التطوير المحلي
✨ إليك كل ما تحتاج إلى معرفته. إذا كنت مهتمًا بمعرفة المزيد من التفاصيل، تابِع القراءة.
أسباب ضرورة أن يتصرف موقعك الإلكتروني المخصّص للتطوير بشكل آمن
لتجنُّب مواجهة مشاكل غير متوقّعة، يجب أن يتصرف موقعك الإلكتروني المخصّص للتطوير المحلي على النحو نفسه الذي يتصرف به موقعك الإلكتروني المباشر قدر الإمكان. لذلك، إذا كان موقعك الإلكتروني المباشر يستخدم بروتوكول HTTPS، عليك أن تجعل موقعك الإلكتروني المخصّص للتطوير المحلي يتصرف كموقع إلكتروني يستخدم بروتوكول HTTPS.
استخدام http://localhost بشكل تلقائي
تتعامل المتصفحات مع http://localhost بطريقة خاصة: على الرغم من أنّه HTTP، إلا أنّه يتصرف في الغالب كموقع إلكتروني يستخدم HTTPS.
على http://localhost، تتوفّر Service Workers وSensor APIs وAuthentication APIs وPayments والميزات الأخرى التي تتطلّب ضمانات أمان معيّنة وتعمل تمامًا كما هو الحال على موقع إلكتروني يستخدم HTTPS.
حالات استخدام HTTPS في التطوير المحلي
قد تواجه حالات خاصة لا يتصرف فيها http://localhost كأنه موقع إلكتروني HTTPS، أو قد تريد ببساطة استخدام اسم موقع إلكتروني مخصّص ليس http://localhost.
يجب استخدام HTTPS للتطوير المحلي في الحالات التالية:
- عليك تصحيح خطأ محليًا يحدث فقط على موقع إلكتروني يستخدم HTTPS وليس على موقع إلكتروني يستخدم HTTP، ولا حتى
http://localhost، مثل مشكلة المحتوى المختلط. - عليك اختبار سلوك محدّد خاص ببروتوكول HTTP/2 أو إصدار أحدث أو إعادة إنتاجه محليًا. على سبيل المثال، إذا كنت بحاجة إلى اختبار أداء التحميل على HTTP/2 أو إصدار أحدث. لا يتوافق هذا البروتوكول مع الإصدارات غير الآمنة من HTTP/2 أو الإصدارات الأحدث، حتى على
localhost. - عليك اختبار المكتبات أو واجهات برمجة التطبيقات التابعة لجهات خارجية والتي تتطلّب استخدام HTTPS (مثل OAuth) على الجهاز.
أنت لا تستخدم
localhost، بل تستخدم اسم مضيف مخصّصًا للتطوير المحلي، مثلmysite.example. يعني هذا عادةً أنّك قد ألغيت ملف المضيفين المحليين:
تعديل ملف المضيفين لإضافة اسم مضيف مخصّص في هذه الحالة، لا تعتبر المتصفّحات Chrome وEdge وSafari وFirefox تلقائيًا أنّ
mysite.exampleآمن، على الرغم من أنّه موقع إلكتروني محلي. لذلك لن يتصرف مثل موقع إلكتروني يستخدم بروتوكول HTTPS.حالات أخرى! هذه القائمة غير شاملة، ولكن إذا واجهت حالة غير مُدرَجة هنا، ستعرف ذلك من خلال حدوث مشاكل في
http://localhostأو عدم عمله تمامًا مثل موقعك الإلكتروني المباشر. 🙃
في كل هذه الحالات، عليك استخدام HTTPS للتطوير المحلي.
كيفية استخدام HTTPS في التطوير المحلي
إذا كنت بحاجة إلى استخدام HTTPS للتطوير المحلي، انتقِل إلى كيفية استخدام HTTPS للتطوير المحلي.
نصائح في حال استخدام اسم مضيف مخصّص
إذا كنت تستخدم اسم مضيف مخصّصًا، مثلاً، تعديل ملف المضيفين:
- لا تستخدِم اسم مضيف مجرّدًا، مثل
mysite، لأنّه في حال توفّر نطاق مستوى أعلى يحمل الاسم نفسه (mysite)، ستواجه مشاكل. وهذا ليس مستبعدًا، ففي عام 2020، كان هناك أكثر من 1,500 نطاق رفيع المستوى، والقائمة في ازدياد. coffeeوmuseumوtravelوالعديد من أسماء الشركات الكبيرة (وربما حتى الشركة التي تعمل فيها) هي نطاقات مستوى أعلى. الاطّلاع على القائمة الكاملة هنا - استخدِم فقط النطاقات المملوكة لك أو المحجوزة لهذا الغرض. إذا لم يكن لديك نطاق خاص بك، يمكنك استخدام
testأوlocalhost(mysite.localhost). لا يتم التعامل معtestبشكل خاص في المتصفحات، ولكن يتم التعامل معlocalhostبشكل خاص: يتوافق Chrome وEdge معhttp://<name>.localhostبدون الحاجة إلى أي إعدادات، وسيتصرف بشكل آمن عند استخدام localhost. جرِّب ذلك: شغِّل أي موقع إلكتروني على localhost وافتحhttp://<whatever name you like>.localhost:<your port>في Chrome أو Edge. قد يصبح ذلك ممكنًا قريبًا في Firefox وSafari أيضًا. والسبب الذي يتيح لك إجراء ذلك (استخدام نطاقات فرعية مثلmysite.localhost) هو أنّlocalhostليس مجرد اسم مضيف، بل هو أيضًا نطاق رفيع المستوى كامل، مثلcom.
مزيد من المعلومات
نتوجّه بالشكر الجزيل إلى جميع المراجعين على مساهماتهم وملاحظاتهم، لا سيما "ريان سليفي" و"فيليبو فالسوردا" و"ميليكا ميهايليا" و"روان ميروود" و"جيك أرشيبالد". 🙌
الصورة الرئيسية من @moses_lee على Unsplash، تم تعديلها.