Find out how to integrate NetFUNNEL to control your home page, the first thing your users will see.
Main page control technical overview
Instead of directly accessing the main page from the outside, you can control the inflow to the main page itself by applying the NetFUNNEL waiting page instead of the existing main page.
Both basic and path control require the same upfront works.
- Working Process : It operates in the flow of external → NetFUNNEL waiting page (index.html) → existing main page (index_real.html).
How to apply
- Change index.html (the original main page) to index_real.html, and apply the HTML file to be used as the NetFUNNEL waiting page to index.html.
- Install the Agent by inserting the tag Code Snippet in index.html.
- Call the NFStart API as the callback function of the load event.
- Please refer to How to integrate API
- (Optional) To prevent malicious direct access when the URL of the real page is exposed using localStorage, sessionStorage or a cookie, you can add a way to make the real page (index_real.html) available only after entering through a waiting page (index.html).
If you are using the path control feature from the home page, you will also need to insert the code snippet into the html of the endpoint.
Sample code
- Waiting page : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetFUNNEL waiting page</title>
<script>
// NetFUNNEL script settings
(function(w, d, s, uri, fn) {
w[fn] = w[fn] || function() {
var c = {};
c.tenantApiUrl = arguments[0];
c.tenantNFUrl = arguments[1];
(w[fn].l = w[fn].l || []).push(c);
};
var o = d.createElement(s);
var p = d.getElementsByTagName(s)[0];
o.async = 1; o.charset = 'utf-8'; o.src = uri;
p.parentNode.insertBefore(o, p);
})(window, document, 'script', '{Agent library request address}', 'nfTag');
nfTag('{tenant information request URL}', '{NetFUNNEL server request URL}');
// Start waiting while page loads
window.addEventListener('load', function() {
NFStart({
projectKey: 'service_1',
segmentKey: 'segKey_1'
}, function(response) {
localStorage.setItem('passedThroughWaiting', 'true'); // Mark as passed the waiting page
location.href = 'index_real.html'; // Navigate to the real main page
});
});
</script>
</head>
<body>
<h1>Waiting page</h1>
<!-- Contents -->
</body>
</html>
- Real main page : index_real.html
This code forces the actual main page (index_real.html) to be accessible only through a waiting page (index.html). If a user tries to access index_real.html directly without going through the waiting page, they will be automatically redirected to the waiting page.
In addition, you can implement a way to use server-generated tokens or other authentication methods.
Technical scenario: Issue a token from the server after passing through a waiting page, and validate the token on the server when accessing the live main page.
The above approach can increase security by preventing users from arbitrarily generating or modifying tokens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Actual main page</title>
<script>
// Check if the page loaded through a waiting page
window.addEventListener('load', function() {
var passedThroughWaiting = localStorage.getItem('passedThroughWaiting');
if (!passedThroughWaiting) {
location.href = 'index.html'; // Redirect to the waiting page if you didn't go through the waiting page
} else {
localStorage.removeItem('passedThroughWaiting'); // Delete the flag
}
});
</script>
</head>
<body>
<h1>Actual main page</h1>
<!-- Contents -->
</body>
</html>
Comments
0 comments
Article is closed for comments.