data masking and disable cut copy paste in angular using directives

Masking is a technique that is used to hide sensitive information, such as card numbers, account numbers, phone numbers, ssn etc. This can help to protect against fraud and identity theft. In addition to this we may be asked to disable the cut-copy-paste options too.

In this article, I will show you how to create an Angular directives that can be used to mask data and disable cut-copy-paste.

Step 1: Create a disable cut-copy-paste directive

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[ftp-disable-ccp]'
})
export class DisableCcpDirective {

  constructor() { }

  @HostListener("copy", ["$event"])
  blockCopy(e: KeyboardEvent) {
    e.preventDefault();
  }

  @HostListener("paste", ["$event"])
  blockPaste(e: KeyboardEvent) {
    e.preventDefault();
  }

  @HostListener("cut", ["$event"]) blockCut(e: KeyboardEvent) {
    e.preventDefault();
  }

}

Step 2: Create data masking directive

I am masking the except last 4 characters data with 'X'. If you want to change this behavior to particular case you can pass those as input props.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[ftp-masking]'
})
export class MaskingDirective {

  @Input() maskwith = "X";
  @Input() maskRegex = /.(?=.{4})/g;

  private value: string = '';

  private element!: HTMLInputElement;

  constructor(private el: ElementRef) {
    this.element = el.nativeElement;
  }

  ngonInit(): void {
    this.value = this.element.value;
  }

  @HostListener('input')
  @HostListener('change')
  onValueChange() {
    this.value = this.element.value;
  }

  @HostListener('blur')
  onBlur() {
    this.maskData()
  }

  @HostListener('focus')
  onFocus() {
    this.unmaskData();
  }

  maskData() {
    //masking the data except last 4 digits using X. 
    //You can customize this as it is input to the directive
    this.element.value = this.element.value.replace(this.maskRegex, this.maskwith);
  }
  unmaskData() {
    this.element.value = this.value;
  }

}

Step 3: Use the Directive

Now, we can use our directive in our Angular template. Please refer Account Number field

<mat-card appearance="outlined">
            <mat-card-content>
                <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
                    <mat-form-field class="example-full-width">
                        <mat-label>First Name</mat-label>
                        <input matInput placeholder="First Name" value="" formControlName="firstName">
                    </mat-form-field>
                    <mat-form-field class="example-full-width">
                        <mat-label>Last Name</mat-label>
                        <input matInput placeholder="Last Name" value="" formControlName="lastName">
                    </mat-form-field>
                    <mat-form-field class="example-full-width">
                        <mat-label>Account Number</mat-label>
                        <input matInput placeholder="Account Number" value="" formControlName="accountNumber" ftp-disable-ccp
                            ftp-masking>
                    </mat-form-field>
                    <button mat-raised-button [disabled]="profileForm.invalid" style="float: right; ">Submit</button>
                </form>
            </mat-card-content>
        </mat-card>

Conclusion

Data masking is an important security measure. By using an Angular directives, we can easily implement masking in our applications.

Please leave a comment if you have any question.