As developers, we know the importance of creating secure web applications. That's why it's essential to use HTTPS.
But did you know that HTTPS should also be used when developing locally on our machines? But you do not need to worry about creating and installing a TLS certificate. In this article, I'll explore the benefits of using localhost as a local development domain and explain how it's assumed to be HTTPS secure, regardless of whether or not we have a local certificate installed.
I'll also introduce the concept of using a unique CDN domain for a staging or test environment to ensure our applications are thoroughly tested before deployment.
![Using localhost for Web Development]()
By the end of this article, you will understand why these practices are crucial for secure web development and be equipped with the knowledge to implement them in your own projects.
Using HTTPS for Modern APIs
HTTPS stands for Hypertext Transfer Protocol Secure, and it's a protocol that's used to encrypt data that's transmitted over the internet. Essentially, it creates a secure connection between a client (like a web browser) and a server, making it difficult for hackers to intercept or manipulate the data being transmitted.
Using HTTPS is particularly important for modern APIs because they often deal with sensitive data, such as personal information or financial transactions. Without HTTPS, this data could be intercepted and used for malicious purposes.
Some of the security benefits of using HTTPS include:
- Authentication: HTTPS verifies that the server you're connecting to is the one you intended to connect to, helping to prevent man-in-the-middle attacks.
- Encryption: HTTPS encrypts the data being transmitted between the client and server, making it difficult for hackers to intercept or read the data.
- Integrity: HTTPS ensures that the data being transmitted hasn't been modified or tampered with during transmission.
Enabling HTTPS on a local development environment can be tricky, but it's important to ensure that your development environment is as secure as possible. One way to do this is to use self-signed SSL certificate, which you can generate using a tool like OpenSSL. Another option is to use a tool like ngrok, which creates a secure tunnel to your local development environment and exposes it to the internet with HTTPS enabled. This is a quick and easy way to test your APIs with HTTPS without having to install a local SSL certificate.
While enabling HTTPS on a local development environment can be challenging, these tools can make it easier. By taking the time to secure your development environment, you'll be setting yourself up for success as a developer.
Using Localhost as a Local Development Domain
When it comes to local development, one of the most common ways to access your applications is by using localhost as your development domain. localhost is a hostname that refers to the current computer you're working on, and it's often used to access web servers running on the same machine.
One of the benefits of using localhost as your development domain is that it's assumed to be HTTPS secure. This means that even if you don't have a local SSL certificate installed, your web server will still be accessible over HTTPS. This is because modern web browsers assume that localhost is always HTTPS secure, and they don't require a valid SSL certificate for this hostname.
If you think about it, this makes complete sense. The reason you use HTTPS is to keep external, or third parties from spying on the network traffic. Using localhost means there is no network traffic, everything is contained on your local machine. You are both the server and the client!
Because localhost is assumed to be HTTPS secure, modern APIs that require HTTPS are enabled by default when running on localhost. For example, the Native Share API and Push Notifications both require a secure context to function properly. By using localhost for local development, you can test these APIs and ensure that they're working correctly before deploying your application to a production environment.
Using localhost for local development has several benefits. First, it allows you to test your applications locally before deploying them to a production environment. This can save you time and money, as you can catch bugs and issues before they become bigger problems. Additionally, using localhost can simplify the development process, as you don't need to worry about configuring a public domain name or dealing with DNS settings.
One thing to keep in mind when using localhost is that it's possible to run multiple web servers on the same machine, each on a different port number. For example, you might run one web server on port 3000 and another on port 4000. To access these different servers, you can use URLs like http://localhost:3000 or http://localhost:4000. This allows you to have multiple sites running on the same server, which can be useful for testing different applications or versions of your code.
Personally, I use a cadre of random port numbers. Each project I work on will have a unique port number, usually above 20000. Often I use something like 23001, to match the year and the project number of the year. You just need to make sure you are not stepping on a port number used by another service.
Using localhost as your local development domain is a common and convenient way to test your applications before deploying them to a production environment. By default, localhost is assumed to be HTTPS secure, which can simplify the development process and enable modern APIs that require HTTPS. Additionally, using different port numbers allows you to run multiple web servers on the same machine, which can be useful for testing multiple applications or versions of your code.
Modern Browser APIs and Features that Require HTTPS
The web offers several APIs and features that require a secure context, HTTPS. These features and APIs are designed to ensure that sensitive data and user privacy are protected. Here are some examples of modern browser APIs and features that require HTTPS:
- Service Workers: Service Workers are scripts that run in the background of a web application, and they can be used to provide offline functionality, push notifications, and other advanced features. However, service workers require HTTPS to be registered, as they can intercept network requests and manipulate responses.
- Geolocation API: The Geolocation API allows web applications to request a user's location. However, this API requires HTTPS to be used, as it can be used to track a user's movements and location history.
- Web App Manifest: The Web App Manifest is a JSON file that provides information about a web application, such as its name, icon, and theme color. However, this file requires HTTPS to be served, as it can be used to inject malicious code into a user's browser.
- WebRTC: WebRTC is a set of browser APIs that enable real-time communication, such as video and voice chat. However, WebRTC requires HTTPS to be used, as it can be used to leak a user's IP address and location. You could build your own Skype, Zoom or Teams!
- Device Orientation API: The Device Orientation API provides access to a device's motion and orientation data, such as its acceleration and rotation rates. However, this API requires HTTPS to be used, as it can be used to track a user's physical movements.
- Web Notifications API: The Web Notifications API allows web applications to display system notifications to users, such as new message alerts. However, this API requires HTTPS to be used, as it can be used to display malicious notifications or steal user data.
- Push API: The Push API allows web applications to receive push notifications, even when the application is not open. However, this API requires HTTPS to be used, as it can be used to leak sensitive user data or display malicious notifications.
- Background Sync API: The Background Sync API allows web applications to synchronize data in the background, even when the application is not open. However, this API requires HTTPS to be used, as it can be used to leak sensitive user data or perform malicious actions.
- Payment Request API: The Payment Request API allows web applications to request payment information from users, such as credit card details. However, this API requires HTTPS to be used, as it can be used to steal sensitive user data.
- Clipboard API: The Clipboard API allows web applications to read and write to a user's clipboard, such as copying and pasting text. However, this API requires HTTPS to be used, as it can be used to steal sensitive user data or insert malicious content.
These are just a few examples of modern browser APIs and features that require HTTPS. By using localhost as your local development domain and enabling HTTPS, you can test these features and ensure that they're working correctly before deploying your application to a production environment.
Using a Localhost Server
To use localhost as your development domain, you need to run a local web server on your machine to serve your web applications. A local web server can be useful for serving static files, testing APIs, and running other development tasks. More advanced servers can run server-side platforms like .NET or PHP.
One popular option for running a local web server is to use the http-server node module. This is what I use for almost every website I develop. http-server is a simple, zero-configuration command-line http server that can serve static files and directories. To use http-server, you can install it globally with npm and then run it from your command line. Here's an example:
npm install http-server -g
cd /path/to/your/project
http-server
I configure it as my default start npm command:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "http-server public/ -p 23001 -c -i",
"start-admin": "http-server admin/ -p 22002 -c -i"
},
This way I can just use 'npm start' for the public website and 'npm run start-admin' for the admin portal.
This will start the http-server on localhost and serve your files on port 23001 and 23002. You can then access your application by navigating to http://localhost:23001 in your web browser.
Using a local web server like http-server can have several benefits for local development. First, it allows you to serve your files over a specific port number, which can be useful if you need to test different ports or protocols. Additionally, http-server supports several useful options, such as live reloading, directory listings, and CORS headers, which can simplify your development process.
While http-server is a popular option for local web servers, there are other options available that might better suit your needs. For example, webpack-dev-server is a popular choice for serving dynamic applications, and live-server is another simple, zero-configuration option.
You could also run a local instance of node express and of course IIS if you are using Windows.
It's important to choose a local web server that fits your specific needs and workflow.
Using a localhost server can be a useful tool for local development, allowing you to serve static files, test APIs, and run other development tasks. The http-server node module is a simple and popular option for serving static files, but there are other options available that might better suit your needs. By using a local web server, you can simplify your development process and save time in your workflow.
Using a Unique CDN Domain for a Staging or Test Environment
In addition to using localhost for local development, you can also use a unique CDN domain for a staging or test environment. A CDN, or Content Delivery Network, is a system of servers that deliver web content to users based on their geographic location, helping to reduce page load times and improve website performance.
Using a unique CDN domain for staging or testing can have several benefits. First, it allows you to test your web application in an environment that closely mimics your production environment, ensuring that it will perform as expected when it's deployed. Additionally, using a unique CDN domain can help to isolate your staging or test environment from your production environment, reducing the risk of accidentally deploying untested code.
To use a unique CDN domain for staging or testing, you can create a new subdomain that's separate from your production domain. For example, if your production domain is example.com, you might create a staging domain like staging.example.com. You can then configure your CDN to serve your staging environment from this domain while continuing to serve your production environment from your main domain.
Using a unique CDN domain for staging or testing can have several benefits. By isolating your staging or test environment from your production environment, you can reduce the risk of accidentally deploying untested code, which can save you time and prevent potential issues for your users. Additionally, using a CDN for your staging environment can help to improve website performance and ensure that your application is working as expected in different geographic regions.
My personal preference is to configure an AWS S3 bucket to be a static web server. I use that as the origin for a CloudFront distribution. This gives me a unique domain with a HTTPS support.
For example https://e92drcw23rayni.cloudfront.net/
Using a unique CDN domain for a staging or test environment can be a useful tool for testing your web application in an environment that closely mimics your production environment. By isolating your staging or test environment from your production environment, you can reduce the risk of deploying untested code and improve website performance.
Conclusion
In this article, we've explored the importance of using HTTPS for modern APIs, using localhost as a local development domain, and using a unique CDN domain for a staging or test environment. By using HTTPS for your APIs, you can ensure that your users' data is protected and your application is secure. Using localhost as your development domain can simplify your development process and enable you to test modern browser APIs and features that require HTTPS. Finally, using a unique CDN domain for staging or testing can improve website performance and reduce the risk of deploying untested code.
As you continue to develop your web applications, we encourage you to consider the best practices we've discussed in this article. By using HTTPS, localhost, and a unique CDN domain, you can ensure that your application is secure, performant, and ready for deployment.
If you're interested in continuing your web development education, we offer certifications, eBooks, and other learning resources to help you stay up-to-date with the latest technologies and best practices. We also have local chapters and events where you can connect with other developers and learn from experts in the field.
Thank you for reading, and happy coding!