Request header parser, Node and Express microservice.

Overview

A microservice which returns the client’s IP address, preferred language, and software.

Links

• GitHub repository.

• Live demo hosted on heroku.

How to run the project

1. git clone https://github.com/AngeliqueDF/request-header-parser-microservice-challenge.git MY-FOLDER-NAME
2. cd MY-FOLDER-NAME
3. Add .env file with a PORT value
4. npm install
5. npm start
6. Visit http://localhost:{PORT}

Features

• Parses the request’s headers to return information about it.
• Handles requesting an unknown URL.

Technologies

• node
• express
• helmet
• Bootstrap

Description

This project is an Express.js app which parses specific headers from a request and returns them in a JSON object. It could be used in an analytics software, a data analytics API, or a logging system, for example.

It’s my solution to freeCodeCamp’s Request Header Parser Microservice challenge.

How to test the app (manually)

Once the server is listening, there are different ways to test this microservice:

Using the curl utility

1. Open the terminal
2. Enter curl http://localhost:5000/api/whoami

This will send a GET request at the URL by default. The console will print the response.

Using the REST Client VS Code extension

1. Create a new file from the terminal touch request.rest && code request.rest.
2. In request.rest, enter GET http://localhost:5000/api/whoami.
3. Click on the Send request link that appears above the request you entered in step 2.
4. Once a response is received from the server, its body and headers will be displayed in a new editor tab.

In the browser

There are 2 ways to test the app in the browser.

• Visit http://localhost:5000 to view the homepage of the project.

• Visit http://localhost:5000/api/whoami. Your browser will send a GET request to the API and display the response in a JSON format. If necessary, use the JSONVue extension or Firefox to make it easier to view.

How I built this project

Writing the API

I completed this app using Express’ documentation. The framework provides everything needed.

Here is the code providing the main functionality of the app:

app.get("/api/whoami", function (req, res) {
	res.json({
		ipaddress: req.ip,
		language: req.get("Accept-Language"),
		software: req.get("User-Agent"),
	});
});

I used helmet to add minimal security.

Customizing the frontend

The challenge provided a frontend, but I wanted to improve it and make it more accessible.

• I added an index.html file to serve at the root path. It’s structured with semantic HTML.

//...
	<p>For example, the following information was found on this browser:</p>

        <table class="table table-dark">
          <tr>
            <td>IP address:</td>
            <td id="initial-ip">The IP address of your client will be displayed here.</td#></tr>
          <tr>
            <td>Language:</td>
            <td id="initial-language">The chosen language of your client will be displayed here.</td#></tr>
          <tr>
            <td>Software:</td>
            <td id="initial-software">The software your client works on will be displayed here.</td#></tr>
        </table>
//...

• For the CSS, I used a minified Bootstrap stylesheet served from a CDN. Then I added a few rules to customize Bootstrap.

Sending requests from the frontend to the API

To make the frontend display information found about the browser, I added a main.js file:

First, the script sends a request to the server

const getBrowserInfo = async () => {
	try {
		const response = await fetch(
			location.protocol + "//" + location.host + "/api/whoami"
		);

		const json = await response.json();

		return json;
	} catch (error) {
		console.log(error);
	}
};

//...

window.addEventListener("DOMContentLoaded", async () => {
	const browserInfo = await getBrowserInfo();
//...
});

To make the code more concise, I added a utility function to insert data in the DOM:

const insertResponse = (selector, value) => {
	const element = document.getElementById(selector);
	element.textContent = value;
};

If the request was successful, the information received from the server is displayed in the HTML table:

window.addEventListener("DOMContentLoaded", async () => {
	const browserInfo = await getBrowserInfo();
	insertResponse("initial-ip", browserInfo.ipaddress);
	insertResponse("initial-language", browserInfo.language);
	insertResponse("initial-software", browserInfo.software);
});

API documentation

Get the parsed headers

Returns information on the request.

GET localhost:{PORT}/api/whoami/

Parameters

None. All values are taken from the request’s headers.

Example response

{
	"ipaddress": "159.20.14.100",
	"language": "en-US,en;q=0.5",
	"software": "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0"
}

Recommended technologies and tools

• nodemon to restart the server after each save.
• JSONVue.
• REST Client VS Code extension.

Status

The app is functional but needs security improvements.

Data coming from clients is processed without any check. Trusting input from the client can leave the app vulnerable to malicious requests.

Planned changes

• [ ] Improve security.

Sources

• Request Header Parser Microservice – freeCodeCamp

Useful references

1. req.ip from the Express documentation.
2. req.get(field) from the Express documentation.

Author

• @AngeliqueDF on GitHub.
• Visit my website.
• View my Frontend Mentor profile.