Overview
A microservice which returns the client’s IP address, preferred language, and software.
Links
How to run the project
git clone https://github.com/AngeliqueDF/request-header-parser-microservice-challenge.git MY-FOLDER-NAME
cd MY-FOLDER-NAME
- Add
.env
file with aPORT
value npm install
npm start
- 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
- Open the terminal
- 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
- Create a new file from the terminal
touch request.rest && code request.rest
. - In
request.rest
, enterGET http://localhost:5000/api/whoami
. - Click on the
Send request
link that appears above the request you entered in step 2. - 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.
Leave a Reply