लोकल डेवलपमेंट के लिए एचटीटीपीएस का इस्तेमाल करना

Maud Nalpas

ज़्यादातर मामलों में, http://localhost डेवलपमेंट के लिए एचटीटीपीएस की तरह काम करता है. हालांकि, कुछ खास मामलों में आपको अपनी डेवलपमेंट साइट को एचटीटीपीएस की तरह काम करने के लिए सेट अप करना होगा. जैसे, कस्टम होस्टनेम या सभी ब्राउज़र पर सुरक्षित कुकी का इस्तेमाल करना. इससे यह सटीक तरीके से पता चलेगा कि आपकी साइट प्रोडक्शन में कैसे काम करती है. (अगर आपकी प्रोडक्शन वेबसाइट एचटीटीपीएस का इस्तेमाल नहीं करती है, तो एचटीटीपीएस पर स्विच करना आपकी प्राथमिकता होनी चाहिए).

इस पेज पर, एचटीटीपीएस का इस्तेमाल करके अपनी साइट को स्थानीय तौर पर चलाने का तरीका बताया गया है.

ध्यान दें: इस पोस्ट में, localhost के बारे में दिए गए स्टेटमेंट, 127.0.0.1 और [::1] के लिए भी मान्य हैं. ऐसा इसलिए, क्योंकि ये दोनों लोकल कंप्यूटर पते (इसे लूपबैक पता भी कहा जाता है) के बारे में बताते हैं. इन निर्देशों में पोर्ट नंबर के बारे में नहीं बताया गया है, ताकि इन्हें आसानी से समझा जा सके. इसलिए, जब आपको http://localhost दिखे, तो इसे http://localhost:{PORT} या http://127.0.0.1:{PORT} के तौर पर पढ़ें.

संक्षिप्त निर्देशों के लिए, mkcert के बारे में खास जानकारी देखें.**

mkcert का इस्तेमाल करके, अपनी साइट को स्थानीय तौर पर एचटीटीपीएस के साथ चलाएं (सुझाया गया)

अपनी लोकल डेवलपमेंट साइट के साथ एचटीटीपीएस का इस्तेमाल करने और https://localhost या https://mysite.example (कस्टम होस्टनेम) को ऐक्सेस करने के लिए, आपको TLS सर्टिफ़िकेट की ज़रूरत होगी. इस पर ऐसी इकाई के हस्ताक्षर होने चाहिए जिस पर आपका डिवाइस और ब्राउज़र भरोसा करते हैं. इसे भरोसेमंद सर्टिफ़िकेट देने वाली संस्था (सीए) कहा जाता है. एचटीटीपीएस कनेक्शन बनाने से पहले, ब्राउज़र यह जांच करता है कि आपके डेवलपमेंट सर्वर के सर्टिफ़िकेट पर किसी भरोसेमंद सीए के हस्ताक्षर हैं या नहीं.

हमारा सुझाव है कि आप अपना सर्टिफ़िकेट बनाने और उस पर हस्ताक्षर करने के लिए, mkcert का इस्तेमाल करें. यह एक क्रॉस-प्लैटफ़ॉर्म सीए है. अन्य मददगार विकल्पों के लिए, एचटीटीपीएस का इस्तेमाल करके अपनी साइट को स्थानीय तौर पर चलाना: अन्य विकल्प लेख पढ़ें.

कई ऑपरेटिंग सिस्टम में, सर्टिफ़िकेट बनाने के लिए लाइब्रेरी शामिल होती हैं. जैसे, openssl. हालांकि, ये mkcert से ज़्यादा जटिल और कम भरोसेमंद हैं. साथ ही, ज़रूरी नहीं कि ये क्रॉस-प्लैटफ़ॉर्म हों. इस वजह से, डेवलपर की बड़ी टीमें इनका इस्तेमाल कम करती हैं.

चेतावनी:

• mkcert -install चलाने पर, mkcert अपने-आप rootCA-key.pem फ़ाइल बनाता है. इसे कभी एक्सपोर्ट या शेयर न करें. अगर किसी हमलावर को यह फ़ाइल मिल जाती है, तो वह आपकी विज़िट की जाने वाली किसी भी साइट के लिए, ऑन-पाथ हमले कर सकता है. ये कुकी, आपकी मशीन से किसी भी साइट (जैसे, आपका बैंक, स्वास्थ्य सेवा देने वाली कंपनी या सोशल नेटवर्क) पर किए गए सुरक्षित अनुरोधों को इंटरसेप्ट कर सकती हैं. अगर आपको यह जानना है कि rootCA-key.pem कहां है, ताकि यह पक्का किया जा सके कि यह सुरक्षित है, तो mkcert -CAROOT चलाएं.
• mkcert का इस्तेमाल सिर्फ़ डेवलपमेंट के लिए करें. साथ ही, कभी भी असली उपयोगकर्ताओं से mkcert कमांड चलाने के लिए न कहें.
• डेवलपमेंट टीमें: आपकी टीम के सभी सदस्यों को 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. अपने सर्वर को कॉन्फ़िगर करें, ताकि वह अभी बनाए गए टीएलएस सर्टिफ़िकेट का इस्तेमाल करके एचटीटीपीएस का इस्तेमाल कर सके.

   इसे करने का तरीका, आपके सर्वर पर निर्भर करता है. यहां कुछ उदाहरण दिए गए हैं:

   👩🏻‍💻 नोड के साथ:

   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 आपके सर्वर को एचटीटीपीएस के साथ चलाता है, जबकि -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 खोलें. इससे यह पक्का किया जा सकेगा कि आपकी साइट को एचटीटीपीएस के साथ स्थानीय तौर पर चलाया जा रहा है. आपको ब्राउज़र से कोई चेतावनी नहीं दिखेगी, क्योंकि आपका ब्राउज़र mkcert को लोकल सर्टिफ़िकेट अथॉरिटी के तौर पर मानता है.

mkcert के बारे में खास जानकारी

mkcert के बारे में खास जानकारी

एचटीटीपीएस के साथ अपनी लोकल डेवलपमेंट साइट चलाने के लिए:

1. mkcert सेट अप करें.

   अगर आपने अब तक mkcert इंस्टॉल नहीं किया है, तो इसे इंस्टॉल करें. उदाहरण के लिए, macOS पर इसे ऐसे इंस्टॉल करें:

   brew install mkcert
   
   
   

   Windows और Linux पर mkcert इंस्टॉल करने के निर्देशों के लिए, mkcert इंस्टॉल करें लेख पढ़ें.

   इसके बाद, सर्टिफ़िकेट देने वाली स्थानीय संस्था बनाएं:

   mkcert -install

2. भरोसेमंद सर्टिफ़िकेट बनाएं.

   mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}

   इससे एक मान्य सर्टिफ़िकेट बनता है, जिस पर mkcert अपने-आप हस्ताक्षर करता है.

3. अपने डेवलपमेंट सर्वर को एचटीटीपीएस और दूसरे चरण में बनाए गए सर्टिफ़िकेट का इस्तेमाल करने के लिए कॉन्फ़िगर करें.

अब आपको ब्राउज़र में https://{YOUR HOSTNAME} ऐक्सेस करने पर चेतावनियां नहीं दिखेंगी

चेतावनी: ऐसा सिर्फ़ डेवलपमेंट के मकसद से करें. साथ ही, फ़ाइल को कभी भी एक्सपोर्ट या शेयर न करेंrootCA-key.pem. अगर आपको यह जानना है कि यह फ़ाइल कहां मौजूद है, ताकि यह पक्का किया जा सके कि यह सुरक्षित है, तो mkcert -CAROOT चलाएं.

</div>

अपनी साइट को एचटीटीपीएस के साथ स्थानीय तौर पर चलाना: अन्य विकल्प

सर्टिफ़िकेट सेट अप करने के अन्य तरीके यहां दिए गए हैं. ये आम तौर पर, mkcert का इस्तेमाल करने से ज़्यादा मुश्किल या जोखिम भरे होते हैं.

खुद हस्ताक्षर किया गया सर्टिफ़िकेट

आपके पास mkcert जैसी स्थानीय सर्टिफ़िकेट अथॉरिटी का इस्तेमाल न करने का विकल्प भी होता है. इसके बजाय, अपने सर्टिफ़िकेट पर खुद हस्ताक्षर करें. इस तरीके में कुछ समस्याएं हैं:

• ब्राउज़र, आपको सर्टिफ़िकेट देने वाली संस्था के तौर पर भरोसा नहीं करते. इसलिए, वे आपको चेतावनियां दिखाएंगे. आपको इन चेतावनियों को मैन्युअल तरीके से अनदेखा करना होगा. Chrome में, #allow-insecure-localhost फ़्लैग का इस्तेमाल करके, localhost पर इस चेतावनी को अपने-आप अनदेखा किया जा सकता है.
• अगर असुरक्षित नेटवर्क पर काम किया जा रहा है, तो यह तरीका सुरक्षित नहीं है.
• यह mkcert जैसे लोकल सीए का इस्तेमाल करने से ज़्यादा आसान या तेज़ नहीं है.
• खुद हस्ताक्षर किए हुए सर्टिफ़िकेट, भरोसेमंद सर्टिफ़िकेट की तरह काम नहीं करेंगे.
• अगर ब्राउज़र के कॉन्टेक्स्ट में इस तकनीक का इस्तेमाल नहीं किया जा रहा है, तो आपको अपने सर्वर के लिए, सर्टिफ़िकेट की पुष्टि करने की सुविधा बंद करनी होगी. इसे प्रोडक्शन में फिर से चालू न करने पर, सुरक्षा से जुड़ी समस्याएं हो सकती हैं.

सेल्फ़-साइन किए गए सर्टिफ़िकेट का इस्तेमाल करने पर, ब्राउज़र ये चेतावनियां दिखाते हैं.

अगर कोई सर्टिफ़िकेट नहीं दिया जाता है, तो React और Vue के डेवलपमेंट सर्वर के एचटीटीपीएस विकल्प, अपने-आप हस्ताक्षर किया गया सर्टिफ़िकेट बनाते हैं. यह तरीका आसान है, लेकिन इसमें ब्राउज़र से मिलने वाली चेतावनियां और खुद हस्ताक्षर किए गए सर्टिफ़िकेट से जुड़ी अन्य समस्याएं भी शामिल हैं. हालांकि, फ़्रंटएंड फ़्रेमवर्क में एचटीटीपीएस का विकल्प पहले से मौजूद होता है. इसका इस्तेमाल किया जा सकता है. साथ ही, mkcert या इसी तरह के किसी टूल का इस्तेमाल करके बनाया गया, स्थानीय तौर पर भरोसेमंद सर्टिफ़िकेट भी तय किया जा सकता है. ज़्यादा जानकारी के लिए, mkcert with React का उदाहरण देखें.

ब्राउज़र, खुद हस्ताक्षर किए हुए सर्टिफ़िकेट पर भरोसा क्यों नहीं करते?

अगर आपने एचटीटीपीएस का इस्तेमाल करके, अपने ब्राउज़र में स्थानीय तौर पर चल रही साइट खोली है, तो आपका ब्राउज़र, लोकल डेवलपमेंट सर्वर के सर्टिफ़िकेट की जांच करता है. जब इसे पता चलता है कि आपने सर्टिफ़िकेट पर खुद हस्ताक्षर किया है, तो यह जांच करता है कि आपने भरोसेमंद सर्टिफ़िकेट जारी करने वाली संस्था के तौर पर रजिस्टर किया है या नहीं. ऐसा इसलिए है, क्योंकि आपका ब्राउज़र इस बात की पुष्टि नहीं कर सका है कि आप ही इस सर्टिफ़िकेट के मालिक हैं. इसलिए, वह इस सर्टिफ़िकेट पर भरोसा नहीं कर सकता. साथ ही, वह आपको एक चेतावनी दिखाता है, जिसमें बताया जाता है कि आपका कनेक्शन सुरक्षित नहीं है. अगर आपने आगे बढ़ने का फ़ैसला किया, तो भी एचटीटीपीएस कनेक्शन बन जाएगा. हालांकि, ऐसा करने पर आपको जोखिम उठाना पड़ सकता है.

ब्राउज़र, खुद के हस्ताक्षर वाले सर्टिफ़िकेट पर भरोसा क्यों नहीं करते.

सर्टिफ़िकेट देने वाली किसी सामान्य संस्था से मिला सर्टिफ़िकेट

किसी आधिकारिक सीए से साइन किया गया सर्टिफ़िकेट भी इस्तेमाल किया जा सकता है. इसके साथ ये विजेट मिलते हैं:

• mkcert जैसी लोकल सीए तकनीक का इस्तेमाल करने की तुलना में, आपको सेटअप करने के लिए ज़्यादा काम करना होगा.
• आपको ऐसे मान्य डोमेन नेम का इस्तेमाल करना होगा जिसे कंट्रोल करने का अधिकार आपके पास हो. इसका मतलब है कि इन कामों के लिए, आधिकारिक सीए का इस्तेमाल नहीं किया जा सकता:
  • localhost और example या test जैसे अन्य रिज़र्व डोमेन नेम.
  • ऐसा कोई भी डोमेन नेम जिसे कंट्रोल करने का अधिकार आपके पास नहीं है.
  • अमान्य टॉप-लेवल डोमेन. ज़्यादा जानकारी के लिए, मान्य टॉप-लेवल डोमेन की सूची देखें.

रिवर्स प्रॉक्सी

एचटीटीपीएस का इस्तेमाल करके, स्थानीय तौर पर चल रही साइट को ऐक्सेस करने का एक और तरीका है. इसके लिए, ngrok जैसे रिवर्स प्रॉक्सी का इस्तेमाल करें. इससे ये जोखिम हो सकते हैं:

• आपने जिसके साथ भी रिवर्स प्रॉक्सी यूआरएल शेयर किया है वह आपकी लोकल डेवलपमेंट साइट को ऐक्सेस कर सकता है. इससे क्लाइंट को अपना प्रोजेक्ट दिखाने में मदद मिल सकती है. हालांकि, इससे अनधिकृत लोगों को संवेदनशील जानकारी शेयर करने की अनुमति भी मिल सकती है.
• कुछ रिवर्स प्रॉक्सी सेवाएं, इस्तेमाल के लिए शुल्क लेती हैं. इसलिए, सेवा चुनते समय कीमत एक अहम फ़ैक्टर हो सकता है.
• ब्राउज़र में सुरक्षा से जुड़े नए तरीकों की वजह से, इन टूल के काम करने के तरीके पर असर पड़ सकता है.

फ़्लैग करना (इसका सुझाव नहीं दिया जाता)

अगर Chrome में mysite.example जैसे कस्टम होस्टनेम का इस्तेमाल किया जा रहा है, तो फ़्लैग का इस्तेमाल करके ब्राउज़र को mysite.example को सुरक्षित मानने के लिए मजबूर किया जा सकता है. इन वजहों से, ऐसा न करें:

• आपको यह पक्का करना होगा कि mysite.example हमेशा किसी स्थानीय पते पर रीडायरेक्ट हो. ऐसा न करने पर, प्रोडक्शन क्रेडेंशियल लीक होने का खतरा होता है.
• यह फ़्लैग सिर्फ़ Chrome में काम करता है. इसलिए, अलग-अलग ब्राउज़र में डीबग नहीं किया जा सकता.

सभी समीक्षकों और योगदान देने वालों को उनके योगदान और सुझाव/राय देने के लिए बहुत-बहुत धन्यवाद. खास तौर पर, रायन स्लीवी, फ़िलिपो वाल्सोर्डा, मिलिका मिहाजलिया, और रोवन मेरवुड को धन्यवाद. 🙌

Unsplash पर @anandu की हीरो इमेज के बैकग्राउंड में बदलाव किया गया है.