Yerel geliştirme için HTTPS kullanma

Maud Nalpas

http://localhost, geliştirme için çoğunlukla HTTPS gibi davranır amaçlar. Ancak bazı özel durumlar vardır. Örneğin, ihtiyacınız olduğunda özel ana makine adları veya tarayıcılarda güvenli çerezler HTTPS gibi davranacak şekilde ve web sitenizin doğru şekilde sitenizin üretimde nasıl çalıştığını temsil eder. (Üretim web siteniz HTTPS kullanıyorsanız HTTPS'ye geçişe öncelik verin).

Bu sayfada, HTTPS ile sitenizi yerel olarak nasıl çalıştırabileceğiniz açıklanmaktadır.

Not: Bu yayında, localhost ile ilgili ifadeler 127.0.0.1 ve [::1] çünkü her ikisi de yerel bilgisayar adresini (ayrıca) döngü adresi olarak adlandırılır). İşleri basitleştirmek adına, bu talimatlar bağlantı noktası numaralarını belirtin. http://localhost gördüğünüzde, http://localhost:{PORT} veya http://127.0.0.1:{PORT}.

Kısa talimatlar için mkcert hızlı başvuru sayfasına bakın.**

Mkcert kullanarak sitenizi HTTPS ile yerel olarak çalıştırma (önerilir)

Yerel geliştirme sitenizde HTTPS'yi kullanmak ve https://localhost veya https://mysite.example (özel ana makine adı), bir TLS sertifikası cihazınızın ve tarayıcınızın güvendiği, güvenilir adlı bir tüzel kişi tarafından imzalanmış sertifika yetkilisi (CA). Tarayıcı, geliştirme sunucunuzun sertifikasının güvenilir CA'ya göz atmanız önerilir.

mkcert sertifika oluşturmanızı ve imzalamanızı sağlar. Diğer yararlı özellikler için Sitenizi HTTPS ile yerel olarak çalıştırma: diğer seçenekler başlıklı makaleyi inceleyin.

Pek çok işletim sisteminde sertifika oluşturmaya yönelik kitaplıklar bulunur. Örneğin: openssl. Ancak bunlar daha karmaşıktır ve ve platformlar arası olmayabilir. Bu nedenle, daha büyük geliştirici ekiplerine daha az erişilebilir.

Dikkat:

• mkcert -install komutunu çalıştırdığınızda mkcert'in otomatik olarak oluşturduğu rootCA-key.pem dosyasını asla dışa aktarmayın veya paylaşmayın. Bu dosyayı ele geçiren bir saldırgan, ziyaret ediyor olabileceğiniz tüm siteler için yoldayken saldırılara neden olabilir. Bu güvenlik açığı; makinenizden herhangi bir siteye (bankanıza, sağlık hizmeti sağlayıcınıza veya sosyal ağlara) gönderilen güvenli istekleri karşılayabilir. Güvenli olduğundan emin olmak için rootCA-key.pem adlı cihazın nerede olduğunu bilmeniz gerekiyorsa mkcert -CAROOT komutunu çalıştırın.
• Mkcert'i yalnızca geliştirme amacıyla kullanın ve dolayısıyla son kullanıcılardan hiçbir zaman mkcert komutlarını çalıştırmalarını istemeyin.
• Geliştirme ekipleri: Ekibinizin tüm üyeleri mkcert'i ayrı olarak yükleyip çalıştırmalıdır (CA ile sertifikayı depolayıp paylaşmamalıdır).

Kurulum

1. Mkcert'i yükleyin (yalnızca bir kez).

   Talimatları uygulayın. mkcert'i yüklemeniz gerekir. Örneğin, macOS'te:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Yerel kök CA'larınıza mkcert'i ekleyin.

   Terminalinizde aşağıdaki komutu çalıştırın:

   mkcert -install
   

   Bu işlem, bir yerel sertifika yetkilisi (CA) oluşturur. Mccert tarafından oluşturulan yerel CA'nıza yalnızca yerel olarak, cihazınızda güvenilir.

3. Siteniz için mkcert tarafından imzalanmış bir sertifika oluşturun.

   Terminalinizde sitenizin kök dizinine veya bir dizin oluşturmanız gerekir.

   Ardından şu komutu çalıştırın:

   mkcert localhost
   

   mysite.example gibi özel bir ana makine adı kullanıyorsanız şu komutu çalıştırın:

   mkcert mysite.example
   

   Bu komutun iki işlevi vardır:

   • Belirttiğiniz ana makine adı için bir sertifika oluşturur.
   • Mkcert'in sertifikayı imzalamasına izin verir.

   Sertifikanız artık hazır ve bir sertifika yetkilisi tarafından imzalandı yerel olarak güvenir.

4. Sunucunuzu, yeni oluşturduğunuz TLS sertifikası için HTTPS kullanacak şekilde yapılandırın.

   Bunun nasıl yapılacağıyla ilgili ayrıntılar sunucunuza bağlıdır. Aşağıda birkaç örnek verilmiştir:

   👩🏻 💻 Düğümüyle:

   server.js ({PATH/TO/CERTIFICATE...} ve {PORT} değerlerini değiştirin):

   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 ile:

   Sunucunuzu aşağıdaki gibi başlatın ({PATH/TO/CERTIFICATE...} kısmını değiştirin):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S, sunucunuzu HTTPS ile çalıştırırken -C, sertifikayı ve -K, anahtarı ayarlar.

   👩🏻 💻, React geliştirme sunucusuyla:

   package.json öğenizi aşağıdaki gibi düzenleyin ve {PATH/TO/CERTIFICATE...} ile değiştirin:

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   Örneğin, localhost için sitenizin kök dizin:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   Bu durumda start komut dosyanız şu şekilde görünmelidir:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻 💻 Diğer örnekler:

   • Açısal geliştirme sunucusu
   • Python

5. Şu işlemler için tarayıcınızda https://localhost veya https://mysite.example uygulamasını açın: sitenizi HTTPS ile yerel olarak çalıştırdığınızı bir kez daha kontrol edin. Hiçbirini görmeyeceksiniz Tarayıcınız mkcert'e yerel bir sertifika olarak güvendiğinden tarayıcı uyarıları yetkilidir.

mkcert hızlı başvuru

mkcert hızlı başvuru

Yerel geliştirme sitenizi HTTPS ile çalıştırmak için:

1. Mkcert'i ayarlayın.

   Henüz yapmadıysanız mkcert'i yükleyin. Örneğin, macOS'e:

   brew install mkcert
   
   
   

   install mkcert (mkcert'i yükle) seçeneğini kontrol edin. başlıklı makaleyi inceleyin.

   Ardından bir yerel sertifika yetkilisi oluşturun:

   mkcert -install

2. Güvenilir bir sertifika oluşturun.

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

   Bu işlem, mkcert'in otomatik olarak imzaladığı geçerli bir sertifika oluşturur.

3. Geliştirme sunucunuzu HTTPS'yi ve kullandığınız sertifikayı kullanacak şekilde yapılandırın oluşturulmalıdır.

Artık tarayıcınızdan https://{YOUR HOSTNAME} hizmetine herhangi bir uyarı olmadan erişebilirsiniz

Dikkat: Bunu yalnızca geliştirme için yapın amaçlar ve hiçbir zaman dışa aktarmaz veya dosyayı paylaşmayın rootCA-key.pem. Bu dosyanın konumunu bilmeniz gerekiyorsa güvenli olduğundan emin olun, mkcert -CAROOT komutunu çalıştırın.

</div>

Sitenizi HTTPS ile yerel olarak çalıştırma: diğer seçenekler

Sertifikanızı ayarlamanın diğer yolları aşağıda verilmiştir. Bunlar genellikle daha karmaşık veya daha riskli olabilir.

Kendinden imzalı sertifika

Ayrıca, mkcert gibi bir yerel sertifika yetkilisi kullanmamaya da karar verebilirsiniz. sertifikanızı kendiniz imzalayın. Bu yaklaşımın bazı dezavantajları vardır:

• Tarayıcılar, bir sertifika yetkilisi olarak size güvenmedikleri için uyarı gösterirler. manuel olarak atlamanız gerekir. Chrome'da bayrağı Şu tarihte bu uyarıyı otomatik olarak atlamak için #allow-insecure-localhost: localhost.
• Güvenli olmayan bir ağda çalışıyorsanız bu işlem güvenli değildir.
• Bu, mkcert gibi bir yerel CA kullanmaktan daha kolay veya hızlı değildir.
• Kendinden imzalı sertifikalar, güvenilen sertifikalar ile tam olarak aynı şekilde çalışmaz ekleyebilirsiniz.
• Bu tekniği bir tarayıcı bağlamında kullanmıyorsanız, . Şu süre içinde yeniden etkinleştirmeyi unutma: üretilmesi güvenlik sorunlarına neden olur.

ziyaret edin.

Kendinden imzalı bir sertifika kullanıldığında tarayıcılar tarafından uyarı gösterilir.

Sertifika belirtmezseniz React'in ve Vue's geliştirme sunucusu HTTPS seçenekleri arasında eşofman. Bu işlem hızlıdır, ancak aynı tarayıcı uyarıları ve diğer kendinden imzalı sertifikaların tehlikeleri. Neyse ki kullanıcı arabirimi kullanarak çerçevelerin yerleşik HTTPS seçeneği ve yerel olarak güvenilir bir sertifika belirtme mkcert veya benzeri bir sistem kullanılarak oluşturulur. Daha fazla bilgi için React ile mkcert örneği.

Tarayıcılar neden kendinden imzalı sertifikalara güvenmiyor?

Yerel olarak çalışan sitenizi tarayıcınızda HTTPS kullanarak açarsanız tarayıcı, yerel geliştirme sunucunuzun sertifikasını kontrol eder. Zaman sizin imzaladığınızı görür. Sertifika, sertifikanın güvenilir bir sertifika yetkilisi olarak kayıtlı olmanız gerekir. Çünkü tarayıcınız sertifikaya güvenemez ve uyarı gösterilir. bağlantınızın güvenli olmadığını söyleyen bir e-posta alırsınız. Yine de HTTPS oluşturuyor. bağlamayı kabul edersiniz ancak bunu yapmakla ilgili riskler size aittir.

Tarayıcılar kendinden imzalı sertifikalara neden güvenmiyor?

Normal bir sertifika yetkilisi tarafından imzalanan sertifika

Resmi bir CA tarafından imzalanmış bir sertifika da kullanabilirsiniz. Bu özellik, aşağıdaki komplikasyonlar vardır:

• Kurulum için yapmanız gereken, aşağıdaki gibi yerel bir CA tekniğini kullanmaya kıyasla daha fazla işlem vardır: mkcert.
• Kendi kontrolünüzdeki geçerli bir alan adını kullanmanız gerekir. Bu demek oluyor ki Aşağıdakiler için resmi CA'ları kullanın:
  • localhost ve diğer ayrılmış example veya test gibi alan adları için geçerlidir.
  • Kontrol etmediğiniz herhangi bir alan adı.
  • Geçersiz üst düzey alanlar. Daha fazla bilgi için geçerli üst düzey alanlar listesine bakın.

Ters proxy

Yerel olarak çalışan bir siteye HTTPS ile erişmenin diğer bir seçeneği de ters proxy: ngrok ifadesidir. Bu durum aşağıdaki riskleri beraberinde getirir:

• Ters proxy URL'sini paylaştığınız herkes yerel geliştirme uygulamanıza erişebilir girin. Bu, projenizi müşterilere göstermek için yararlı olabilir hassas bilgileri paylaşmasına izin vermez.
• Bazı ters proxy hizmetleri kullanım için ücret alır. Bu nedenle fiyatlandırma, bağlı olarak ayarlayabilirsiniz.
• Tarayıcılardaki yeni güvenlik önlemleri, nasıl çalıştığını açıklayacağım.

İşaretle (önerilmez)

Chrome'da mysite.example gibi özel bir ana makine adı kullanıyorsanız işaretini kaldırın.mysite.example Bunu yapmaktan kaçının şu nedenlerle:

• mysite.example öğesinin her zaman yerel bir kullanıcıya çözümlediğinden% 100 emin olmanız gerekir girin. Aksi takdirde, üretim kimlik bilgilerinin sızdırılması riskiyle karşı karşıya kalırsınız.
• Bu işaret yalnızca Chrome'da çalıştığından farklı tarayıcılarda hata ayıklayamazsınız.

Tüm yorumculara ve katkıda bulunanlara, özellikle de Ryan Sleevi'ye, katkıları ve geri bildirimleri için Filippo Valsorda, Milica Mihajlija ve Rowan Merewood. 🙌

@anandu tarafından Unsplash'teki hero resim arka planı düzenlendi.