استفاده از 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 مراجعه کنید.**

اجرا کردن سایت به‌صورت محلی با اچ‌تی‌تی‌پی‌اس بااستفاده از mkcert (توصیه‌شده)

برای استفاده از HTTPS با سایت توسعه محلی و دسترسی به https://localhost یا https://mysite.example (نام میزبان سفارشی)، به گواهینامه «امنیت لایه انتقال» امضاشده توسط نهادی که دستگاه و مرورگر شما به آن اعتماد دارد نیاز دارید که به آن مرجع صدور گواهی (CA) معتمد می‌گویند. مرورگر قبل‌از ایجاد اتصال HTTPS بررسی می‌کند که آیا گواهینامه سرور توسعه شما توسط یک مرجع صدور گواهینامه معتبر امضا شده است یا نه.

توصیه می‌کنیم از mkcert، یک CA چندسکویی، برای ایجاد و امضای گواهینامه خود استفاده کنید. برای گزینه‌های مفید دیگر، اجرای محلی سایت با HTTPS: گزینه‌های دیگر را ببینید.

بسیاری از سیستم‌عامل‌ها شامل کتابخانه‌هایی برای ایجاد گواهینامه هستند، مانند openssl. بااین‌حال، این ابزارها پیچیده‌تر و کمتر قابل‌اعتماد از mkcert هستند و لزوماً چندسکویی نیستند، که باعث می‌شود برای تیم‌های توسعه‌دهنده بزرگ‌تر کمتر قابل‌دسترس باشند.

احتیاط:

• هرگز فایل rootCA-key.pem را که mkcert به‌طور خودکار هنگام اجرای mkcert -install ایجاد می‌کند صادر یا هم‌رسانی نکنید. مهاجمی که به این فایل دسترسی پیدا کند می‌تواند برای هر سایتی که ممکن است بازدید کنید حملات بین‌راهی ایجاد کند. آن‌ها می‌توانند درخواست‌های امن از دستگاه شما به هر سایتی را رهگیری کنند—بانک، ارائه‌دهنده خدمات بهداشتی، یا شبکه‌های اجتماعی شما. اگر لازم است بدانید rootCA-key.pem کجا قرار دارد تا مطمئن شوید ایمن است، mkcert -CAROOT را اجرا کنید.
• از mkcert فقط برای اهداف توسعه استفاده کنید—و درنتیجه، هرگز از کاربران نهایی نخواهید فرمان‌های mkcert را اجرا کنند.
• تیم‌های توسعه: همه اعضای تیم شما باید mkcert را به‌طور جداگانه نصب و اجرا کنند (CA و گواهی را ذخیره و هم‌رسانی نکنند).

راه‌اندازی

1. mkcert را نصب کنید (فقط یک‌بار).

   دستورالعمل‌های نصب mkcert در سیستم‌عاملتان را دنبال کنید. برای مثال، در macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. mkcert را به CAهای ریشه محلی‌تان اضافه کنید.

   در پایانه، فرمان زیر را اجرا کنید:

   mkcert -install
   

   این کار یک مرجع صدور گواهی (CA) محلی ایجاد می‌کند. مرجع صدور گواهی محلی تولیدشده توسط mkcert فقط به‌صورت محلی در دستگاهتان قابل‌اعتماد است.

3. گواهینامه‌ای برای سایتتان ایجاد کنید که توسط mkcert امضا شده باشد.

   در پایانه، به دایرکتوری ریشه سایتتان یا هر دایرکتوری دیگری که می‌خواهید گواهی‌تان را در آن نگه دارید بروید.

   سپس، این دستور را اجرا کنید:

   mkcert localhost
   

   اگر از نام میزبان سفارشی مانند mysite.example استفاده می‌کنید، این دستور را اجرا کنید:

   mkcert mysite.example
   

   این فرمان دو کار انجام می‌دهد:

   • گواهی‌ای برای نام میزبانی که مشخص کرده‌اید تولید می‌کند.
   • به mkcert اجازه می‌دهد گواهی را امضا کند.

   گواهی شما اکنون آماده است و توسط مرجع صدور گواهی‌ای امضا شده است که مرورگرتان به‌طور محلی به آن اعتماد دارد.

4. سرورتان را پیکربندی کنید تا از HTTPS گواهینامه 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 سرور شما را با HTTPS اجرا می‌کند، درحالی‌که -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 را در مرورگرتان باز کنید تا دوباره بررسی کنید که سایتتان را به‌صورت محلی با HTTPS اجرا می‌کنید. هیچ هشدار مرورگری نخواهید دید، زیرا مرورگرتان به mkcert به‌عنوان مرجع گواهی محلی اعتماد دارد.

مرجع سریع mkcert

مرجع سریع mkcert

برای اجرای سایت توسعه محلی با HTTPS:

1. mkcert را راه‌اندازی کنید.

   اگر هنوز mkcert را نصب نکرده‌اید، آن را نصب کنید، برای مثال در macOS:

   brew install mkcert
   
   
   

   برای دستورالعمل‌های Windows و Linux، نصب mkcert را بررسی کنید.

   سپس، یک مرجع صدور گواهی محلی ایجاد کنید:

   mkcert -install

2. گواهینامه معتبری ایجاد کنید.

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

   با این کار گواهی معتبری ایجاد می‌شود که mkcert به‌طور خودکار آن را امضا می‌کند.

3. سرور توسعه‌تان را پیکربندی کنید تا از HTTPS و گواهینامه‌ای که در مرحله ۲ ایجاد کردید استفاده کند.

اکنون می‌توانید بدون هشدار به https://{YOUR HOSTNAME} در مرورگرتان دسترسی داشته باشید

احتیاط: این کار را فقط برای اهداف توسعه انجام دهید و هرگز فایل rootCA-key.pem را صادر یا هم‌رسانی نکنید. اگر لازم است بدانید این فایل کجا قرار دارد تا مطمئن شوید ایمن است، mkcert -CAROOT را اجرا کنید.

</div>

اجرای محلی سایت با HTTPS: گزینه‌های دیگر

روش‌های دیگر راه‌اندازی گواهی در زیر آمده است. این روش‌ها معمولاً پیچیده‌تر یا پرخطرتر از استفاده از mkcert هستند.

گواهی خودامضا

همچنین می‌توانید تصمیم بگیرید که از مرجع گواهی محلی مانند mkcert استفاده نکنید و درعوض گواهی‌تان را خودتان امضا کنید. این رویکرد چند تله دارد:

• مرورگرها به شما به‌عنوان مرجع صدور گواهی اعتماد ندارند، بنابراین هشدارهایی نشان می‌دهند که باید به‌صورت دستی از آن‌ها عبور کنید. در Chrome، می‌توانید از پرچم #allow-insecure-localhost برای رد کردن خودکار این هشدار در localhost استفاده کنید.
• اگر در شبکه‌ای ناامن کار می‌کنید، این کار ایمن نیست.
• این روش لزوماً آسان‌تر یا سریع‌تر از استفاده از CA محلی مانند mkcert نیست.
• گواهی‌های خودامضا دقیقاً مانند گواهی‌های معتمد عمل نمی‌کنند.
• اگر از این تکنیک در بافت مرورگر استفاده نمی‌کنید، باید درستی‌سنجی گواهی را برای سرورتان غیرفعال کنید. فراموش کردن بازفعال کردن آن در تولید باعث مشکلات امنیتی می‌شود.

هشدارهایی که مرورگرها هنگام استفاده از گواهی خودامضاشده نشان می‌دهند.

اگر گواهینامه‌ای را مشخص نکنید، گزینه‌های HTTPS سرور توسعه React و Vue گواهینامه‌ای خودامضاشده را در پشت صحنه ایجاد می‌کنند. این روش سریع است، اما همان هشدارهای مرورگر و سایر مشکلات گواهینامه‌های خودامضا را دارد. خوشبختانه، می‌توانید از گزینه HTTPS داخلی چارچوب‌های پیش‌نما استفاده کنید و گواهینامه معتبر محلی را که با mkcert یا موارد مشابه ایجاد شده است مشخص کنید. برای اطلاعات بیشتر، نمونه mkcert با React را ببینید.

چرا مرورگرها به گواهی‌های خودامضا اعتماد نمی‌کنند؟

اگر سایت درحال اجرای محلی را بااستفاده از HTTPS در مرورگرتان باز کنید، مرورگرتان گواهی سرور توسعه محلی شما را بررسی می‌کند. وقتی می‌بیند که خودتان گواهینامه را امضا کرده‌اید، بررسی می‌کند که آیا به‌عنوان مرکز صدور گواهی معتبر ثبت شده‌اید یا نه. چون شما نیستید، مرورگرتان نمی‌تواند به گواهینامه اعتماد کند و هشداری نشان می‌دهد که می‌گوید اتصالتان ایمن نیست. اگر ادامه دهید، همچنان اتصال HTTPS ایجاد می‌شود، اما مسئولیت آن با خودتان است.

چرا مرورگرها به گواهینامه‌های خودامضا اعتماد نمی‌کنند.

گواهی امضاشده توسط مرجع صدور گواهی معمولی

همچنین می‌توانید از گواهی امضاشده توسط یک مرجع صدور گواهی رسمی استفاده کنید. این مورد با عملکردهای اضافی زیر ارائه می‌شود:

• درمقایسه با زمانی که از تکنیک CA محلی مانند mkcert استفاده می‌کنید، باید کارهای راه‌اندازی بیشتری انجام دهید.
• باید از نام دامنه معتبری استفاده کنید که تحت کنترل شما باشد. یعنی نمی‌توانید از مراجع صدور گواهی رسمی برای موارد زیر استفاده کنید:
  • localhost و دیگر نام‌های دامنه رزروشده مانند example یا test.
  • هر نام دامنه‌ای که تحت کنترل شما نیست.
  • دامنه‌های سطح بالای نامعتبر. برای اطلاعات بیشتر، به فهرست دامنه‌های سطح بالای معتبر مراجعه کنید.

پراکسی معکوس

گزینه دیگر برای دسترسی به سایت درحال اجرا به‌صورت محلی با HTTPS، استفاده از پراکسی معکوس مثل ngrok است. این کار خطرات زیر را به‌همراه دارد:

• هرکسی که نشانی وب پراکسی معکوس را با او هم‌رسانی کنید می‌تواند به سایت توسعه محلی شما دسترسی پیدا کند. این کار می‌تواند برای نمایش پروژه به مشتریان مفید باشد، اما همچنین می‌تواند به افراد غیرمجاز اجازه دهد اطلاعات حساس را هم‌رسانی کنند.
• برخی‌از سرویس‌های پراکسی معکوس برای استفاده هزینه دریافت می‌کنند، بنابراین قیمت‌گذاری ممکن است عاملی در انتخاب سرویس شما باشد.
• اقدامات امنیتی جدید در مرورگرها می‌تواند بر نحوه عملکرد این ابزارها تأثیر بگذارد.

پرچم زدن (توصیه نمی‌شود)

اگر از نام میزبان سفارشی مانند mysite.example در Chrome استفاده می‌کنید، می‌توانید از پرچم استفاده کنید تا مرورگر را مجبور کنید mysite.example را ایمن درنظر بگیرد. از انجام این کار خودداری کنید به دلایل زیر:

• باید ۱۰۰٪ مطمئن باشید که mysite.example همیشه به نشانی محلی تبدیل می‌شود. درغیراین‌صورت، اعتبارنامه‌های تولید شما درمعرض خطر افشا قرار می‌گیرد.
• این پرچم فقط در Chrome کار می‌کند، بنابراین نمی‌توانید در مرورگرهای مختلف اشکال‌زدایی کنید.

با تشکر فراوان از مشارکت‌ها و بازخوردهای همه بازبین‌ها و مشارکت‌کنندگان—به‌ویژه رایان اسلیوی، فیلیپو والسوردا، میلیکا میهایلیجا، و روآن مروود. 🙌