{"id":9534,"date":"2023-07-29T17:50:00","date_gmt":"2023-07-29T15:50:00","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9534"},"modified":"2023-07-29T18:18:32","modified_gmt":"2023-07-29T16:18:32","slug":"xampp-setup-https-ssl-localhost-on-macos","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2023\/07\/29\/xampp-setup-https-ssl-localhost-on-macos\/","title":{"rendered":"XAMPP &#8211; Setup HTTPS\/SSL localhost on macOS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Original Post from <a href=\"https:\/\/tidus.dev\/xampp-https-ssl-localhost#10-open-chrome-and-access-https-localhost-congratulation\" data-type=\"URL\" data-id=\"https:\/\/tidus.dev\/xampp-https-ssl-localhost#10-open-chrome-and-access-https-localhost-congratulation\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"preparation\">Preparation<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-check-xampp-ssl-config\">1. Check XAMPP SSL config<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open \/<code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">Applications\/XAMPP\/xamppfiles\/etc\/httpd.conf<\/code> and make sure your settings are the same as below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">LoadModule socache_shmcb_module lib\/httpd\/modules\/mod_socache_shmcb.so\nLoadModule ssl_module modules\/mod_ssl.so<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;IfModule ssl_module>\n    &lt;IfDefine SSL>\n        Include etc\/extra\/httpd-ssl.conf\n    &lt;\/IfDefine>\n&lt;\/IfModule><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Test SSL config with this command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">sudo \/Applications\/XAMPP\/xamppfiles\/xampp enablessl<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-backup-httpd-ssl-conf\">2. Backup httpd-ssl.conf<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to: <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">\/Applications\/XAMPP\/xamppfiles\/etc\/extra<\/code><\/li>\n\n\n\n<li>Copy\u00a0<code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\"><strong>httpd-ssl.conf<\/strong>\u00a0<\/code>&amp; paste as\u00a0<strong><code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">httpd-ssl.conf.bak<\/code><\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-edit-httpd-ssl-conf\">3. Edit httpd-ssl.conf<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">\/Applications\/XAMPP\/xamppfiles\/etc\/extra\/httpd-ssl.conf<\/code><\/li>\n\n\n\n<li>Change default port from 8443 to 443<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#Listen 8443\nListen 443<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Find this line and&nbsp;<strong>remove everything below it<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">## SSL Virtual Host Context<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setup-https-ssl-localhost\">Setup HTTPS\/SSL localhost<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open Terminal<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-create-ssl-folder-to-store-ssl-files\">4. Create SSL folder to store SSL files<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cd\n\/Applications\/XAMPP\/xamppfiles\/etc\/\nmkdir ssl\ncd ssl<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-create-ssl-csr-private-key\">5. Create SSL CSR &amp; private key<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can use any file name here (just replace&nbsp;<strong>localhost<\/strong>)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">openssl req -new -newkey rsa:2048 -nodes -keyout localhost.key -out localhost.csr<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Enter info as below. Note: change&nbsp;<strong>localhost&nbsp;<\/strong>to your localhost domain name (ex: www.domain.name)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Country Name (2 letter code) [AU]:VN\nState or Province Name (full name) [Some-State]:HCM\nLocality Name (eg, city) []:HCM\nOrganization Name (eg, company) [Internet Widgits Pty Ltd]:VN\nOrganizational Unit Name (eg, section) []:VN\nCommon Name (e.g. server FQDN or YOUR name) []:&lt;strong>localhost&lt;\/strong>\nEmail Address []:abc@gmail.com<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">There are 2 more information may be asked:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>A challenge password<\/em><\/li>\n\n\n\n<li><em>An optional company name<\/em><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Leave this information BLANK (just Enter, no need to input anything)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-create-ext-file\">6. Create .ext file<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">touch localhost.ext<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Copy &amp; paste below content to v3.ext file<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note: change&nbsp;<strong>localhost<\/strong>&nbsp;to your localhost domain name<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">authorityKeyIdentifier=keyid,issuer\nbasicConstraints=CA:FALSE\nkeyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment\nsubjectAltName = @alt_names\n\n[alt_names]\nDNS.1 = localhost<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7-create-ssl-crt\">7. Create SSL CRT<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">openssl x509 -req -sha256 -extfile localhost.ext -days 3650 -in localhost.csr -signkey localhost.key -out localhost.crt<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8-add-ssl-crt-to-macos-keychain\">8. Add SSL CRT to macOS Keychain<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Double click on&nbsp;<strong>localhost.crt&nbsp;<\/strong>on Finder<\/li>\n\n\n\n<li>Select Keychain:&nbsp;<strong>System<\/strong>&nbsp;then click Add<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cdn.tidus.dev\/16707\/xampp-https-ssl-localhost.jpg?v=1\" alt=\"XAMPP - Setup HTTPS\/SSL localhost on macOS\" width=\"384\" height=\"219\" title=\"XAMPP - Setup HTTPS\/SSL localhost on macOS\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Find &amp; double click on localhost cert in Keychain Access<\/li>\n\n\n\n<li>Expand Trust, select When using this certificates:&nbsp;<strong>Always Trust<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-1024x546.png\" alt=\"\" class=\"wp-image-9540\" width=\"512\" height=\"273\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-1024x546.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-300x160.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-768x409.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image.png 1212w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cdn.tidus.dev\/16709\/xampp-https-ssl-localhost.jpg?v=1\" alt=\"XAMPP - Setup HTTPS\/SSL localhost on macOS\" width=\"576\" height=\"341\" title=\"XAMPP - Setup HTTPS\/SSL localhost on macOS\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Close the window and click Update Settings<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9-config-ssl-in-xampp-virtual-host\">9. Config SSL in XAMPP virtual host<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Open \/Applications\/XAMPP\/xamppfiles\/etc\/extra\/httpd-vhosts.conf<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Update your config:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">from<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;VirtualHost *:80>\n\tServerName localhost\n\tDocumentRoot \"\/Applications\/XAMPP\/xamppfiles\/htdocs\"\n&lt;\/VirtualHost><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">to<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;VirtualHost *:443>\n\tServerName localhost\n\tDocumentRoot \"\/Applications\/XAMPP\/xamppfiles\/htdocs\"\n\n\tSSLEngine on\n\tSSLCertificateFile \"\/Applications\/XAMPP\/xamppfiles\/etc\/ssl\/localhost.crt\"\n\tSSLCertificateKeyFile \"\/Applications\/XAMPP\/xamppfiles\/etc\/ssl\/localhost.key\"\n&lt;\/VirtualHost><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"10-open-chrome-and-access-https-localhost-congratulation\">10. Open Chrome and access\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/localhost\/\" target=\"_blank\">https:\/\/localhost<\/a>.<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-1.png\" alt=\"\" class=\"wp-image-9543\" width=\"319\" height=\"214\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-1.png 638w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-1-300x201.png 300w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-3.png\" alt=\"\" class=\"wp-image-9545\" width=\"312\" height=\"274\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-3.png 624w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/07\/image-3-300x263.png 300w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Original Post from here Preparation 1. Check XAMPP SSL config Open \/Applications\/XAMPP\/xamppfiles\/etc\/httpd.conf and make sure your settings are the same as below: Test SSL config with this command: 2. Backup httpd-ssl.conf 3. Edit httpd-ssl.conf Setup HTTPS\/SSL localhost Open Terminal 4. Create SSL folder to store SSL files 5. Create SSL CSR &amp; private key You can use any file name here (just replace&nbsp;localhost) Enter info as below. Note: change&nbsp;localhost&nbsp;to your localhost domain name (ex: www.domain.name) There are 2 more information may be asked: Leave this information BLANK (just Enter, no need to input anything) 6. Create .ext file Copy &amp; paste [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4,155],"tags":[],"class_list":["post-9534","post","type-post","status-publish","format-standard","hentry","category-apache","category-xampp"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9534"}],"version-history":[{"count":8,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9534\/revisions"}],"predecessor-version":[{"id":9553,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9534\/revisions\/9553"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}