Cara Mengaktifkan https localhost XAMPP di windows menjadi secure

Halo sobat iltek, kali ini nabil akan membagikan tips atau tutorial mengaktifkan https di localhost menggunakan server lokal XAMPP di windows. saya membagikan tutorial ini karena sudah menjadi kebutuhan saya untuk membuat website atau mendevelop di dalam server lokal menggunakan https. kenapa sih saya harus menggunakan https kan cuman diserver lokal ?. sebenarnya untuk di server lokal tidak ada masalah jika menggunakan protokol http.

Saya menggunakan https di server lokal XAMPP karena waktu itu saya sedang belajar menampilkan API here Maps di server lokal dan itu harus menggunakan protokol https agar bisa tampil maps nya maka dari itu saya mencari cari di internet tetapi sangat jarang sekali tutorial yang berhasil menggunakan https di server lokal, dan seperti yang sudah diketahui tidak sesuai dengan ekspetasi saya atau bisa saya bilang gagal cara nya.  Lalu setelah saya lama mencari akhirnya ketemu tutorial di youtube yang benar benar berhasil. Bagaimana sih cara nya ? langsung saja ikuti tutorial mengaktifkan https di localhost menggunakan server lokal XAMPP di windows berikut ini.

Pertama yang harus dipersiapkan adalah software web server Xampp apabila belum menginstal nya bisa mengikuti tutorial di cara menginstal xampp di windows.

Jika sudah menginstal, pergi ke drive C:\xampp\apache biasanya folder xampp ada di drive C:\ bisa di sesuaikan dengan direktori pada saat menginstal ya. buat file baru https.txt kemudian edit lewat text editor anda salin kode berikut :

authorityKeyIdentifier=keyid,issuer 
basicConstraints=CA:FALSE 
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment 
subjectAltName = @alt_names 

[alt_names] 
DNS.1 = localhost
DNS.1 = codespace.test

Perhatikan DNS.1 = localhost ini bisa anda edit atau tambah jika ada DNS yang diinginkan menggunakan protokol https. sebagai contoh:

...

[alt_names] 
DNS.1 = localhost
DNS.2 = produk.test
DNS.3 = wordpress.com
DNS.4 = perpustakaan.dev
DNS.5 = coba.test

Lalu di save.

Rekomendasi Hosting

Kemudian rename file tersebut menjadi https.ext. akan terlihat seperti ini:

Tutorial Mengaktifkan https localhost XAMPP di windows 100% work
Gambar 1.0 file https.ext

Selanjutnya masih di direktori yang sama buka file makecert.bat kedalam text editor anda bisa notepad,sublime text, vscode dll.  jika tidak bisa dibuka, coba ubah file nya menjadi format .txt . lalu cari kode yang semula nya:

bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365

Ubah kode nya menjadi seperti ini :

bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 500 -sha256 -extfile https.ext

Lalu di save.

Setelah itu buka cmd bisa menggunakan perintah windows + R dan ketikkan cmd lalu enter. setelah itu ketikkan:

cd C:\xampp\apache
makecert

Ikuti perintah seperti dibawah ini :

Enter PEM pass phrase : 12345678

Verifying – Enter PEM pass phrase: 12345678

Country Name (2 letter code) [AU]:ID

State or Province Name (full name) [Some-State]: Jakarta

Locality Name (eg, city) []: Jakarta

Organization Name (eg, company) [Internet Widgits Pty Ltd]: Web Dev

Organizational Unit Name (eg, section) []:laravel

Common Name (e.g. server FQDN or YOUR name) []:localhost

Email Address []:example@mail.com

A challenge password []:

An optional company name []:localhost

Enter pass phrase for privkey.pem:12345678

Jika mengikuti perintah diatas maka akan menampilkan Press any key to continue . . .di akhir. Berarti penginstalan ssl sudah berhasil. selanjutnya buka Manage user certificates di search windows atau bisa menggunakan perintah windows + R dan ketikkan certmgr.msc lalu enter. 

certmgr.msc
Gambar 1.1 certmgr.msc

Maka akan muncul seperti ini :

gambar 1.2 Trusted Root Certification Authorities

Lalu klik kanan Certificates > All Tasks > Import…

Cara Mengaktifkan https localhost XAMPP di windows menjadi secure
gambar 1.3 import

Lalu klik next

Cara Mengaktifkan https localhost XAMPP di windows menjadi secure
gambar 1.4 next

Kemudian klik tombol browse cari file server.crt di direktory C:\xampp\apache\conf\ssl.crt\server.crt klik next

Cara Mengaktifkan https localhost XAMPP di windows menjadi secure
gambar 1.5 browse server.crt

Pilih all certificates in the following store kemudian isikan Trusted Root Certification Authorities lalu next > finish.

Tutorial Mengaktifkan https localhost XAMPP di windows 100% work
gambar 1.6

Jika anda ingin merubah domain project framework laravel yang menggunakan ip 127.0.0.1 . anda bisa mengubah nya dengan membuka file hosts di direktori C:\Windows\System32\drivers\etc . lalu tambahkan ini di bawah didalam file hosts :

127.0.0.1         codespace.test

atau menggunakan ip lain selain ini juga bisa , itu sebagai contoh saja untuk merubah domain nya dan jangan lupa di save .

Kemudian buka file httpd-vhosts.conf di direktori C:\xampp\apache\conf\extra.lalu tambah kan kode atau salin kode dibawah ini.

<VirtualHost 127.0.0.1:80>
    DocumentRoot "C:/xampp/htdocs/Develompent/codespace/public"
    ServerName codespace.test
    ServerAlias www.codespace.test
</VirtualHost>

<VirtualHost 127.0.0.1:443>
    DocumentRoot "C:/xampp/htdocs/Develompent/codespace/public"
    ServerName codespace.test
    ServerAlias www.codespace.test
    SSLEngine on
    SSLCertificateFile "C:/xampp/apache/conf/ssl.crt/server.crt"
    SSLCertificateKeyFile "C:/xampp/apache/conf/ssl.key/server.key"
    <Directory "C:/xampp/htdocs/Develompent/codespace/public">
        Options All
    	AllowOverride All
    	Require all granted
    </Directory>
</VirtualHost>

Ip bisa diubah tinggal disesuaikan, untuk contoh itu ip laravel yang biasa memakai 127.0.0.1 kemudian untuk DocumentRoot "C:/xampp/htdocs/Develompent/codespace/public" direktori path nya disesuaikan dengan file anda yang ingin dibuat https. dan Directory "C:/xampp/htdocs/Develompent/codespace/public" juga sama tinggal disesuaikan. jika sudah diubah jangan lupa untuk save file nya.

Setelah itu buka aplikasi xampp jika sudah start apache nya kita stop dulu baru start lagi atau di restart apache xampp nya. lalu buka web browser kesayangan anda bisa google chrome, mozila, opera dll dan buka https://localhost atau klo saya buka https://codespace.testmaka akan menjadi secure.

localhost https
secure localhost
secure https codespace.test
secure https codespace.test

jika ada kendala error bisa email ke nabilkoding@gmail.com mungkin bisa saya bantu 🙂

Demikian selesai sudah tutorial dari nabil,  jangan sungkan – sungkan untuk bertanya ya dan jangan lupa tinggalkan komentar untuk kita bisa Sharing ilmu bareng – bareng. Sekian dan terima kasih. Salam Sobat Iltek🙂 .

Default image
Nabil
I am a person who likes to learn a lot of new things, always trying to solve new things in a more efficient way and what I like most is Error, because in that error we can overcome the problem and can learn from the experience of the error. :)

27 Comments

  1. min saya kok masih not source ya

  2. saya sudah masukan sesuai yang di atas dan konfigurasi certificate nya , namun bermesalah di certificate nya

    • apakah https nya sudah dibuat ?
      coba sesuaikan seperti ini:

      authorityKeyIdentifier=keyid,issuer
      basicConstraints=CA:FALSE
      keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
      subjectAltName = @alt_names

      [alt_names]
      DNS.1 = localhost

      dan coba juga di edit makecert.bat nya di line 9 jadi seperti ini:

      bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 500 -sha256 -extfile https.ext

  3. Terima kasih atas tutorialnya. Mantap bang..
    Kalo user ketik http://localhost kenapa muncul error:
    ———————
    Access forbidden!
    You don’t have permission to access the requested directory. There is either no index document or the directory is read-protected.

    If you think this is a server error, please contact the webmaster.

    Error 403
    localhost
    Apache/2.4.43 (Win64) OpenSSL/1.1.1g PHP/7.4.7
    ———————

    Agar otomatis redirect ke https://localhost harus gimana ya, bang?
    Terima kasih.

    • kalau yang saya lakuin sih masih manual mas ketik https nya dari url ,
      kalau error “You don’t have permission to access” di http://localhost coba langkah ini :
      buka C:\xampp\apache\conf\extra\httpd-xampp.conf
      lalu cari kode dibaawah ini dan tambahkan “Require all granted” seperti dibawah ini dan jangan lupa server apache nya dimatikan terlebih dahulu


      Directory "C:/xampp/htdocs/xampp"
      IfModule php7_module
      Files "status.php"
      php_admin_flag safe_mode off
      /Files
      /IfModule
      AllowOverride AuthConfig
      Require all granted
      /Directory

      lalu di save dan jalankan server nya kembali.
      saya menggunakan https karena untuk mengakses api butuh request dengan protokol https dan saya tidak ada error seperti itu hanya saja ketika saya ketik http://localhost/phpmyadmin akan muncul “http://localhost/https:–localhost/https:–localhost/https:–localhost/https:–localhost/https:” tetapi di browser saya sudah otomatis redirect ke https mas jadi bukan menjadi kendala saya hehe. silakan dicoba dulu langkah2 nya mas . semoga bisa dan semoga bermanfaat 🙂

  4. mas mau tanya kalo untuk menonaktikan sslnya kembali itu gimana ya ?

    • bisa dengan mengubah code nya seperti semula

      bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365

      dan mas jalankan makecert nya kembali . semoga bermanfaat 🙂

  5. bagus mas …tp saya gg bisa ngetik 12345678 d tampilan ini
    Enter PEM pass phrase : 12345678

    • iya kak memang tidak terlihat ketika di ketik, maka dari itu pastikan kembali yang di ketik itu harus sama dengan yang di verifikasi pass nya ya kak:)

  6. Wow, Baru kali ini saya dapat tutorial aktifin SSL di windows lengkap dan sukses.
    makasih banyak atas tutorialnya…
    sangat banyak membantu terutama ketika masih development

  7. Gan mau tanya..klo dari komputer server bisa diakses contoh domain yg dibuat mencoba.com…tapi ketika diakses lewat jaringan lan atau wifi dalam jaringan yg sama dengan server …knp domain local yg dibauat tadi tidak bisa diakses …mohon dibantu gan solusinya

    • setau saya itu karena firewall nya, coba allow domain yang baru dibuat.
      untuk test matikan firewall nya, kalau work berarti domain yang dibuat belum di allow oleh firewall

  8. berhasil, nuhun.

    salam dari codepolitan

    • Halo Nugie, Terima kasih sudah mengikuti artikel kami 😊 , Selalu ikuti Update-an menarik dari kami yaa dan semoga bermanfaat 😊

      Salam Iltekkomputer 🙋‍♂️

  9. setau saya itu karena firewall nya, coba allow domain yang baru dibuat.
    untuk test matikan firewall nya, kalau work berarti domain yang dibuat belum di allow oleh firewa

    sudah saya coba,tetap ga bisa mas. dserver mau, tapi client ga mau

    • Halo Fauzan,
      Jika di server bisa berarti sudah berhasil ya, untuk kasus ini saya belum coba menggunakan komputer client untuk bisa menjadi https. di lain waktu saya coba dulu ya mas untuk mencoba menjadikan https di komp client, apabila berhasil nanti saya buatkan tutorial nya 😊.

      Terima kasih sudah mengikuti artikel kami 😊 , Selalu ikuti Update-an menarik dari kami yaa dan semoga bermanfaat 😊

      Salam Iltekkomputer 🙋‍♂️

  10. punten mas, saya coba di laptop saya, bisa buat akses codespace.test, tapi saya ga bisa lagi akses localhost lewat ip publik. gimana ya balikin ke awal? saya sudah coba makecert ulang dengan mengubah codenya seperti semula.

    • Halo timo,
      Untuk error nya seperti apa ya mas ?, untuk membalikan ke awal bisa dengan mengubah code nya seperti semula

      bin\openssl x509 -in server.csr -out server.crt -req -signkey server.key -days 365

      dan mas jalankan makecert nya kembali . untuk memastikan localhost nya sudah berubah bisa dicoba hapus certificate localhost nya terlebih dahulu di tempat certmgr dan membuat certificate baru dengan mengubah kode makecert seperti diatas.

      Terima kasih sudah mengikuti artikel kami 😊 , Selalu ikuti Update-an menarik dari kami yaa dan semoga bermanfaat 😊

      Salam Iltekkomputer 🙋‍♂️

  11. Apache jadi tidak bisa start kenapa ya?

    • saya juga gabisa start apache, keluar pesan error di xampp seperti d bawah:

      Error: Apache shutdown unexpectedly.
      10:50:10 [Apache] This may be due to a blocked port, missing dependencies,
      10:50:10 [Apache] improper privileges, a crash, or a shutdown by another method.
      10:50:10 [Apache] Press the Logs button to view error logs and check
      10:50:10 [Apache] the Windows Event Viewer for more clues
      10:50:10 [Apache] If you need more help, copy and post this
      10:50:10 [Apache] entire log window on the forums

      kemudian pas di liat log nya seperti berikut :

      [Thu Mar 18 10:18:04.238805 2021] [ssl:emerg] [pid 2876:tid 756] AH02565: Certificate and private key http://www.example.com:443:0 from C:/xampp/apache/conf/ssl.crt/server.crt and C:/xampp/apache/conf/ssl.key/server.key do not match
      AH00016: Configuration Failed

  12. sudah saya coba ikutin step by stepnya mas tapi kok masih not secure ya?

  13. Nais tutorial.. Segera dicoba.. Mau belajar bikin PWA soalnya.. Makasih mas bro..

  14. udah dicoba kenapa masih not secure ya??
    udah di ketik https://localhost padahal

  15. Terima kasihnya kak tutorialnya,
    Untuk lokal tempat saya udah jalan, tapi ketika distting sebgai sever yang bisa diakses oleh user client mlah gak bisa kak, saya coba kasih ip server malah dapat error INternal Server Error
    Mohon Pencerahannya

    terima kasih

    *Errornya kak*
    Internal Server Error
    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator at postmaster@localhost to inform them of the time this error occurred, and the actions you performed just before this error.

    More information about this error may be available in the server error log.

    Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.

    Apache/2.4.26 (Win32) OpenSSL/1.0.2l PHP/5.6.31 Server at rakatokkan.test Port 443

  16. Mas kalau localhost menggunakan port gimana ya mas?

    saya membuat setting localhost diubah portnya:
    contoh:
    localhost:746/

    jika seperti ini, bagaimana ya settingannya, mohon petunjuk. Sebelumnya saya ucapkan terima kasih. Salam sukses selalu.

Leave a Reply