এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

স্থানীয় উন্নয়নের জন্য HTTPS ব্যবহার করুন

Maud Nalpas

বেশিরভাগ সময়, ডেভেলপমেন্টের জন্য http://localhost HTTPS-এর মতোই আচরণ করে। তবে, কিছু বিশেষ ক্ষেত্র রয়েছে, যেমন কাস্টম হোস্টনেম বা বিভিন্ন ব্রাউজারে সুরক্ষিত কুকি ব্যবহার করা, যেখানে আপনার সাইটটি প্রোডাকশনে কীভাবে কাজ করে তা সঠিকভাবে তুলে ধরার জন্য ডেভেলপমেন্ট সাইটটিকে HTTPS-এর মতো আচরণ করানোর জন্য স্পষ্টভাবে সেট আপ করতে হবে। (যদি আপনার প্রোডাকশন ওয়েবসাইটে HTTPS ব্যবহার করা না হয়, তবে HTTPS-এ স্যুইচ করাকে অগ্রাধিকার দিন )।

এই পৃষ্ঠায় ব্যাখ্যা করা হয়েছে কীভাবে HTTPS ব্যবহার করে আপনার সাইট স্থানীয়ভাবে চালাবেন।

দ্রষ্টব্য: এই পোস্টে, localhost সম্পর্কিত বিবৃতিগুলো 127.0.0.1 এবং [::1] এর জন্যও প্রযোজ্য, কারণ উভয়ই স্থানীয় কম্পিউটার ঠিকানা (যাকে লুপব্যাক অ্যাড্রেসও বলা হয়) বর্ণনা করে। বিষয়টিকে সহজ রাখার জন্য, এই নির্দেশাবলীতে পোর্ট নম্বর উল্লেখ করা হয়নি। তাই যখন আপনি http://localhost দেখবেন, তখন এটিকে http://localhost:{PORT} অথবা http://127.0.0.1:{PORT} হিসেবে পড়ুন।

সংক্ষিপ্ত নির্দেশাবলীর জন্য, এমকেসার্ট কুইক রেফারেন্স দেখুন।

mkcert ব্যবহার করে আপনার সাইটটি স্থানীয়ভাবে HTTPS সহ চালান (প্রস্তাবিত)।

আপনার লোকাল ডেভেলপমেন্ট সাইটে HTTPS ব্যবহার করতে এবং https://localhost বা https://mysite.example (কাস্টম হোস্টনেম) অ্যাক্সেস করতে, আপনার এমন একটি TLS সার্টিফিকেট প্রয়োজন যা আপনার ডিভাইস এবং ব্রাউজারের বিশ্বস্ত কোনো সত্তা দ্বারা স্বাক্ষরিত। এই সত্তাটিকে একটি বিশ্বস্ত সার্টিফিকেট অথরিটি (CA) বলা হয়। HTTPS সংযোগ তৈরি করার আগে ব্রাউজার যাচাই করে দেখে যে আপনার ডেভেলপমেন্ট সার্ভারের সার্টিফিকেটটি কোনো বিশ্বস্ত CA দ্বারা স্বাক্ষরিত কি না।

আপনার সার্টিফিকেট তৈরি ও স্বাক্ষর করার জন্য আমরা mkcert (একটি ক্রস-প্ল্যাটফর্ম CA) ব্যবহারের পরামর্শ দিই। অন্যান্য সহায়ক বিকল্পের জন্য, “Run your site locally with HTTPS: other options” দেখুন।

অনেক অপারেটিং সিস্টেমে সার্টিফিকেট তৈরির জন্য লাইব্রেরি অন্তর্ভুক্ত থাকে, যেমন openssl । তবে, এগুলো mkcert-এর চেয়ে বেশি জটিল ও কম নির্ভরযোগ্য এবং এগুলো আবশ্যিকভাবে ক্রস-প্ল্যাটফর্ম নয়, যা বড় ডেভেলপার দলগুলোর জন্য এগুলোকে কম সহজলভ্য করে তোলে।

সতর্কতা:

mkcert -install চালানোর সময় mkcert স্বয়ংক্রিয়ভাবে rootCA-key.pem ফাইলটি তৈরি করে, যা কখনও এক্সপোর্ট বা শেয়ার করবেন না। কোনো আক্রমণকারী এই ফাইলটি হাতে পেলে, আপনার ভিজিট করা যেকোনো সাইটের জন্য অন-পাথ অ্যাটাক তৈরি করতে পারে । তারা আপনার মেশিন থেকে যেকোনো সাইটে—আপনার ব্যাংক, স্বাস্থ্যসেবা প্রদানকারী বা সোশ্যাল নেটওয়ার্কে—করা সুরক্ষিত অনুরোধগুলো ইন্টারসেপ্ট করতে পারে। rootCA-key.pem ফাইলটি নিরাপদ কিনা তা নিশ্চিত করতে যদি আপনার এটির অবস্থান জানার প্রয়োজন হয়, তবে mkcert -CAROOT চালান।
শুধুমাত্র ডেভেলপমেন্টের কাজে mkcert ব্যবহার করুন —এবং সেই সূত্রে, সাধারণ ব্যবহারকারীদের কখনো mkcert কমান্ড চালাতে বলবেন না।
ডেভেলপমেন্ট টিম: আপনার টিমের সকল সদস্যকে আলাদাভাবে mkcert ইনস্টল ও রান করতে হবে (CA এবং সার্টিফিকেট সংরক্ষণ ও শেয়ার করা যাবে না)।

সেটআপ

mkcert ইনস্টল করুন (শুধুমাত্র একবার)।
আপনার অপারেটিং সিস্টেমে mkcert ইনস্টল করার জন্য নির্দেশাবলী অনুসরণ করুন। উদাহরণস্বরূপ, macOS-এ:
```
brew install mkcert
brew install nss # if you use Firefox
```
আপনার স্থানীয় রুট CA-গুলিতে mkcert যোগ করুন।
আপনার টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:
```
mkcert -install
```
এটি একটি স্থানীয় সার্টিফিকেট অথরিটি (CA) তৈরি করে। আপনার mkcert দ্বারা তৈরি স্থানীয় CA শুধুমাত্র আপনার ডিভাইসে, অর্থাৎ স্থানীয়ভাবে বিশ্বস্ত।
আপনার সাইটের জন্য mkcert দ্বারা স্বাক্ষরিত একটি সার্টিফিকেট তৈরি করুন।
আপনার টার্মিনালে, আপনার সাইটের রুট ডিরেক্টরিতে অথবা আপনার সার্টিফিকেটটি রাখতে চান এমন যেকোনো ডিরেক্টরিতে যান।
তারপর, দৌড়ান:
```
mkcert localhost
```
আপনি যদি mysite.example মতো কোনো কাস্টম হোস্টনেম ব্যবহার করেন, তাহলে চালান:
```
mkcert mysite.example
```
এই কমান্ডটি দুটি কাজ করে:
- আপনার নির্দিষ্ট করা হোস্টনেমের জন্য একটি সার্টিফিকেট তৈরি করে।
- চলুন mkcert দিয়ে সার্টিফিকেটটি সাইন করি।
আপনার সার্টিফিকেটটি এখন প্রস্তুত এবং এটি এমন একটি সার্টিফিকেট অথরিটি দ্বারা স্বাক্ষরিত, যাকে আপনার ব্রাউজার স্থানীয়ভাবে বিশ্বাস করে।
আপনার সদ্য তৈরি করা TLS সার্টিফিকেটটি ব্যবহার করে HTTPS ব্যবহারের জন্য আপনার সার্ভারটি কনফিগার করুন।
এটি কীভাবে করতে হবে তার বিস্তারিত বিবরণ আপনার সার্ভারের ওপর নির্ভর করে। নিচে কয়েকটি উদাহরণ দেওয়া হলো:
👩🏻‍💻 নোডের সাথে:
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-সার্ভার সহ :
নিম্নলিখিতভাবে আপনার সার্ভার চালু করুন ( {PATH/TO/CERTIFICATE...} প্রতিস্থাপন করুন):
```
http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
```
-S আপনার সার্ভারকে HTTPS-এর মাধ্যমে চালু করে, অন্যদিকে -C সার্টিফিকেট এবং -K কী (key) সেট করে।
👩🏻‍💻 একটি রিয়্যাক্ট ডেভেলপমেন্ট সার্ভার দিয়ে:
আপনার 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"
```
👩🏻‍💻 অন্যান্য উদাহরণ:
- অ্যাঙ্গুলার ডেভেলপমেন্ট সার্ভার
- পাইথন
আপনার সাইটটি স্থানীয়ভাবে HTTPS-এর মাধ্যমে চলছে কিনা, তা পুনরায় যাচাই করতে আপনার ব্রাউজারে https://localhost অথবা https://mysite.example খুলুন। আপনি ব্রাউজারে কোনো সতর্কবার্তা দেখতে পাবেন না, কারণ আপনার ব্রাউজার mkcert-কে একটি স্থানীয় সার্টিফিকেট অথরিটি হিসেবে বিশ্বাস করে।

এমকেসার্ট দ্রুত রেফারেন্স

আপনার স্থানীয় ডেভেলপমেন্ট সাইটটি HTTPS দিয়ে চালাতে:

mkcert সেট আপ করুন।
যদি এখনও না করে থাকেন, তাহলে mkcert ইনস্টল করুন, উদাহরণস্বরূপ macOS-এ:
```
brew install mkcert
```
উইন্ডোজ এবং লিনাক্সের জন্য mkcert ইনস্টল করার নির্দেশাবলী দেখুন।
তারপর, একটি স্থানীয় সার্টিফিকেট অথরিটি তৈরি করুন:
```
mkcert -install
```
একটি বিশ্বস্ত সার্টিফিকেট তৈরি করুন।
```
mkcert {YOUR HOSTNAME e.g. localhost or mysite.example}
```
এর মাধ্যমে একটি বৈধ সার্টিফিকেট তৈরি হয়, যা mkcert স্বয়ংক্রিয়ভাবে স্বাক্ষর করে।
আপনার ডেভেলপমেন্ট সার্ভারটিকে HTTPS এবং ধাপ ২-এ তৈরি করা সার্টিফিকেটটি ব্যবহার করার জন্য কনফিগার করুন।

এখন আপনি কোনো সতর্কবার্তা ছাড়াই আপনার ব্রাউজারে https://{YOUR HOSTNAME} অ্যাক্সেস করতে পারবেন।

সতর্কতা: এটি শুধুমাত্র ডেভেলপমেন্টের উদ্দেশ্যে করুন এবং rootCA-key.pem ফাইলটি কখনও এক্সপোর্ট বা শেয়ার করবেন না । ফাইলটি নিরাপদ কিনা তা নিশ্চিত করতে এর অবস্থান জানার প্রয়োজন হলে, mkcert -CAROOT চালান।

</div>

আপনার সাইটটি স্থানীয়ভাবে HTTPS দিয়ে চালান: অন্যান্য বিকল্প

আপনার সার্টিফিকেট সেট আপ করার জন্য নিম্নলিখিত অন্যান্য উপায়গুলো রয়েছে। এগুলো সাধারণত mkcert ব্যবহার করার চেয়ে বেশি জটিল বা ঝুঁকিপূর্ণ।

স্ব-স্বাক্ষরিত শংসাপত্র

আপনি চাইলে mkcert-এর মতো কোনো স্থানীয় সার্টিফিকেট অথরিটি ব্যবহার না করে, তার পরিবর্তে নিজেই আপনার সার্টিফিকেটটি সাইন করতে পারেন। এই পদ্ধতির কিছু অসুবিধা রয়েছে:

ব্রাউজারগুলো আপনাকে সার্টিফিকেট অথরিটি হিসেবে বিশ্বাস করে না, তাই তারা এমন সতর্কবার্তা দেখাবে যা আপনাকে ম্যানুয়ালি এড়িয়ে যেতে হবে। ক্রোমে, আপনি localhost এই সতর্কবার্তাটি স্বয়ংক্রিয়ভাবে এড়িয়ে যেতে #allow-insecure-localhost ফ্ল্যাগটি ব্যবহার করতে পারেন।
আপনি যদি একটি অসুরক্ষিত নেটওয়ার্কে কাজ করেন তবে এটি অনিরাপদ।
এটি mkcert-এর মতো স্থানীয় CA ব্যবহার করার চেয়ে অগত্যা সহজ বা দ্রুততর নয়।
সেলফ-সাইন্ড সার্টিফিকেটগুলো ট্রাস্টেড সার্টিফিকেটের মতো হুবহু একই ভাবে কাজ করবে না।
আপনি যদি ব্রাউজারের প্রেক্ষাপটে এই কৌশলটি ব্যবহার না করেন, তাহলে আপনার সার্ভারের জন্য সার্টিফিকেট যাচাইকরণ নিষ্ক্রিয় করতে হবে। প্রোডাকশনে এটি পুনরায় সক্রিয় করতে ভুলে গেলে নিরাপত্তাজনিত সমস্যা দেখা দেয়।

সেলফ-সাইন্ড সার্টিফিকেট ব্যবহার করা হলে ব্রাউজারগুলো যে সতর্কবার্তা দেখায়, তার স্ক্রিনশট। — সেলফ-সাইন্ড সার্টিফিকেট ব্যবহার করা হলে ব্রাউজারগুলো যে সতর্কবার্তাগুলো দেখায়।

আপনি যদি কোনো সার্টিফিকেট নির্দিষ্ট না করেন, তাহলে React এবং Vue-এর ডেভেলপমেন্ট সার্ভারের HTTPS অপশনগুলো স্বয়ংক্রিয়ভাবে একটি সেলফ-সাইন্ড সার্টিফিকেট তৈরি করে নেয়। এই প্রক্রিয়াটি দ্রুত হলেও, এতে সেলফ-সাইন্ড সার্টিফিকেটের মতোই ব্রাউজারের সতর্কবার্তা এবং অন্যান্য সমস্যাগুলো থাকে। সৌভাগ্যবশত, আপনি ফ্রন্টএন্ড ফ্রেমওয়ার্কগুলোর বিল্ট-ইন HTTPS অপশন ব্যবহার করতে পারেন এবং mkcert বা অনুরূপ কোনো টুল দিয়ে তৈরি স্থানীয়ভাবে বিশ্বস্ত একটি সার্টিফিকেট নির্দিষ্ট করে দিতে পারেন। আরও তথ্যের জন্য, React-এর সাথে mkcert উদাহরণটি দেখুন।

ব্রাউজারগুলো কেন সেলফ-সাইন্ড সার্টিফিকেট বিশ্বাস করে না?

আপনি যদি HTTPS ব্যবহার করে আপনার ব্রাউজারে স্থানীয়ভাবে চলমান সাইটটি খোলেন, তবে আপনার ব্রাউজার আপনার স্থানীয় ডেভেলপমেন্ট সার্ভারের সার্টিফিকেটটি যাচাই করে। যখন এটি দেখে যে আপনি নিজেই সার্টিফিকেটটিতে স্বাক্ষর করেছেন, তখন এটি পরীক্ষা করে দেখে যে আপনি একজন বিশ্বস্ত সার্টিফিকেট কর্তৃপক্ষ হিসেবে নিবন্ধিত আছেন কি না। যেহেতু আপনি নিবন্ধিত নন, তাই আপনার ব্রাউজার সার্টিফিকেটটিকে বিশ্বাস করতে পারে না এবং একটি সতর্কবার্তা দেখিয়ে জানায় যে আপনার সংযোগটি সুরক্ষিত নয়। আপনি যদি এগিয়ে যান, তবে এটি তবুও HTTPS সংযোগটি তৈরি করে, কিন্তু আপনি তা নিজের ঝুঁকিতেই করেন।

একটি নিয়মিত সনদ কর্তৃপক্ষ দ্বারা স্বাক্ষরিত সনদ

আপনি কোনো অফিসিয়াল CA দ্বারা স্বাক্ষরিত সার্টিফিকেটও ব্যবহার করতে পারেন। এর সাথে নিম্নলিখিত জটিলতাগুলো রয়েছে:

mkcert-এর মতো স্থানীয় CA কৌশল ব্যবহার করার চেয়ে আপনাকে আরও বেশি সেটআপের কাজ করতে হবে।
আপনাকে একটি বৈধ ডোমেইন নাম ব্যবহার করতে হবে যা আপনার নিয়ন্ত্রণে থাকে। এর মানে হলো, আপনি নিম্নলিখিত ক্ষেত্রগুলির জন্য অফিসিয়াল CA ব্যবহার করতে পারবেন না:
- localhost এবং অন্যান্য সংরক্ষিত ডোমেইন নাম, যেমন example বা test ।
- এমন যেকোনো ডোমেইন নাম যা আপনার নিয়ন্ত্রণে নেই।
- অবৈধ টপ-লেভেল ডোমেইন। আরও তথ্যের জন্য, বৈধ টপ-লেভেল ডোমেইনের তালিকা দেখুন।

বিপরীত প্রক্সি

স্থানীয়ভাবে চলমান কোনো সাইট HTTPS-এর মাধ্যমে অ্যাক্সেস করার আরেকটি উপায় হলো ngrok-এর মতো রিভার্স প্রক্সি ব্যবহার করা। এর সাথে নিম্নলিখিত ঝুঁকিগুলো জড়িত:

আপনি যার সাথেই রিভার্স প্রক্সি ইউআরএল শেয়ার করবেন, সে আপনার লোকাল ডেভেলপমেন্ট সাইট অ্যাক্সেস করতে পারবে। এটি ক্লায়েন্টদের কাছে আপনার প্রজেক্ট ডেমো করার জন্য সহায়ক হতে পারে, কিন্তু এর মাধ্যমে অননুমোদিত ব্যক্তিরাও সংবেদনশীল তথ্য শেয়ার করতে পারে।
কিছু রিভার্স প্রক্সি পরিষেবা ব্যবহারের জন্য চার্জ করে, তাই পরিষেবা বেছে নেওয়ার ক্ষেত্রে মূল্য একটি বিবেচ্য বিষয় হতে পারে।
ব্রাউজারের নতুন নিরাপত্তা ব্যবস্থা এই টুলগুলোর কার্যকারিতাকে প্রভাবিত করতে পারে।

ফ্ল্যাগ (সুপারিশ করা হচ্ছে না)

আপনি যদি ক্রোমে mysite.example মতো কোনো কাস্টম হোস্টনেম ব্যবহার করেন, তাহলে ব্রাউজারকে mysite.example নিরাপদ হিসেবে বিবেচনা করতে বাধ্য করার জন্য একটি ফ্ল্যাগ ব্যবহার করতে পারেন। নিম্নলিখিত কারণগুলোর জন্য এটি করা থেকে বিরত থাকুন :

আপনাকে শতভাগ নিশ্চিত হতে হবে যে mysite.example সর্বদা একটি স্থানীয় ঠিকানায় রিজলভ হয়। অন্যথায়, আপনার প্রোডাকশন ক্রেডেনশিয়াল ফাঁস হওয়ার ঝুঁকি থাকবে।
এই ফ্ল্যাগটি শুধুমাত্র ক্রোমে কাজ করে, তাই আপনি বিভিন্ন ব্রাউজারে ডিবাগ করতে পারবেন না।

সকল পর্যালোচক এবং অবদানকারীদের—বিশেষ করে রায়ান স্লিভি, ফিলিপ্পো ভালসোর্দা, মিলিকা মিহাজলিয়া এবং রোয়ান মেরেউডকে তাদের অবদান ও মতামতের জন্য অসংখ্য ধন্যবাদ। 🙌

হিরো ইমেজ ব্যাকগ্রাউন্ডটি আনস্প্ল্যাশ- এ @anandu- এর সৌজন্যে এবং সম্পাদিত।