Masking sensitive information is very practical need of applications which deal with sensitive customer data. For example, banking applications. When these applications run inside organization intra-net, many times UI logs are generated and stored on user’s machine for debugging purpose.
In above scenario, it is regulatory requirement to mask all such sensitive informations so that they are not stored in user’s machine. In this tutorial, we will learn to apply masking on such sensitive information.
Use JSON.stringify() with replacer function
The solution lies in use of function JSON.stringify(). This function converts a JavaScript/JSON object to a JavaScript Object Notation (JSON) string representation. This JSON string is used for logging purpose.
JSON.stringify( value [, replacer] [, space] )
Here value is object to stringify and replacer is a function that transforms the results. This replacer function is called for each attribute of JSON object during traversing complete object. In replacer function, you get the attribute in key-value pair (i.e. attribute-name and attribute-value).
Use this replacer function to mask the sensitive information.
e.g. In below example, I am masking the accountNumber field. You can customize the function maskInfo as per your project need.
var unmaskedData = { "name":"Lokesh", "accountNumber":"3044444444", "city":"New York"};
var maskedData = JSON.stringify( unmaskedData, maskInfo );
function maskInfo (key, value) {
var maskedValue = value;
if (key == "accountNumber")
{
if(value && value.length > 5) {
maskedValue = "*" + maskedValue.substring(value.length - 4, value.length);
} else {
maskedValue = "****";
}
}
return maskedValue;
}
Output:
{
"name": "Lokesh",
"accountNumber": "*4444", //Masked account number
"city": "New York"
}
Data Masking Live Demo
Source code
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript - Mask Sensitive Information Demo</h2>
<p>Input JSON payload in left box and press submit button. Masked data will appear on right box.</p>
<table>
<tr>
<th>Unmasked Data</th>
<th>Masked Data</th>
</tr>
<tr>
<td><textarea id="unmasked" rows="10" cols="30">{ "name":"Lokesh", "accountNumber":"3044444444", "city":"New York"}</textarea></td>
<td><textarea id="masked" rows="10" cols="30"></textarea></td>
</tr>
<tr><td colspan="2"><input type="button" name="submit" value="Submit" onclick="submit()"></td></tr>
</table>
<script>
function submit() {
var unmaskedData = JSON.parse(document.getElementById("unmasked").value);
var maskedData = JSON.stringify(unmaskedData, maskInfo, ' ');
document.getElementById("masked").value = maskedData;
}
function maskInfo(key, value)
{
//Default value is same as original
var maskedValue = value;
if (key == "accountNumber")
{
if(value && value.length > 5) {
maskedValue = "*" + maskedValue.substring(value.length - 4, value.length);
} else {
maskedValue = "****";
}
}
return maskedValue;
}
</script>
</body>
</html>
Drop me your questions in comments section.
Happy Learning !!