इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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 को अलग-अलग इंस्टॉल और चलाना चाहिए. साथ ही, सीए और सर्टिफ़िकेट को सेव और शेयर नहीं करना चाहिए.

सेटअप

mkcert इंस्टॉल करें (सिर्फ़ एक बार).

अपने ऑपरेटिंग सिस्टम पर mkcert इंस्टॉल करने के लिए निर्देशों का पालन करें. उदाहरण के लिए, macOS पर:
```
brew install mkcert
brew install nss # if you use Firefox
```
अपने स्थानीय रूट सीए में mkcert जोड़ें.

अपने टर्मिनल में, यह कमांड चलाएं:
```
mkcert -install
```
इससे एक लोकल सर्टिफ़िकेट देने वाली संस्था (CA) जनरेट होती है. mkcert से जनरेट किया गया स्थानीय सीए, सिर्फ़ आपके डिवाइस पर स्थानीय तौर पर भरोसेमंद होता है.
अपनी साइट के लिए mkcert से मिला सर्टिफ़िकेट जनरेट करें.

अपने टर्मिनल में, अपनी साइट की रूट डायरेक्ट्री या उस डायरेक्ट्री पर जाएं जिसमें आपको अपना सर्टिफ़िकेट रखना है.

इसके बाद, यह चलाएं:
```
mkcert localhost
```
अगर mysite.example जैसे कस्टम होस्टनेम का इस्तेमाल किया जा रहा है, तो इसे चलाएं:
```
mkcert mysite.example
```
यह निर्देश दो काम करता है:
- आपके बताए गए होस्टनेम के लिए सर्टिफ़िकेट जनरेट करता है.
- सर्टिफ़िकेट पर mkcert पर हस्ताक्षर करने की सुविधा मिलती है.
आपका सर्टिफ़िकेट अब तैयार है. इस पर, सर्टिफ़िकेट अथॉरिटी का हस्ताक्षर है. आपके ब्राउज़र को इस अथॉरिटी पर भरोसा है.
अपने सर्वर को एचटीटीपीएस और आपके बनाए गए 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 आपके सर्वर को एचटीटीपीएस पर काम करता है. वहीं, -C सर्टिफ़िकेट और -K कुंजी सेट करता है.

👩🏻‍💻 React डेवलपमेंट सर्वर का इस्तेमाल करके:

अपने package.json में नीचे बताए गए तरीके से बदलाव करें और {PATH/TO/CERTIFICATE...} की जगह {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
अपने ब्राउज़र में https://localhost या https://mysite.example खोलें और यह देखें कि आपकी साइट, एचटीटीपीएस के साथ लोकल तौर पर चल रही है या नहीं. आपको ब्राउज़र से कोई चेतावनी नहीं दिखेगी, क्योंकि आपका ब्राउज़र, mkcert को स्थानीय सर्टिफ़िकेट देने वाली संस्था के तौर पर भरोसा करता है.

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

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

mkcert सेट अप करें.

अगर आपने अभी तक mkcert को इंस्टॉल नहीं किया है, तो उदाहरण के लिए macOS पर इसे इंस्टॉल करें:
```
brew install mkcert
```
Windows और Linux के लिए निर्देशों के बारे में जानने के लिए, mkcert इंस्टॉल करें पर जाएं.

इसके बाद, स्थानीय सर्टिफ़िकेट देने वाली संस्था बनाएं:
```
mkcert -install
```
भरोसेमंद सर्टिफ़िकेट बनाएं.
```
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
```
इससे एक मान्य सर्टिफ़िकेट बनता है, जिस पर mkcert अपने-आप हस्ताक्षर करता है.
अपने डेवलपमेंट सर्वर को एचटीटीपीएस और चरण 2 में बनाए गए सर्टिफ़िकेट का इस्तेमाल करने के लिए कॉन्फ़िगर करें.

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

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

</div>

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

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

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

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

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

अपने-आप हस्ताक्षर किए गए सर्टिफ़िकेट का इस्तेमाल करने पर, ब्राउज़र पर दिखने वाली चेतावनियों के स्क्रीनशॉट. — ब्राउज़र पर, अपने-आप हस्ताक्षर किए गए सर्टिफ़िकेट का इस्तेमाल करने पर दिखने वाली चेतावनियां.

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

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

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

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

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

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

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

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

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

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

शिकायत करना (इसका सुझाव नहीं दिया जाता)

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

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

समीक्षा करने और योगदान देने वाले सभी लोगों का धन्यवाद. खास तौर पर, Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, और Rowan Merewood का धन्यवाद. 🙌

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