Yerel geliştirme için HTTPS nasıl kullanılır?

Bu yazıda, ilgili ifadeler localhost için geçerlidir 127.0.0.1 Ve [::1] ayrıca, her ikisi de “geri döngü adresi” olarak da adlandırılan yerel bilgisayar adresini tanımladıkları için. Ayrıca, işleri basitleştirmek için bağlantı noktası numarası belirtilmemiştir. Yani gördüğünde olarak oku :{PORT} veya http://127.0.0.1:{PORT}.

Üretim web siteniz HTTPS kullanıyorsa, yerel geliştirme sitenizin aynı şekilde davranmasını istersiniz HTTPS sitesi gibi (üretim web siteniz HTTPS kullanmıyorsa HTTPS’ye geçmeyi bir öncelik haline getirin). Çoğu zaman güvenebilirsin davranmak HTTPS sitesi gibi. Ancak bazı durumlarda sitenizi yerel olarak HTTPS ile çalıştırmanız gerekir. Bunun nasıl yapılacağına bir göz atalım.

⏩ Hızlı talimatlar mı arıyorsunuz yoksa daha önce burada bulundunuz mu? atla Kopya kağıdı.

mkcert kullanarak HTTPS ile sitenizi yerel olarak çalıştırma (önerilen) #

HTTPS’yi yerel geliştirme siteniz ve erişiminizle kullanmak için veya (özel ana bilgisayar adı), bir TLS sertifikası. Ancak tarayıcılar herhangi bir sertifikayı geçerli saymaz: sertifikanızın olması gerekir imzalı güvenilir adı verilen, tarayıcınız tarafından güvenilen bir varlık tarafından sertifika yetkilisi (CA).

Yapmanız gereken, bir sertifika oluşturmak ve bunu bir CA ile imzalamaktır. yerel olarak güvenilir cihazınız ve tarayıcınız tarafından. mkcert bunu birkaç komutla yapmanıza yardımcı olan bir araçtır. İşte nasıl çalıştığı:

• Yerel olarak çalışan sitenizi tarayıcınızda HTTPS kullanarak açarsanız, tarayıcınız yerel geliştirme sunucunuzun sertifikasını kontrol edecektir.
• Sertifikanın mkcert tarafından oluşturulan sertifika yetkilisi tarafından imzalandığını gören tarayıcı, sertifikanın güvenilir bir sertifika yetkilisi olarak kayıtlı olup olmadığını kontrol eder.
• mkcert güvenilir bir otorite olarak listelenir, bu nedenle tarayıcınız sertifikaya güvenir ve bir HTTPS bağlantısı oluşturur.

mkcert (ve benzeri araçlar) çeşitli avantajlar sağlar:

• mkcert, şu özelliklere sahip sertifikalar oluşturma konusunda uzmanlaşmıştır: hangi tarayıcıların geçerli sertifikalar olarak kabul ettiğiyle uyumlu. Gereksinimleri ve en iyi uygulamaları eşleştirmek için güncel kalır. Bu nedenle, doğru sertifikaları oluşturmak için mkcert komutlarını karmaşık yapılandırmalar veya bağımsız değişkenlerle çalıştırmanız gerekmeyecek!
• mkcert, platformlar arası bir araçtır. Ekibinizdeki herkes kullanabilir.

mkcert, yerel geliştirme için bir TLS sertifikası oluşturmak için önerdiğimiz araçtır. kontrol edebilirsiniz diğer seçenekler fazla.

Birçok işletim sistemi, sertifika oluşturmak için kitaplıklar içerebilir, örneğin açılır. Mkcert ve benzeri araçların aksine, bu tür kitaplıklar tutarlı bir şekilde doğru sertifikalar üretmeyebilir, karmaşık komutların çalıştırılmasını gerektirebilir ve mutlaka platformlar arası olmaları gerekmez.

Dikkat #

Kurmak #

1. mkcert’i yükleyin (yalnızca bir kez).

   Takip et talimatlar mkcert’i işletim sisteminize yüklemek için. Örneğin, macOS’ta:

   brew install mkcert
   brew install nss # if you use Firefox

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

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

   mkcert -install

   Bu, bir yerel sertifika yetkilisi (CA) oluşturur. mkcert tarafından oluşturulan yerel CA’nız yalnızca güvenilirdir yerel olarakcihazınızda.

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

   Terminalinizde, sitenizin kök dizinine veya sertifikaların bulunmasını istediğiniz dizine gidin.

   O zaman koş:

   mkcert localhost

   Gibi özel bir ana bilgisayar adı kullanıyorsanız mysite.examplekoşmak:

   mkcert mysite.example

   Yukarıdaki komut iki şey yapar:

   • Belirttiğiniz ana bilgisayar adı için bir sertifika oluşturur
   • mkcert’in (2. Adımda yerel CA olarak eklediğiniz) bu sertifikayı imzalamasını sağlar.

   Artık sertifikanız hazır ve yerel olarak tarayıcınızın güvendiği bir sertifika yetkilisi tarafından imzalanmış durumda. Neredeyse bitirdiniz, ancak sunucunuzun henüz sertifikanızdan haberi yok!

4. Sunucunuzu yapılandırın.

   Artık sunucunuza HTTPS kullanmasını (geliştirme sunucuları varsayılan olarak HTTP kullanma eğiliminde olduğundan) ve az önce oluşturduğunuz TLS sertifikasını kullanmasını söylemeniz gerekir.

   Bunun nasıl yapılacağı tam olarak sunucunuza bağlıdır. Birkaç örnek:

   👩🏻‍💻 Düğüm ile:

   server.js (yer değiştirmek {PATH/TO/CERTIFICATE...} Ve {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});

   👩🏻‍💻 İle http sunucusu:

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

   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ı ayarlar ve -K anahtarı ayarlar.

   👩🏻‍💻 Bir React geliştirme sunucusuyla:

   Düzenle package.json aşağıdaki gibi ve değiştirin {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"

   Örneğin, için bir sertifika oluşturduysanız localhost sitenizin kök dizininde şu şekilde bulunur:

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

   o zaman senin start komut dosyası şöyle görünmelidir:

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

   👩🏻‍💻 Diğer örnekler:

5. ✨ Bitirdiniz! Açık veya tarayıcınızda: sitenizi yerel olarak HTTPS ile çalıştırıyorsunuz. Tarayıcınız yerel sertifika yetkilisi olarak mkcert’e güvendiği için herhangi bir tarayıcı uyarısı görmezsiniz.

mkcert kullanma: cheatsheet #

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

Kendinden imzalı sertifika #

Ayrıca mkcert gibi yerel bir sertifika yetkilisi kullanmamaya da karar verebilirsiniz ve bunun yerine sertifikanızı kendiniz imzalayın.

Bu yaklaşımla ilgili birkaç tuzağa dikkat edin:

• Tarayıcılar, bir sertifika yetkilisi olarak size güvenmezler ve manuel olarak atlamanız gereken uyarılar gösterirler. Chrome’da bayrağı kullanabilirsiniz #allow-insecure-localhost bu uyarıyı otomatik olarak atlamak için localhost. Biraz hileli geliyor, çünkü öyle.
• Güvenli olmayan bir ağda çalışıyorsanız, bu güvenli değildir.
• Kendinden imzalı sertifikalar, güvenilir sertifikalarla tam olarak aynı şekilde davranmaz.
• Mkcert gibi yerel bir CA kullanmaktan daha kolay veya daha hızlı olması gerekmez.
• Bu tekniği bir tarayıcı bağlamında kullanmıyorsanız, sunucunuz için sertifika doğrulamasını devre dışı bırakmanız gerekebilir. Üretimde yeniden etkinleştirmeyi ihmal etmek tehlikeli olabilir.

Normal bir sertifika yetkilisi tarafından imzalanan sertifika #

Sertifikanızı yerel değil gerçek bir sertifika yetkilisine imzalamaya dayalı teknikler de bulabilirsiniz.

Bu teknikleri kullanmayı düşünüyorsanız aklınızda bulundurmanız gereken birkaç şey:

• mkcert gibi yerel bir CA tekniği kullanmaktan daha fazla kurulum işiniz olacak.
• Kontrolünüzde olan ve geçerli bir alan adı kullanmanız gerekmektedir. Bu şu anlama gelir: yapamamak gerçek sertifika yetkililerini şunlar için kullanın:

ters vekil #

Yerel olarak çalışan bir siteye HTTPS ile erişmenin başka bir seçeneği de ters proxy örneğin ngrok.

Dikkate alınması gereken birkaç nokta:

• Ters proxy ile oluşturulmuş bir URL’yi onlarla paylaştığınızda herkes yerel geliştirme sitenize erişebilir. Bu, projenizi müşterilere tanıtırken çok kullanışlı olabilir! Veya projeniz hassassa bu bir dezavantaj olabilir.
• Fiyatlandırmayı düşünmeniz gerekebilir.
• Tarayıcılardaki yeni güvenlik önlemleri, bu araçların çalışma şeklini etkileyebilir.

Bayrak (önerilmez) #

Gibi özel bir ana bilgisayar adı kullanıyorsanız mysite.examplezorla değerlendirmek için Chrome’da bir bayrak kullanabilirsiniz mysite.example güvenli. Bunu yapmaktan kaçınınÇünkü:

• olduğundan %100 emin olmanız gerekir mysite.example her zaman yerel bir adrese çözümlenir, aksi takdirde üretim kimlik bilgilerini sızdırabilirsiniz.
• Bu hile ile tarayıcılarda hata ayıklayamazsınız 🙀.

Başta Ryan Sleevi, Filippo Valsorda, Milica Mihajlija ve Rowan Merewood olmak üzere tüm eleştirmenlere ve katkıda bulunanlara katkıları ve geri bildirimleri için çok teşekkürler. 🙌

Kahraman resim arka planı @anandu Açık Unsplashdüzenlendi.