Yerel geliştirme için HTTPS kullanma

Maud Nalpas

http://localhost, geliştirme amacıyla çoğu zaman HTTPS gibi davranır. Ancak, özel ana makine adları veya tarayıcılarda güvenli çerezler kullanma gibi bazı özel durumlar vardır. Bu durumlarda, sitenizin üretimde çalışma şeklini doğru bir ş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çmeyi öncelikli hale getirin).

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

Not: Bu yayında, localhost ile ilgili ifadeler her ikisi de yerel bilgisayar adresini (döngü adresi olarak da bilinir) açıkladığından 127.0.0.1 ve [::1] için de geçerlidir. İşin basitliğini korumak için bu talimatlarda bağlantı noktası numaraları belirtilmez. Dolayısıyla, http://localhost gördüğünüzü http://localhost:{PORT} veya http://127.0.0.1:{PORT} olarak okuyun.

Kısa talimatlar için mkcert hızlı başvuru bölümünü inceleyin.**

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'a (özel ana makine adı) erişmek için cihazınız ve tarayıcınızın güvendiği bir varlık tarafından imzalanmış, güvenilir sertifika yetkilisi (CA) olarak adlandırılan bir TLS sertifikasına ihtiyacınız vardı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 kullanmanızı öneririz. Diğer faydalı seçenekler için Sitenizi HTTPS ile yerel olarak çalıştırma: diğer seçenekler bölümüne bakın.

Birçok işletim sisteminde, sertifika oluşturmak için openssl gibi kitaplıklar bulunur. Ancak bu uygulamalar mkcert'ten daha karmaşık ve daha az güvenilirdir. Ayrıca platformlar arası olmayabilirler. Bu nedenle, daha büyük geliştirici ekipleri tarafından daha az erişilebilir olurlar.

Dikkat:

• mkcert -install uygulamasını çalıştırdığınızda mkcert'in otomatik olarak oluşturduğu rootCA-key.pem dosyasını hiçbir zaman dışa aktarmayın veya paylaşmayın. Bu dosyayı ele geçiren bir saldırgan, ziyaret ettiğiniz herhangi bir siteye yönelik yolda saldırılar oluşturabilir. Makinenizden herhangi bir siteye (bankanıza, sağlık hizmeti sağlayıcınıza veya sosyal ağlara) gönderilen güvenli isteklere müdahale edebilirler. Güvenli olduğundan emin olmak için rootCA-key.pem adlı cihazın nerede olduğunu öğrenmeniz gerekiyorsa mkcert -CAROOT komutunu çalıştırın.
• mkcert'i yalnızca geliştirme amacıyla kullanın. Buna bağlı olarak, 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üklemeli ve çalıştırmalıdır (CA'yı ve sertifikayı depolamamalı ve paylaşmamalıdır).

Kurulum

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

   İşletim sisteminize mkcert yükleme instructions 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 sertifika yetkilisi (CA) oluşturur. mkcert tarafından oluşturulan yerel CA'nıza cihazınızda yalnızca yerel olarak güvenilir.

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

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

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

   mkcert localhost
   

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

   mkcert mysite.example
   

   Bu komut iki şey yapar:

   • Belirttiğiniz ana makine adı için bir sertifika oluşturur.
   • mkcert'in sertifikayı imzalamasını sağlar.

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

4. Sunucunuzu, az önce oluşturduğunuz TLS sertifikasını 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 var:

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

   👩🏻 💻, React geliştirme sunucusuyla:

   package.json öğenizi aşağıdaki gibi düzenleyin ve {PATH/TO/CERTIFICATE...} öğesini 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, sitenizin kök dizininde localhost için bir sertifika oluşturduysanız:

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

   Bu durumda start komut dosyanız aşağıdaki gibi 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ızdan emin olmak için tarayıcınızda https://localhost veya https://mysite.example uygulamasını açın. Tarayıcınız mkcert'e yerel sertifika yetkilisi olarak güvendiğinden tarayıcı uyarısı görmezsiniz.

mkcert hızlı başvuru

mkcert hızlı başvuru

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

1. mkcert ayarlarını yapın.

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

   brew install mkcert
   
   
   

   Windows ve Linux talimatları için mkcert'i yükleme bölümünü kontrol edin.

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

Artık tarayıcınızdan https://{YOUR HOSTNAME} uygulamasına uyarılar olmadan erişebilirsiniz

Dikkat: Bu işlemi yalnızca geliştirme amacıyla yapın ve dosyayı hiçbir zaman dışa aktarmayın veya paylaşmayın rootCA-key.pem. Güvenli olduğundan emin olmak için bu dosyanın nerede olduğunu bilmeniz gerekiyorsa mkcert -CAROOT öğesini ç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 daha risklidir.

Kendinden imzalı sertifika

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

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

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

Sertifika belirtmezseniz React ve Vue's geliştirme sunucusu HTTPS seçenekleri, arka planda kendinden imzalı bir sertifika oluşturur. Bu işlem hızlıdır, ancak tarayıcı uyarıları ve kendinden imzalı sertifikaların diğer tehlikeleriyle birlikte gelir. Neyse ki, ön uç çerçevelerinin yerleşik HTTPS seçeneğini kullanabilir ve mkcert veya benzer bir sertifika kullanılarak oluşturulmuş yerel olarak güvenilen bir sertifika belirtebilirsiniz. Daha fazla bilgi için 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ı kendiniz imzaladığınızı tespit ettiğinde, güvenilir sertifika yetkilisi olarak kayıtlı olup olmadığınızı kontrol eder. Siz olmadığınız için 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ı yine de oluşturulur, ancak bunun sorumluluğu size aittir.

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

Normal bir sertifika yetkilisi tarafından imzalanmış sertifika

Resmi bir CA tarafından imzalanmış bir sertifika da kullanabilirsiniz. Bu durum aşağıdaki komplikasyonları beraberinde getirir:

• Kurulum işlemi için mkcert gibi yerel bir CA tekniğini kullanmanıza kıyasla daha fazla işlem yapmanız gerekir.
• Sizin kontrolünüzde olan geçerli bir alan adı kullanmanız gerekir. Bu, aşağıdakiler için resmi CA'lar kullanamayacağınız anlamına gelir:
  • localhost ve example veya test gibi diğer ayrılmış alan adları.
  • 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

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

• Ters proxy URL'sini paylaştığınız herkes yerel geliştirme sitenize erişebilir. Bu, projenizin müşterilere tanıtılmasına yardımcı olabilir ancak yetkisiz kişilerin hassas bilgileri paylaşmasına da izin verebilir.
• Bazı tersine proxy hizmetleri kullanım için ücretlendirilir. Bu nedenle fiyatlandırma, hizmet seçiminizde etkili olabilir.
• 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ının mysite.example ürününü güvenli olarak kabul etmesini sağlamak için bir bayrak kullanabilirsiniz. Aşağıdaki nedenlerden dolayı bunu yapmaktan kaçının:

• mysite.example politikasının her zaman yerel bir adrese çözümlendiğinden% 100 emin olmanız gerekir. Aksi takdirde üretim kimlik bilgilerinin sızdırılması riskiyle karşı karşıya kalırsınız.
• Bu bayrak yalnızca Chrome'da çalışır, dolayısıyla tarayıcılarda hata ayıklama yapamazsınız.

Özellikle Ryan Sleevi, Filippo Valsorda, Milica Mihajlija ve Rowan Merewood başta olmak üzere tüm yorumculara ve katkıda bulunanlara, katkıları ve geri bildirimleri için çok teşekkür ederiz. 🙌

@anandu tarafından Unsplash'ta yayınlanan lokomotif resim arka planı düzenlendi.