Is there a way to prevent android tapjacking in Nativescript apps?

android

#1

To prevent android tapjacking, we can use setFilterTouchesWhenObscured(boolean) in java code or set the android:filterTouchesWhenObscured layout attribute to true.

I have try to use setFilterTouchesWhenObscured() in app.component.ts as below

import { isAndroid, isIOS, screen, device } from "platform";
declare const android: any;
.
.
.
ngOnInit() {
        if (!isAndroid) {
          return;
        }
        android.view.setFilterTouchesWhenObscured(true);
}

But I am getting

JS: ERROR TypeError: android.view.setFilterTouchesWhenObscured is not a function
JS: ERROR CONTEXT [object Object]

Please share if anyone managed to prevent tapjacking vulnerability in android nativescript app


#2

You should call the function on the button or view instance,

if (isAndroid) { 
  this.yourElementRef.nativeElement.nativeView.setFilterTouchesWhenObscured(true);
}

If you want to apply this for all your views / buttons etc., in app, you may simply override initNativeView method on the NativeScript view / button class.


#3

@manojdcoder Thanks for the answer. I have tried like below. But still getting JS: ERROR TypeError: cannot read property 'nativeElement' of undefined.

Any idea, whats am i doing wrong?

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";

@ViewChild("password") password: ElementRef;

ngAfterViewInit(){
   if(isAndroid){
       let passwordTextFlied = <TextField>this.password.nativeElement;
       passwordTextFlied.nativeView.setFilterTouchesWhenObscured(true);
   }
}

#4

I believe either you did’t declare the identifier in your HTML or the ElementRef is not yet initialized in ngAfterViewInit call. The best time could be loaded event of the password text field, which assures the creation of native view too.


#5

I have wrap inside a setTimeout(). Think it’s working now.
Thanks for the support