Mai Chi BaoWelcome to the first installment of my "Today I Learned" series! Through these posts, I'll share practical insights gained during my work as an algorithm engineer, delving into the techniques I’ve implemented to address real-world challenges. I hope these lessons offer value to your projects as well.
Key Takeaways
- Controlling Multiple Tab Instances: Preventing users from opening multiple instances of the same web application, which can drain resources and potentially crash servers.
- Obtaining User IP Address with JavaScript: Understanding why obtaining a user’s IP address in JavaScript is a challenge due to security constraints and exploring workarounds.
To illustrate, I’ll walk through a project I worked on involving face recognition technology—specifically the steps needed to streamline processing and maintain performance across users.
Project Overview: Building a Face Recognition Web Application
In this example, the task was to create a face recognition application (Check in check out system) accessible via a web browser. The application needed to:
- Automatically start when the page loads.
- Capture the user's face, check for "liveness" (to confirm it's a real person), and then transmit the image to a server for recognition.
- Display the recognition result on the browser.
The application is designed with two main components:
- Client-Side Processing: Includes face detection and liveness detection, handled in the browser.
- Server-Side Processing: Responsible for face recognition, leveraging server resources for identity matching.
For simplicity, imagine the client detects and verifies a face before sending it to the server, where the server returns results, and the browser displays them.
The Problem: Preventing Multiple Tabs
Imagine a typical user, Alex, who recently started using a new face recognition web app to clock in and out of work. One morning, Alex decided to open the app in a few browser tabs, thinking he could speed up his check-in by testing it in multiple tabs at once.
Almost immediately, things went downhill. As each tab loaded, it independently initialized the app’s face detection and verification processes. Alex noticed his computer slowing down drastically, and eventually, the browser began to lag. Behind the scenes, these multiple tabs were each using resources to process Alex’s face, taking a big toll on his device’s performance.
But the problem didn’t end there. With each tab sending separate recognition requests to the server, the app’s server load spiked, causing delays for other users logging in at the same time. The server, overwhelmed by duplicate requests, could barely keep up, resulting in delays and missed check-ins.
To make things more confusing, each tab displayed a different, inconsistent login status. Alex quickly realized that opening the app in multiple tabs had caused unnecessary headaches for him and potential issues for the entire company.
To ensure seamless functionality and avoid unnecessary strain on both client and server resources, we needed to prevent users from opening multiple tabs with the application
The goal was to restrict users from opening more than one instance of the app at a time in their browser, primarily by detecting when other tabs with the same app are already open. Here’s how to approach this:
if (localStorage.getItem('isAppRunning') === 'true') {
alert("The application is already open in another tab. Please close this tab.");
} else {
// Set a flag in localStorage to indicate the app is running
localStorage.setItem('isAppRunning', 'true');
// Add an event listener to clear the flag when the tab is closed
window.addEventListener('beforeunload', () => {
localStorage.removeItem('isAppRunning');
});
// Main function to load models and start video if the app is not running in another tab
(async function main() {
try {
const config = await loadConfig(); // Load models concurrently
const [tinyFaceDetector, fasnet, phoneDetect] = await Promise.all([
loadTinyFaceDetector(),
loadFasnet(config),
loadPhoneDetect(config),
]);
Object.assign(window, { fasnet, phoneDetect, config });
startVideo();
} catch (err) {
console.error('Initialization failed:', err);
}
})();
}
The Problem: Get user IP
In our face recognition system, the requirement has evolved to allow only authorized department-specific access. For instance, if Person A belongs to Department A, they should only be able to check in or out on devices in Department A's network, and not in Department B or any other department. Since these computers are connected via a local area network (LAN), we need a way to identify and restrict access based on the IP address of the device
When I searched online I got some info about getting the IP address. But they have a few issues
function user_location() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log( this.responseText);
}
};
xhttp.open("GET", "//api.ipify.org?format=json", true);
xhttp.send();
}
This function successfully retrieves the user’s public IP address; however, it does not provide the internal LAN IP address required for department-specific access control. Additionally, it is susceptible to masking by VPNs or firewalls.
or maybe this one
Firefox and Chrome have implemented WebRTC that allow requests to STUN servers be made that will return the local and public IP addresses for the user
But I don't wanna add more packages into my app. This complexity, combined with potential cross-browser inconsistencies, makes it less desirable.
Then I found this post
Retrieving a client ip address directly with JavaScript running in the browser is not straightforward. This is because JavaScript does not have access to the network layer where IP addresses are exposed. Moreover, for security reasons, browsers sandbox the JavaScript environment, preventing it from accessing certain system-level information, including the client's ip address.
It turns out that retrieving the IP address solely with JavaScript isn't feasible. However, there's a straightforward solution: creating an API endpoint on the server to obtain the user's IP address.
# Add new endpoint to get IP address
@app.route('/getip', methods=['GET'])
def get_ip():
# Check X-Forwarded-For header first (for clients behind proxy)
client_ip = request.headers.get('X-Forwarded-For')
if client_ip is None:
# If no proxy, get direct client IP
client_ip = request.remote_addr
return jsonify({'ip': client_ip})
When a client makes a request, Flask automatically populates the request object with various headers and connection details.
First, the code checks the X-Forwarded-For header with client_ip = request.headers.get('X-Forwarded-For').
Purpose: This header is commonly set by proxies or load balancers to preserve the original client IP address. If the request passed through a proxy or load balancer, the client’s actual IP address should appear in this header.
If the X-Forwarded-For header is found, client_ip is set to its value.
If the X-Forwarded-For header is missing (e.g., if the client connects directly without a proxy), the code uses request.remote_addr to get the IP address directly from the client.
Summary
In this post, I share my experiences tackling real-world challenges in developing a web-based face recognition app. Here are two key problems we solved:
Preventing Multiple Tab Instances: To stop users from opening the app in multiple browser tabs, we use localStorage to track whether the app is already open. This prevents redundant face-detection processes that strain both client and server resources.
Retrieving User IP Address: Since JavaScript cannot directly access a device’s LAN IP due to security limitations, we set up an API endpoint on the server to obtain the IP from request headers. This approach ensures department-specific access control for authorized devices only.
