HackingInternetNetworkTeknologiTipsTutorial

Cara Mengaktifkan https localhost XAMPP di windows menjadi secure

Tutorial Mengaktifkan https localhost XAMPP di windows 100% work

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.

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. 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🙂 .

Tags

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. :)

Related Articles

8 Comments

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

    1. 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

  2. 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.

    1. 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 🙂

    1. 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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close