Configuring Appdome Security Alerts with DEV-Events for React-Native Apps

Introduction

This Knowledge Base article reviews in detail how users can configure security alerts for React-Native apps they Build on Appdome.

Appdome Security Alerts, DEV-Events™,  is part of the Appdome Mobile Security Suite.

We hope you find it useful and enjoy using Appdome!

Prerequisites

Before enabling DEV-Eventsfollow these steps below for iOS and Android apps to handle the incoming security events in your application:

  • Create a React-Native project
  • In order to send and receive DEV-Events, you will need to create a native module for both of the Operating Systems

Download the code – ReactNative iOS.txt

How to Follow and Receive Appdome Security Events: 

Open the iOS project in Xcode (resides in IOS folder under the root directory of the project) and add an ADDevEvents class and an ADDevEvents header.
Make the ADDevEvents class inherit from RCTEventEmitter and implements RCTBridgeModule.

The ADDevEvents header should contain the following code:

#ifndef ADDevEvents_h
#define ADDevEvents_h

#import "React/RCTBridgeModule.h"
#import <React/RCTEventEmitter.h>

@interface ADDevEvents : RCTEventEmitter 

@property (strong) NSMutableArray *supportedEventsArray;

@end

#endif /* ADDevEvents_h */ 

Add the following code to ADDevEvents class:

#import <Foundation/Foundation.h>
#import "ADDevEvents.h"
#import "React/RCTBridgeModule.h"

@implementation ADDevEvents

RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD(registerForDevEvent:(NSString *)name ) { // this method can be called from js to register to event
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(handleNotification:)
name:name
object:nil];

if (!self.supportedEventsArray) {
self.supportedEventsArray = [NSMutableArray array];
}

[self.supportedEventsArray addObject:name];

}

- (NSArray *)supportedEvents// this method need to return all the events that will be called with sendEventWithName

{
return self.supportedEventsArray;
}

- (void)handleNotification:(NSNotification *)notification // this method send notification to js

{
[self sendEventWithName:notification.name body:notification.userInfo];
}

@end 

To register Appdome Security Events, see below iOS and Android Security events registration.

Download the code – ReactNative Android.txt

How to Follow and Receive Appdome Security Events: 

Open the android project in Android Studio (it resides in the Android folder under the root directory).
Add ADDevEvents class with the following code:

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.os.Bundle;
import android.support.v4.content.LocalBroadcastManager;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;

import javax.annotation.Nonnull;

public class ADDevEvents extends ReactContextBaseJavaModule {

public ADDevEvents(@Nonnull ReactApplicationContext reactContext) {
super(reactContext);
}

@Nonnull
@Override public String getName() {
return "ADDevEvents";
}

@ReactMethod
public void registerForDevEvent(String action) {
IntentFilter filter = new IntentFilter(action);

LocalBroadcastManager.getInstance(getReactApplicationContext()).registerReceiver(new BroadcastReceiver() {
@Override public void onReceive(Context context, Intent intent) {
handleNotification(intent);
}

}, filter);

}

private void handleNotification(Intent intent) {
WritableMap extras = Arguments.fromBundle(intent.getExtras());
this.getReactApplicationContext()
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(intent.getAction(), extras);
}

@ReactMethod
public void postDevEvent(String action, ReadableMap userInfo) {
Intent intent = new Intent(action);
if (userInfo != null) {
Bundle bundle = Arguments.toBundle(userInfo);
intent.putExtras(bundle);
}
this.getReactApplicationContext().sendBroadcast(intent);
}

}

Add ADDevEventsPackage class with the following code:

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import javax.annotation.Nonnull;

public class ADDevEventsPackage implements ReactPackage {

@Nonnull
@Override
public List createNativeModules(@Nonnull ReactApplicationContext reactContext) {
List modules = new ArrayList<>();
modules.add(new ADDevEvents(reactContext));
return modules;
}

@Nonnull
@Override
public List createViewManagers(@Nonnull ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}

Add “new ADDevEventsPackage()” class to getPackages method in MainApplication class.
Here is an example of the MainApplication class code:

public class MainApplication extends Application implements ReactApplication {

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ADDevEventsPackage()
);

}

@Override
protected String getJSMainModuleName() {
return "index";
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

iOS and Android Security events registration

Call registerForDevEvents and postNotificationToAppdome from Java Script. By default the App.js file holds the JS code for the application.
Add NativeModules and NativeEventEmitter from ‘react-native’. Add the following code:

const { ADDevEvents } = NativeModules;
const aDDevEvents = new NativeEventEmitter(ADDevEvents);

Add the following function:

function registerToDevEvent(action, callback) {
NativeModules.ADDevEvents.registerForDevEvent(action);
aDDevEvents.addListener(action, callback);
}

Register to the DEV-Events by calling registerToDevEvent(action, callback).
Send the DEV-Events with NativeModules.ADDevEvents.postNotificationToAppdome(“Dev-Event Name”, {“Key”: “Value”});

See below an example for App.js file:

import { NativeModules, Alert, NativeEventEmitter} from 'react-native';

const { ADDevEvents } = NativeModules;
const aDDevEvents = new NativeEventEmitter(ADDevEvents);

function registerToDevEvent(action, callback) {
    NativeModules.ADDevEvents.registerForDevEvent(action);
    aDDevEvents.addListener(action, callback);
}

export function registerToAllEvents() {

    registerToDevEvent(
        'BlockedKeyboardEvent',
        (userinfo) => Alert.alert("Keyboard event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'BlockedClipboardEvent',
        (userinfo) => Alert.alert("COPY event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'RootedDevice',
        (userinfo) => Alert.alert("Jainbroken / Rooted device event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'UnknownSourcesEnabled',
        (userinfo) => Alert.alert("UnknownSourcesEnabled event received " + JSON.stringify(userinfo)) // Android event
    );

    registerToDevEvent(
        'EmulatorFound',
        (userinfo) => Alert.alert("EmulatorFound event received " + JSON.stringify(userinfo)) // Android event
    );

    registerToDevEvent(
        'SslCertificateValidationFailed',
        (userinfo) => Alert.alert("SslCertificateValidationFailed event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'SslServerCertificatePinningFailed',
        (userinfo) => Alert.alert("SslServerCertificatePinningFailed event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'SslIncompatibleCipher',
        (userinfo) => Alert.alert("SslIncompatibleCipher event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'SslIncompatibleVersion',
        (userinfo) => Alert.alert("SslIncompatibleVersion event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'BlockedScreenCaptureEvent',
        (userinfo) => Alert.alert("BlockedScreenCaptureEvent event received " + JSON.stringify(userinfo)) // ios event
    );

    registerToDevEvent(
        'UrlWhitelistFailed',
        (userinfo) => Alert.alert("UrlWhitelistFailed event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'DeveloperOptionsEnabled',
        (userinfo) => Alert.alert("DeveloperOptionsEnabled event received " + JSON.stringify(userinfo)) // Android event
    );

    registerToDevEvent(
        'SslInvalidMinRSASignature',
        (userinfo) => Alert.alert("SslInvalidMinRSASignature event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'SslInvalidMinECCSignature',
        (userinfo) => Alert.alert("SslInvalidMinECCSignature event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'SslInvalidMinDigest',
        (userinfo) => Alert.alert("SslInvalidMinDigest event received " + JSON.stringify(userinfo))
    );

    registerToDevEvent(
        'BannedManufacturer',
        (userinfo) => Alert.alert("BannedManufacturer event received " + JSON.stringify(userinfo)) // Android event
    );
}

You are welcom to view our example Android browser app – https://github.com/Appdome/BrowserAndroidWithDevEvents

How to Add DEV-Events™ to Any Mobile App(s) on Appdome

Follow the step-by-step instructions in this knowledge base to add DEV-Events™ to your React-Native Mobile App.

That is it – Enjoy Appdome with DEV-Events™ in your app!

To zoom out on this topic, visit the Mobile App Security page on our website.

Thank you!

Thanks for visiting Appdome! Our mission is to make mobile integration easy. We hope we’re living up to the mission with your project. If you don’t already have an account, you can sign up for free.

Liron Dror

Have a question?

Ask an expert