Time-based Data Masking with Vue.js

Data security is an extremely important part of many of our projects at Bio::Neos. For one of our projects specifically, that data is in the form of patient information. For handling these kinds of projects, not only must we ensure that we are developing HIPAA compliant software and infrastructure, but we also are required to add safeguards against that data being leaked due to user error. One solution we’ve come up with is to introduce a “masking timer” that could be used to hide any sensitive data being displayed on the screen after a set period of time, while at the same time allowing the user to hide/unhide the data as they see fit. For example, this is useful for cases where the user might forget to logout from the application before getting up and leaving their computer unattended; while we implement idle-based automatic logouts this won’t protect data in the short-term until that logout timer is hit. In this post, I’ll walk through the steps we took to develop our own timer switch for data masking.

Selected Patient.gif

Writing the Masking Switch/Timer Component

The front-end of this project is written in Vue.js (version 2), so we first started by creating a generic looking component that could run a timer and then alert us when that timer ran out.

<template>
  <div></div>
</template>


<script>
const MASKING_TIMEOUT_MILLIS = 5 * 60 * 1000; // Default 5 mins
let maskingTimeout = null;
export default {
  mounted() {
    this.startMaskingTimer();
  },
  beforeDestroy() {
    this.cancelMaskingTimer();
  },
  methods: {
    startMaskingTimer()
    {
      maskingTimeout = setTimeout(() => {
        this.alertMaskingTimerExpired();
      }, MASKING_TIMEOUT_MILLIS);
    },
    cancelMaskingTimer()
    {
      if (maskingTimeout) 
        clearTimeout(maskingTimeout);
    },
    alertMaskingTimerExpired()
    {
      this.$emit('timerExpired');
    }
  }
}
</script>

Here we have a Vue.js component that starts a timer when mounted and emits an event named timerExpired when the time runs out. When the timer expires, our parent component can listen for this event and act accordingly (in our case, mask any data that needs to be masked). But, we don’t want the timer to run out while the user is actively using the app. To accommodate, let’s listen for any events that might indicate that the user is still interacting with our application and restart the timer if that’s the case:

<template>
  <div></div>
</template>


<script>
const MASKING_TIMEOUT_MILLIS = 5 * 60 * 1000; // Default 5 mins
const EVENTS = ['click', 'keypress'];
let maskingTimeout = null;
export default {
  mounted() {
    this.startMaskingTimer();
  },
  beforeDestroy() {
    this.cancelMaskingTimer();
    this.removeActivityEventListeners();
  },
  methods: {
    startMaskingTimer()
    {
      maskingTimeout = setTimeout(() => {
        this.alertMaskingTimerExpired();
      }, MASKING_TIMEOUT_MILLIS);
      EVENTS.forEach(event => {
        window.addEventListener(event, this.onActivityDetected, true);
      });
    },
    cancelMaskingTimer()
    {
      if (maskingTimeout) 
        clearTimeout(maskingTimeout);
    },
    alertMaskingTimerExpired()
    {
      this.$emit('timerExpired');
    },
    onActivityDetected() {
      // Restart the timer
      this.cancelMaskingTimer();
      this.startMaskingTimer();
    },
    removeActivityEventListeners() {
      // Remove event listeners
      EVENTS.forEach(event => {
        window.removeEventListener(event, this.onActivityDetected, true);
      });
    },
  }
}
</script>

Here we’ve added a couple of new methods: onActivityDetected() and removeActivityEventListeners(). Now when the masking timer starts we are adding event listeners to the window that listen for whatever we deem as user activity. In this example, we are listening for any clicks or key presses. If any user activity is detected, then we call onActivityDetected() and restart the masking timer.

This is great and all, however what if the masking timer runs out so that the data is hidden, but the user returns to their computer and wants to see it again? Let’s hook up this timer to a UI component that lets the user unmask or mask the data on their own:

 <template>
   <b-switch
    v-model="isDataMasked"
    left-label>
    Privacy Switch
   </b-switch>
 </template>
...
... 
},
  data() {
    return {
      isDataMasked: true
    }
  }
...

Now we’ve added a switch component (courtesy of a components framework called buefy (https://buefy.org) to the template part of our Vue component. Whether or not the switch is “on” is determined by a reactive variable we’re calling isDataMasked.

export default {
  mounted() {
    // Emit the current state of the mask data switch
    this.$emit('switch', this.isDataMasked);
    if (!this.isDataMasked)
    {
      this.startMaskingTimer();
    }
  },
  beforeDestroy() {
    this.cancelMaskingTimer();
    this.removeActivityEventListeners();
  },
  watch: {
    isDataMasked(newVal, oldVal) {
      // Broadcast change in the mask data switch
      this.$emit('switch', newVal);
      if (!newVal)
      {
        this.startMaskingTimer();
      }
      else
      {
        // Cancel the masking timer if the switch is toggled on (indicating data is already masked)
        this.cancelMaskingTimerAndInterval();
        this.removeActivityEventListeners();
      }
    }
  },
  methods: {
    startMaskingTimer()
    {
      maskingTimeout = setTimeout(() => {
        this.alertMaskingTimerExpired();
      }, MASKING_TIMEOUT_MILLIS);
      EVENTS.forEach(event => {
        window.addEventListener(event, this.onActivityDetected, true);
      });
    },
    cancelMaskingTimer()
    {
      if (maskingTimeout) 
        clearTimeout(maskingTimeout);
    },
    alertMaskingTimerExpired()
    {
      this.isDataMasked = true;
    },
    onActivityDetected() {
      // Restart the timer
      this.cancelMaskingTimer();
      this.startMaskingTimer();
    },
    removeActivityEventListeners() {
      // Remove event listeners
      EVENTS.forEach(event => {
        window.removeEventListener(event, this.onActivityDetected, true);
      });
    },
  },
...

In the script part of our component, we needed to add a few things:

1. When the component is mounted, we want to emit what state the switch is in so that right away the parent component knows what it needs to do

2. We are no longer emitting the timerExpired event and are instead changing the isDataMasked variable to true whenever the timer expires.

3. Probably most important change to recognize here, is that we’ve added a watch on the isDataMasked variable.

When isDataMasked is set to true by either the user flipping the switch or the timer expiring, we want to emit the state of the switch back to the parent component and then cancel the timer and remove our event listeners. There’s no use in keeping the timer running while the data is currently being masked. On the other hand, if isDataMasked is set to false by the user flipping off the switch, we want to emit the state of the switch back to the parent component and then start up the timer again.

Hooking up the Masking Switch/Timer Component to the Parent

So, now that we’ve written our masking timer component, how do we actually use it? All that needs to be done from here is to import it into our parent component and add an event handler for the switch event:

<template>
  <div>
    <MaskDataSwitch v-on:switch="toggleDataMasking"</MaskDataSwitch>
    <p v-if="masked">##########</p>
    <p v-else>Sensitive Patient Data!</p>
  </div>
</template>


<script>
import './components/MaskDataSwitch';
export default {
  components: { MaskDataSwitch },
  methods: {
    toggleDataMasking(switchValue)
    {
      this.masked = switchValue;
    }
  },
  data() {
    return {
      masked: true
    }
  }
}
</script>
...

And that’s it! Using this implementation, we were able to create a modular and re-usable component involving a timer and a switch that could be used to handle data masking across our app. And because the masking component itself is completely agnostic to the content that it is actually masking, we can use this anywhere we have privacy concerns!

Thanks for reading the Bio::Neos blog! We certainly hope this post is both insightful and engaging. Be sure to contact us with questions and comments and follow us on LinkedIn for more updates.

Follow us on LinkedIn for all of our news!

Stay Up-to-date