طبقة مآخذ التوصيل الآمنة (SSL) هي بروتوكول أمان يقوم بإنشاء ارتباط آمن بين الخادم والعميل. إنه جزء من بروتوكول HTTPS الذي يقوم بتشفير البيانات. SSL مهم لأنه يحمي البيانات من التنصت والهجمات ذات الصلة.
بشكل افتراضي ، إذا قمت بإنشاء تطبيق React باستخدام تطبيق create-رد فعل ، فلن يستخدم التطبيق HTTPS. يعد تمكين HTTPS لتطبيقك مفيدًا خاصةً إذا كنت تخطط لتوكيل طلبات لواجهة برمجة تطبيقات تخدمها عبر HTTPS.
استخدام HTTPS في React
عندما انت إنشاء تطبيق باستخدام create-react-app، يتم تشغيله افتراضيًا على HTTP. لاستخدام SSL وعرض الصفحات عبر HTTPS ، ستحتاج إلى تعيين HTTPS متغير إلى صحيح في package.json. قم بذلك عن طريق تعديل ملف scripts.start القيمة لتبدو مثل هذا:
"نصوص": {
"بداية": "HTTPS =حقيقي تبدأ البرامج النصية للتفاعل "،
},
بدلاً من ذلك ، يمكنك ضبط ملف HTTPS متغير البيئة إلى صحيح عند بدء تشغيل التطبيق الخاص بك.
على Linux / macOS:
HTTPS =حقيقي بدء npm
على نظام Windows cmd:
تعيين HTTPS =حقيقي&& npm بداية
على Windows Powershell:
($ env: HTTPS = "حقيقي") -و (بدء npm)
ومع ذلك ، فإن كل نهج هو مجرد خطوة أولى. إذا حاولت بدء تطبيق React في هذه المرحلة ، فستتلقى خطأ. لإكمال العملية ، ستحتاج إلى إعداد ملف
شهادة SSL.قم بإنشاء مرجع مصدق على جهازك
إحدى الأدوات التي يمكنك استخدامها لإنشاء شهادة SSL هي mkcert. يسمح لك بإنشاء شهادات تطوير تم اختبارها محليًا دون تكوين أي شيء.
إنه متوافق مع الأنظمة الأساسية ويعمل على أنظمة التشغيل Windows و Linux و macOS. تستخدم هذه المقالة نظام Linux.
ابحث عن دليل تثبيت النظام الأساسي الذي تستخدمه من ملف صفحة mkcert GitHub.
ابدأ بالتثبيت سيرتوتيل.
sudo apt تثبيت أدوات libnss3
ثم يمكنك تثبيت ملفات مكيرت باستخدام البيرة
الشراب تثبيت مكيرت
قم بإنشاء مرجع مصدق محلي (Ca) عن طريق تشغيل الأمر التالي.
مكيرت -تثبيت
بعد إنشاء المرجع المصدق (CA) بنجاح ، يمكنك الآن البدء في إنشاء شهادات SSL.
إنشاء شهادة SSL
انتقل إلى المجلد الجذر لتطبيق React الخاص بك وأنشئ شهادة SSL.
أولاً ، قم بإنشاء مجلد للشهادة.
mkdir رد
قم بتشغيل ما يلي لإنشاء الشهادة وتخزينها في المجلد الذي أنشأته للتو.
mkcert -key-file ./reactcert/key.pem -cert-file ./reactcert/cert.pem "مضيف محلي"
تكوين React لاستخدام SSL
في package.json ، أضف مسارًا يشير إلى شهادات SSL.
"نصوص": {
"بداية":
"HTTPS =حقيقيSSL_CRT_FILE =. / reactioncert / cert.pem SSL_KEY_FILE =. / رد فعل / key.pem رد فعل البرامج النصية تبدأ "
}
تأمين موقع رد الفعل الخاص بك باستخدام SSL
أوضح لك هذا المقال كيف يمكنك استخدام شهادات SSL في بيئة React المحلية. ومع ذلك ، تعد شهادات SSL ضرورية لجميع تطبيقات الويب. إنهم يحمون موقع الويب الخاص بك من المتسللين ويحميون بيانات المستخدمين الذين يزورون موقعك.
