Installing SSL certificates (Socket Secure Layer) is a way to protect your website. Essentially, SSL encrypts data transactions between the browser and the server. Therefore, you can test your website in an SSL environment right from the development stage.
However, URLs and other components of the website like CSS and JavaScript are clearly shown through the https protocol. So in this article, Mytour will guide you on activating SSL for Localhost using MAMP.
SSL Activation
Start MAMP and create a VirtualHost with a custom domain name, which can be set with extensions like .dev or .local.
Each VirtualHost you create in MAMP will have its own options for you to configure.
To activate SSL for the VirtualHost, access the SSL tab and check the SSL option. Then specify the location of the SSL certificate files. If you already have SSL certificates, specify their location. If not, click the Self-Signed Certificate button to let MAMP generate certificates for you.
To create an SSL certificate, MAMP will prompt you for certain information such as country code and country of residence to be included in the certificate:
Save the file to the appropriate directory and SSL is configured.
Setting up Chrome browser to recognize your website
After activating SSL for Localhost using MAMP, you can view your website via the https protocol. However, you will see an error message displayed on the screen like the one below. This is because the Chrome browser does not recognize your SSL certificate.
Note that when running WordPress-based websites, you'll need to tweak the siteurl and home entries from the wp_options table in the database.
If encountering website reliability issues, access the Advanced options, then click on Proceed to {your website name} to view your website.
If a red X appears on the Chrome browser, you must make Chrome trust the certificate you've created:
First, click on the padlock icon with the red X symbol, then select the Certificate Information link. A Chrome window will display a popup containing all the SSL certificate information designated for the website. Drag and drop the certificate icon onto the desktop.
If you're using Mac OS X, opening the certificate file will lead you to the Keychain Access application.
Click on Always Trust. Select your website certificate, then click on the [i] button to display the certificate's trust details. In the Trust tab, you'll see the When using this certificate option.
The default value for this option is set to Use Custom Settings. To make your certificate trustworthy, set the value of this option to Always Trust, and you'll be prompted to enter your password once again to apply this setting.
Everything is now set up. Finally, reopen your website on the Chrome browser, and now you'll see a green padlock icon. This means that your SSL certificate is recognized as a trusted certificate.
Thus, Mytour has just guided you on activating SSL for Localhost using MAMP. When your SSL certificate is recognized as a trusted certificate, it's also a way to protect your website, so you should implement SSL and HTTPS on Wordpress to enhance security further. If you have any opinions or questions needing clarification, please leave your comments below the article.