از HTTPS برای توسعه محلی استفاده کنید

Maud Nalpas

اغلب اوقات، http://localhost برای اهداف توسعه مانند HTTPS رفتار می‌کند. با این حال، موارد خاصی مانند نام‌های میزبان سفارشی یا استفاده از کوکی‌های امن در مرورگرها وجود دارد که در آن‌ها باید صریحاً سایت توسعه خود را طوری تنظیم کنید که مانند HTTPS رفتار کند تا نحوه عملکرد سایت شما در محیط عملیاتی را به طور دقیق نشان دهد. (اگر وب‌سایت عملیاتی شما از HTTPS استفاده نمی‌کند، تغییر به HTTPS را در اولویت قرار دهید ).

این صفحه نحوه اجرای سایت شما به صورت محلی با HTTPS را توضیح می‌دهد.

توجه: در این پست، عبارات مربوط به localhost برای 127.0.0.1 و [::1] نیز معتبر هستند، زیرا هر دو آدرس کامپیوتر محلی (که به آن آدرس loopback نیز گفته می‌شود) را توصیف می‌کنند. برای ساده نگه داشتن مطالب، این دستورالعمل‌ها شماره پورت را مشخص نمی‌کنند. بنابراین وقتی http://localhost می‌بینید، آن را به صورت http://localhost:{PORT} یا http://127.0.0.1:{PORT} بخوانید.

برای دستورالعمل‌های مختصر، به مرجع سریع mkcert مراجعه کنید.**

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

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

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

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

احتیاط:

• هرگز فایل rootCA-key.pem که mkcert هنگام اجرای mkcert -install به طور خودکار ایجاد می‌کند را صادر یا به اشتراک نگذارید. مهاجمی که به این فایل دسترسی پیدا کند می‌تواند حملات on-path را برای هر سایتی که ممکن است بازدید کنید، ایجاد کند . آنها می‌توانند درخواست‌های امن از دستگاه شما به هر سایتی - بانک، ارائه دهنده خدمات درمانی یا شبکه‌های اجتماعی - را رهگیری کنند. اگر می‌خواهید بدانید 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) ایجاد می‌کند. 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"
   

   👩🏻‍💻 نمونه‌های دیگر:

   • سرور توسعه انگولار
   • پایتون

5. برای اطمینان از اینکه سایت شما به صورت محلی و با HTTPS اجرا می‌شود، https://localhost یا https://mysite.example را در مرورگر خود باز کنید. هیچ هشداری از مرورگر نخواهید دید، زیرا مرورگر شما به mkcert به عنوان یک مرجع صدور گواهینامه محلی اعتماد دارد.

مرجع سریع mkcert

مرجع سریع mkcert

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

1. mkcert را تنظیم کنید.

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

   brew install mkcert
   
   
   

   برای دستورالعمل‌های نصب 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 استفاده نکنید و در عوض گواهینامه خود را خودتان امضا کنید . این رویکرد چند ایراد دارد:

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

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

اگر گواهی‌نامه‌ای مشخص نکنید، گزینه‌های HTTPS سرور توسعه React و Vue یک گواهی‌نامه خودامضا (self-signed) در پشت صحنه ایجاد می‌کنند. این روش سریع است، اما همان هشدارهای مرورگر و سایر مشکلات گواهی‌نامه‌های خودامضا را به همراه دارد. خوشبختانه، می‌توانید از گزینه HTTPS داخلی فریم‌ورک‌های frontend استفاده کنید و یک گواهی‌نامه محلی قابل اعتماد که با استفاده از mkcert یا مشابه آن ایجاد شده است را مشخص کنید. برای اطلاعات بیشتر، به مثال mkcert با React مراجعه کنید.

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

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

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

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

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

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

پروکسی معکوس

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

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

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

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

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

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

تصویر پس‌زمینه‌ی قهرمان اثر @anandu در Unsplash ، ویرایش شده.