How to hide authentication details in an URL

In this post (Accessing Reports / Dashboards Created Using Helical Insight Publicly), we were passing authentication details (username and password) in the URL along with directory and file name. In this post, we hide those authentication details and just pass directory and file name to the URL.

We will write a simple JavaScript code that gets our work done.

STEP – 1: Create a variable that holds baseURL of the application. For example:

var baseURL = 'http://192.168.2.9:8085/hi-ee/hi.html';

STEP – 2: Create a variable that holds username and password details. For example:

var credentials = 'j_username=userName&j_password=userPassword';

STEP – 3: Write a JavaScript function that gets parameter value that are present in the URL.

Code:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

In the above function getParameterByName, we are passing two arguments which are:

1. name – name of the parameter that is is used in the URL. User needs to provide the parameter which he / she wants to get from the URL.
2. url – Function automatically takes the location URL (URL of the window). So user doesn’t need to provide URL to the function.

Example: Consider the URL below:

http://192.168.2.9:8085/hi-ee/hi.html?dir=HelicalDemo&file=HelicalDemoFile.efw

So if we need to get the value of the parameter file from the URL, we call the function getParameterByName as:

getParameterByName('file');

// Calling above function will return:
HelicalDemoFile.efw

STEP – 4: Create a variable which holds variables created in STEPS 1 & 2. For example:

var url = baseURL +"?"+ getParameterByName('dir') + "?" + getParameterByName('file') + "?" + credentials;

Above url variable will give a final URL as:

http://192.168.2.9:8085/hi-ee/hi.html?dir=HelicalDemo&file=HelicalDemoFile.efw&j_username=userName&j_password=userPassword

We can also perform validation checks on the parameters that we receive in the variable url.
For example:

if(getParameterByName('file') === "undefined" || getParameterByName('file') === "") {
    // Perform operation here (either redirect or you can show any error message)
}

In the same way, we can validate dir too.

Now if we want to open the report or dashboard that resides in the application but want it to open in any website, we need to pass the above created URL to the iframe. iframe takes the URL variable as a source and opens the URL provided as if the report or dashboard is opened in the website. So we need an iframe element. We can create an iframe element as shown below with the help of JavaScript.

var frameElement = document.createElement('iframe');
frameElement.src = url;
frameElement.style.height = "100%";
frameElement.style.width= "100%";
document.body.appendChild(frameElement);

Putting it all together:

var baseURL = 'http://192.168.2.9:8085/hi-ee/hi.html';
var credentials = 'j_username=userName&j_password=userPassword';

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var url = baseURL +"?"+ getParameterByName('dir') + "?" + getParameterByName('file') + "?" + credentials;

var frameElement = document.createElement('iframe');
frameElement.src = url; // variable created above
frameElement.style.height = "100%";
frameElement.style.width= "100%";
document.body.appendChild(frameElement);

Copy the above code and save it as a JavaScript file (JavaScript file ends with an extension .js). Provide any name as you wish and if you want to integrate this process in a website, then keep this file in public_html folder if it is WordPress. If it is not, keep this JavaScript file so that it can be accessible where ever it is needed.

We can also achieve the same in PHP. The code can be downloaded from here: PHP &
JS files

Save the file with extension as .php in public_html folder (if you wish to use PHP code). We can give any name to the php file. For example, I would like to save it as hi.php. Now to open the report, the URL that we have to provide is:

https://www.helicalinsight.com/hi-ee/?dir=HelicalDemo&file=HelicalDemoFile.efw

In the above URL, we are not only hiding authentication details (username and password), but also we have changed the baseURL. That’s it.