Yerel geliştirme için HTTPS kullanma

Maud Nalpas

Çoğu zaman, http://localhost geliştirme amacıyla HTTPS gibi davranır. Ancak, özel ana makine adları veya tarayıcılar arasında güvenli çerezlerin kullanılması gibi özel durumlar vardır. Bu durumlarda, sitenizin üretimdeki işleyişini doğru şekilde temsil etmek için geliştirme sitenizi HTTPS gibi davranacak şekilde açıkça ayarlamanız gerekir. (Üretim web siteniz HTTPS kullanmıyorsa HTTPS'ye geçişi öncelikli hale getirin).

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

Not: Bu yayındaki localhost ile ilgili ifadeler, her ikisi de yerel bilgisayar adresini (geri döngü adresi olarak da bilinir) tanımladığından 127.0.0.1 ve [::1] için de geçerlidir. Bu talimatlarda, işleri basitleştirmek için bağlantı noktası numaraları belirtilmemiştir. Bu nedenle, http://localhost gördüğünüzde bunu http://localhost:{PORT} veya http://127.0.0.1:{PORT} olarak okuyun.

Kısa talimatlar için mkcert hızlı referans başlıklı makaleye bakın.**

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

HTTPS'yi yerel geliştirme sitenizle kullanmak ve https://localhost veya https://mysite.example (özel ana makine adı) öğesine erişmek için cihazınızın ve tarayıcınızın güvendiği bir kuruluş tarafından imzalanmış bir TLS sertifikasına ihtiyacınız vardır. Bu kuruluş, güvenilir bir sertifika yetkilisi (CA) olarak adlandırılır. Tarayıcı, HTTPS bağlantısı oluşturmadan önce geliştirme sunucunuzun sertifikasının güvenilir bir CA tarafından imzalanıp imzalanmadığını kontrol eder.

Sertifikanızı oluşturmak ve imzalamak için platformlar arası bir CA olan mkcert'i kullanmanızı öneririz. Diğer faydalı seçenekler için Sitenizi HTTPS ile yerel olarak çalıştırma: diğer seçenekler başlıklı makaleyi inceleyin.

Birçok işletim sistemi, openssl gibi sertifika oluşturmaya yönelik kitaplıklar içerir. Ancak bu sertifikalar mkcert'e kıyasla daha karmaşık ve daha az güvenilirdir. Ayrıca, platformlar arası kullanıma uygun olmadıkları için daha büyük geliştirici ekipleri tarafından 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 ettiğiniz tüm siteler için yol üzerinde saldırılar oluşturabilir. Bu kişiler, makinenizden herhangi bir siteye (ör. bankanız, sağlık hizmeti sağlayıcınız veya sosyal ağlarınız) gönderilen güvenli istekleri engelleyebilir. rootCA-key.pem öğesinin güvenli olduğundan emin olmak için konumunu bilmeniz gerekiyorsa mkcert -CAROOT komutunu çalıştırın.
• mkcert'i yalnızca geliştirme amaçlarıyla kullanın ve bu nedenle hiçbir zaman son kullanıcılardan mkcert komutlarını çalıştırmalarını istemeyin.
• Geliştirme ekipleri: Ekibinizin tüm üyeleri mkcert'i ayrı ayrı yükleyip çalıştırmalıdır (CA ve sertifikayı saklamamalı ve paylaşmamalıdır).

Kurulum

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

   mkcert'i işletim sisteminize yükleme talimatlarını uygulayın. Örneğin, macOS'te:

   brew install mkcert
   brew install nss # if you use Firefox
   

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

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

   mkcert -install
   

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

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

   Terminalinizde, sitenizin kök dizinine veya sertifikanızı saklamak istediğiniz dizine gidin.

   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 komut iki işlem yapar:

   • Belirttiğiniz ana makine adı için sertifika oluşturur.
   • Sertifikayı mkcert'in imzalamasına izin verin.

   Sertifikanız artık hazır ve tarayıcınızın yerel olarak güvendiği bir sertifika yetkilisi tarafından imzalandı.

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

   Bunun nasıl yapılacağıyla ilgili ayrıntılar sunucunuza bağlıdır. Birkaç örnek:

   👩🏻‍💻 Düğüm ile:

   server.js ({PATH/TO/CERTIFICATE...} ve {PORT} yerine):

   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...} yerine kendi değerinizi girin):

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

   👩🏻‍💻 React geliştirme sunucusuyla:

   package.json içeriğinizi aşağıdaki şekilde düzenleyin ve {PATH/TO/CERTIFICATE...} yerine kendi içeriğinizi ekleyin:

   "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, sitenizin kök dizininde localhost için bir sertifika oluşturduysanız:

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

   Ardından 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:

   • Angular geliştirme sunucusu
   • Python

5. Sitenizi yerel olarak HTTPS ile çalıştırdığınızı iki kez kontrol etmek için tarayıcınızda https://localhost veya https://mysite.example simgesini açın. Tarayıcınız, mkcert'i yerel sertifika yetkilisi olarak güvendiği için tarayıcı uyarısı görmezsiniz.

mkcert hızlı referansı

mkcert hızlı referansı

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

1. mkcert'i kurun.

   Henüz yapmadıysanız mkcert'i yükleyin (örneğin, macOS'te):

   brew install mkcert
   
   
   

   Windows ve Linux talimatları için install mkcert başlıklı makaleyi inceleyin.

   Ardından, yerel bir 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 2. adımda oluşturduğunuz sertifikayı kullanacak şekilde yapılandırın.

Artık tarayıcınızda https://{YOUR HOSTNAME}'ya uyarı almadan erişebilirsiniz

Dikkat: Bunu yalnızca geliştirme amacıyla yapın ve dosyayı asla dışa aktarmayın veya paylaşmayınrootCA-key.pem. Bu dosyanın güvenli olduğundan emin olmak için nerede bulunduğunu öğrenmeniz gerekiyorsa 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 mkcert kullanmaktan daha karmaşık veya risklidir.

Kendinden imzalı sertifika

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

• Tarayıcılar, sertifika yetkilisi olarak size güvenmediğinden manuel olarak atlamanız gereken uyarılar gösterir. Chrome'da, bu uyarıyı otomatik olarak atlamak için #allow-insecure-localhost işaretini kullanabilirsiniz.localhost
• Güvenli olmayan bir ağda çalışıyorsanız bu işlem güvenli değildir.
• mkcert gibi yerel bir CA kullanmaktan daha kolay veya hızlı değildir.
• Kendinden imzalı sertifikalar, güvenilir sertifikalarla tam olarak aynı şekilde davranmaz.
• Bu tekniği tarayıcı bağlamında kullanmıyorsanız sunucunuz için sertifika doğrulamayı devre dışı bırakmanız gerekir. Üretimde yeniden etkinleştirmeyi unutmak güvenlik sorunlarına neden olur.

Kendinden imzalı sertifika kullanıldığında tarayıcıların gösterdiği uyarılar.

Sertifika belirtmezseniz React ve Vue geliştirme sunucusu HTTPS seçenekleri, arka planda kendi kendine imzalanmış bir sertifika oluşturur. Bu yöntem hızlıdır ancak kendinden imzalı sertifikaların tarayıcı uyarıları ve diğer tuzaklarını içerir. Neyse ki ön uç çerçevelerinin yerleşik HTTPS seçeneğini kullanabilir ve mkcert veya benzeri bir araçla oluşturulan yerel olarak güvenilen bir sertifika belirtebilirsiniz. Daha fazla bilgi için mkcert with React (React ile mkcert) örneğine bakın.

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

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 eder. Sertifikayı kendinizin imzaladığını gördüğünde, güvenilir bir sertifika yetkilisi olarak kayıtlı olup olmadığınızı kontrol eder. Bu nedenle tarayıcınız sertifikaya güvenemez ve bağlantınızın güvenli olmadığını belirten bir uyarı gösterir. Devam ederseniz HTTPS bağlantısı oluşturulur ancak bu işlemi kendi sorumluluğunuzda yaparsınız.

Tarayıcılar neden kendi kendine imzalanmış sertifikalara güvenmez?

Normal bir sertifika yetkilisi tarafından imzalanmış sertifika

Resmi bir CA tarafından imzalanmış bir sertifika da kullanabilirsiniz. Bu komplikasyonlar şunlardır:

• mkcert gibi yerel bir CA tekniği kullanmaya kıyasla daha fazla kurulum işlemi yapmanız gerekir.
• Kontrol ettiğiniz geçerli bir alan adı kullanmanız gerekir. Bu durumda, aşağıdaki işlemler için resmi CA'ları kullanamazsınız:
  • localhost ve example veya test gibi diğer ayrılmış alan adları.
  • Kontrol etmediğiniz alan adları
  • Geçersiz üst düzey alan adları. Daha fazla bilgi için geçerli üst düzey alan adları listesine bakın.

Ters proxy

Yerel olarak çalışan bir siteye HTTPS ile erişmenin bir diğer yolu da ngrok gibi bir ters proxy kullanmaktır. Bu durum aşağıdaki riskleri beraberinde getirir:

• Ters proxy URL'sini paylaştığınız herkes yerel geliştirme sitenize erişebilir. Bu özellik, projenizi müşterilere tanıtmak için yararlı olabilir ancak yetkisiz kişilerin hassas bilgileri paylaşmasına da olanak tanıyabilir.
• Bazı ters proxy hizmetleri kullanıma göre ücret alır. Bu nedenle, hizmet seçiminizi fiyatlandırma etkileyebilir.
• Tarayıcılardaki yeni güvenlik önlemleri, bu araçların çalışma şeklini etkileyebilir.

İşaretle (önerilmez)

Chrome'da mysite.example gibi özel bir ana makine adı kullanıyorsanız tarayıcıyı mysite.example güvenli olarak kabul etmeye zorlamak için bir işaret kullanabilirsiniz. Aşağıdaki nedenlerle bunu yapmaktan kaçının:

• mysite.example öğesinin her zaman yerel bir adrese çözümlendiğinden% 100 emin olmanız gerekir. Aksi takdirde, üretim kimliklerinin sızdırılması riskiyle karşılaşırsınız.
• Bu işaret yalnızca Chrome'da çalıştığından tarayıcılar arasında hata ayıklama yapamazsınız.

Tüm inceleme uzmanlarına ve katkıda bulunanlara, özellikle Ryan Sleevi, Filippo Valsorda, Milica Mihajlija ve Rowan Merewood'a katkıları ve geri bildirimleri için çok teşekkür ederiz. 🙌

Unsplash'ta @anandu tarafından çekilen ve düzenlenen hero resim arka planı.