JavaScript Logs – Mask Sensitive Information in JSON

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.

I am assuming that data in inform of JSON object, and sensitive information is in form of its attributes.

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 !!

Was this post helpful?

Join 7000+ Awesome Developers

Get the latest updates from industry, awesome resources, blog updates and much more.

* We do not spam !!

Leave a Comment

HowToDoInJava

A blog about Java and related technologies, the best practices, algorithms, and interview questions.