Yerel geliştirme için HTTPS kullanma

Maud Nalpas
Maud Nalpas
X GitHub

http://localhost, geliştirme amacıyla çoğu zaman HTTPS gibi davranır. Ancak, özel ana makine adları veya tarayıcılarda güvenli çerezlerin kullanılması gibi bazı özel durumlar vardır. Bu durumlarda, sitenizin üretimde nasıl çalıştığını doğru şekilde temsil etmek için geliştirme sitenizi HTTPS gibi davranacak şekilde açıkça ayarlamanız gerekir. (Üretim web sitenizde HTTPS kullanılmıyorsa HTTPS'ye geçmeye öncelik verin).

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

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

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

Yerel geliştirme sitenizle HTTPS'yi kullanmak ve https://localhost veya https://mysite.example'a (özel ana makine adı) erişmek için cihazınızın ve tarayıcınızın güvendiği bir varlık tarafından imzalanan TLS sertifikasına (güvenilir sertifika yetkilisi (CA)) 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 imzalanmış olup olmadığını kontrol eder.

Sertifikanızı oluşturup 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, sertifika oluşturmak için openssl gibi kitaplıklar içerir. Ancak bu araçlar mkcert'ten daha karmaşık ve güvenilir değildir ve her zaman platformlar arası değildir. Bu nedenle, daha büyük geliştirici ekipleri tarafından daha az kullanılı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. 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 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 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ın oluşturulması tamamlandı 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ı için HTTPS kullanacak şekilde yapılandırın.

    Bu işlemin nasıl yapılacağı sunucunuza bağlıdır. Aşağıda birkaç örnek verilmiştir:

    👩🏻‍💻 Düğümle:

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

    👩🏻 💻, React geliştirme sunucusuyla:

    package.json'nizi aşağıdaki gibi düzenleyin ve {PATH/TO/CERTIFICATE...} yerine aşağıdakileri yazın:

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

  5. Sitenizi yerel olarak HTTPS ile çalıştırdığınızı tekrar kontrol etmek için tarayıcınızda https://localhost veya https://mysite.example'yi açın. Tarayıcınız mkcert'e 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 ayarlayı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 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}'e uyarı almadan erişebilirsiniz

</div>

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

Sertifikanızın ayarlanmasıyla ilgili diğer yöntemler aşağıda verilmiştir. Bu yöntemler genellikle mkcert'i kullanmaktan daha karmaşık veya risklidir.

Kendinden imzalı sertifika

Dilerseniz mkcert gibi bir yerel sertifika yetkilisi kullanmamayı tercih edebilir, bunun yerine sertifikanızı kendiniz imzalayabilirsiniz. Bu yaklaşımın bazı dezavantajları vardır:

  • Tarayıcılar size sertifika yetkilisi olarak güvenmediğinden manuel olarak atlamanız gereken uyarılar gösterir. Chrome'da, localhost üzerinde bu uyarıyı otomatik olarak atlamak için #allow-insecure-localhost işaretini kullanabilirsiniz.
  • Güvenli olmayan bir ağda çalışıyorsanız bu işlem güvenli değildir.
  • Bu yöntem, mkcert gibi yerel bir CA kullanmaktan daha kolay veya daha hızlı olmayabilir.
  • Kendinden imzalı sertifikalar, güvenilir sertifikalarla tam olarak aynı şekilde çalışmaz.
  • Bu tekniği tarayıcı bağlamında kullanmıyorsanız sunucunuz için sertifika doğrulamasını devre dışı bırakmanız gerekir. Bunu ü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ın ekran görüntüleri.
Kendinden imzalı sertifika kullanıldığında tarayıcıların gösterdiği uyarılar.

Sertifika belirtmezseniz React'in ve Vue'nun geliştirme sunucusu HTTPS seçenekleri, arka planda kendinden imzalı bir sertifika oluşturur. Bu yöntem hızlıdır ancak kendinden imzalı sertifikalarda bulunan tarayıcı uyarılarını ve diğer tuzakları da beraberinde getirir. Neyse ki ön uç çerçevelerinin yerleşik HTTPS seçeneğini kullanarak mkcert veya benzeri bir kimlikle 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ı kendinizin imzaladığını gördüğünde, güvenilir 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şlem riski size ait olur.

Tarayıcıların kendinden imzalı sertifikalara neden güvenmediği: diyagram.
Tarayıcıların kendi kendine imzalanan sertifikalara güvenmemesinin nedeni

Normal bir sertifika yetkilisi tarafından imzalanmış sertifika

Resmi bir CA tarafından imzalanmış bir sertifika da kullanabilirsiniz. Bu durum aşağıdaki komplikasyonlara yol açar:

  • mkcert gibi yerel bir CA tekniği kullanırken olduğundan daha fazla kurulum yapmanız gerekir.
  • Kontrol ettiğiniz geçerli bir alan adı kullanmanız gerekir. Bu nedenle, aşağıdakiler için resmi CA'ları kullanamazsınız:

Ters proxy

Yerel olarak çalışan bir siteye HTTPS ile erişmek için ngrok gibi bir geri proxy kullanmak da bir seçenektir. Bu durum aşağıdaki riskleri beraberinde getirir:

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

Chrome'da mysite.example gibi özel bir ana makine adı kullanıyorsanız tarayıcının mysite.example hizmetini güvenli olarak kabul etmesini zorunlu kılan bir işaret kullanabilirsiniz. Aşağıdaki nedenlerden dolayı böyle bir işlem yapmaktan kaçının:

  • mysite.example değerinin her zaman yerel bir adrese çözüldüğünden emin olmanız gerekir. Aksi takdirde, üretim kimlik bilgilerini sızdırma riskiyle karşı karşıya kalırsınız.
  • Bu işaret yalnızca Chrome'da çalıştığından tarayıcılar arasında hata ayıklama yapamazsınız.

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

Unsplash'ta @anandu tarafından oluşturulan ve düzenlenmiş lokomotif resim arka planı.