Yerel geliştirme için HTTPS kullanma

Maud Nalpas

Çoğu zaman http://localhost, geliştirme amaçları için HTTPS gibi davranır. Ancak özel ana makine adları veya tarayıcılar arasında güvenli çerezler kullanma gibi bazı özel durumlarda, sitenizin üretimde nasıl çalıştığını 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çişi öncelikli hale getirin).

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ı referansına bakın.**

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

Yerel geliştirme sitenizde HTTPS kullanmak ve https://localhost veya https://mysite.example (özel ana makine adı) adresine erişmek için cihazınızın ve tarayıcınızın güvendiği bir varlık tarafından imzalanmış bir TLS sertifikasına ihtiyacınız vardır. Bu varlığa güvenilir sertifika yetkilisi (CA) denir. 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 başlıklı makaleyi inceleyin.

Birçok işletim sisteminde sertifika oluşturmak için kitaplıklar (ör. openssl) bulunur. Ancak mkcert'ten daha karmaşık ve daha az güvenilirdirler ve platformlar arası olmaları gerekmez. Bu da onları daha büyük geliştirici ekipleri için daha az erişilebilir hale getirir.

Kurulum

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

    İşletim sisteminize mkcert 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üvenilirdir.

  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 şunu çalıştırın:

    mkcert mysite.example

    Bu komut iki işlem gerçekleştirir:

    • 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 tarayıcınızın yerel olarak güvendiği bir sertifika yetkilisi tarafından imzalanmış durumda.

  4. Sunucunuzu, yeni 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:

    👩🏻‍💻 Node ile:

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

    👩🏻‍💻 React geliştirme sunucusuyla:

    package.json dosyanızı aşağıdaki gibi düzenleyin ve {PATH/TO/CERTIFICATE...} değerini 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
    |--...

    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 HTTPS ile yerel olarak çalıştırdığınızı tekrar kontrol etmek için tarayıcınızda https://localhost veya https://mysite.example adresini açın. Tarayıcınız mkcert'i yerel bir sertifika yetkilisi olarak kabul ettiğ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 (ör. macOS'te):

    brew install mkcert

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

    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 uyarı olmadan https://{YOUR HOSTNAME} adresine erişebilirsiniz.

</div>

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

Sertifikanızı ayarlamanın diğer yolları aşağıda açıklanmıştır. Bu yöntemler genellikle mkcert kullanmaktan daha karmaşık veya risklidir.

Kendinden imzalı sertifika

Ayrıca, mkcert gibi yerel bir sertifika yetkilisi kullanmamaya karar verebilir ve bunun yerine sertifikanızı kendiniz imzalayabilirsiniz. Bu yaklaşımın birkaç dezavantajı vardır:

  • Tarayıcılar sizi sertifika yetkilisi olarak kabul etmediğ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.
  • mkcert gibi yerel bir CA kullanmaktan daha kolay veya daha hızlı olması gerekmez.
  • Kendinden imzalı sertifikalar, güvenilir sertifikalarla tamamen aynı şekilde davranmaz.
  • Bu tekniği tarayıcı bağlamında kullanmıyorsanız sunucunuz için sertifika doğrulamasını devre dışı bırakmanız gerekir. Üretim ortamında tekrar etkinleştirmeyi unutmak güvenlik sorunlarına yol açar.
Kendi kendine imzalanmış bir sertifika kullanıldığında tarayıcıların gösterdiği uyarıların ekran görüntüleri.
Kendinden imzalı bir 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 aynı tarayıcı uyarılarını ve kendinden imzalı sertifikaların diğer dezavantajlarını içerir. Neyse ki ön uç çerçevelerinin yerleşik HTTPS seçeneğini kullanabilir ve mkcert veya benzeri bir araçla 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 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 durumda risk size aittir.

Tarayıcıların kendinden imzalı sertifikalara neden güvenmediğini gösteren bir diyagram.
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 komplikasyonlara yol açar:

  • mkcert gibi yerel bir CA tekniği kullanmaya kıyasla daha fazla kurulum çalışması yapmanız gerekir.
  • Kontrol ettiğiniz geçerli bir alan adı kullanmanız gerekir. Bu, resmi CA'ları aşağıdakiler için kullanamayacağınız anlamına gelir:

Ters proxy

Yerel olarak çalışan bir siteye HTTPS ile erişmenin başka bir 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 göstermek için yararlı olabilir ancak yetkisiz kişilerin hassas bilgileri paylaşmasına da olanak tanıyabilir.
  • Bazı ters proxy hizmetleri kullanım için ücret alır. Bu nedenle, hizmet seçiminizde fiyatlandırma 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ıyı mysite.example adresini güvenli olarak kabul etmeye zorlamak için bir işaret kullanabilirsiniz. Aşağıdaki nedenlerden dolayı bunu yapmaktan kaçının:

  • mysite.example adresinin 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 işaret yalnızca Chrome'da çalıştığından tarayıcılar arasında hata ayıklama yapamazsınız.

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

Önceki
Yerel geliştirme için HTTPS ne zaman kullanılır?