HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / JavaScript / JavaScript Logs – Mask Sensitive Information in JSON

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

Share this:

  • Twitter
  • Facebook
  • LinkedIn
  • Reddit

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Comments are closed on this article!

Search Tutorials

JavaScript / jQuery Tutorials

  • Ajax Tutorial
  • jQuery – Ajax
  • jQuery – Deep Cloning
  • jQuery – Selectors
  • jQuery – All Selector
  • jQuery – Cut, Copy or Paste Events
  • jQuery – ENTER Key Press Event
  • jQuery – Keypress vs. Keydown
  • jQuery – Funny Discussion on SO
  • JavaScript – Array filter()
  • JavaScript – Equality vs Identity
  • JavaScript – Variable Scope Rules
  • JavaScript – Global Variables
  • JavaScript – MVC and PubSub
  • JavaScript – DOM vs. jQuery Objects
  • JavaScript – Unit Test with Jasmine
  • JavaScript – Information Masking

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Java 15 New Features
  • Sealed Classes and Interfaces
  • EdDSA (Ed25519 / Ed448)