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

Introduction

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

@property (strong) NSMutableArray<NSString *> *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<NSString *> *)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 

How to Follow and Receive Appdome Security Events: 

(You can copy the code from the file ReactNative Android.txt)

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<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new ADDevEvents(reactContext));
return modules;
}

@Nonnull
@Override
public List<ViewManager> 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<ReactPackage> getPackages() {
return Arrays.<ReactPackage>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);
}
}

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

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
    );
}

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