freerasp-react-native 4.5.0 → 4.5.2

package/example/src/DemoApp.tsx

@@ -1,392 +0,0 @@
-/* eslint-disable react-native/no-inline-styles */
-import * as React from 'react';
-import { Box, Flex, HStack, Text, VStack } from '@react-native-material/core';
-import CheckmarkCircle from '../assets/checkmark-circle-outline.png';
-import CloseCircle from '../assets/close-circle-outline.png';
-import TalsecLogo from '../assets/talsec-logo.png';
-import {
-  ScrollView,
-  Image,
-  TouchableOpacity,
-  StyleSheet,
-  TextInput,
-  View,
-  Modal,
-  ActivityIndicator,
-} from 'react-native';
-import { Colors } from './styles';
-import { MalwareModal } from './MalwareModal';
-import {
-  isScreenCaptureBlocked,
-  blockScreenCapture,
-  type SuspiciousAppInfo,
-  storeExternalId,
-  removeExternalId,
-} from 'freerasp-react-native';
-import {
-  ALERT_TYPE,
-  AlertNotificationRoot,
-  Toast,
-} from 'react-native-alert-notification';
-
-export const DemoApp: React.FC<{
-  checks: {
-    name: string;
-    status: string;
-  }[];
-  suspiciousApps: SuspiciousAppInfo[];
-  allChecksFinishedStatus: 'in progress' | 'completed';
-}> = ({ checks, suspiciousApps, allChecksFinishedStatus }) => {
-  const [hasScreenCaptureBlocked, setHasScreenCaptureBlocked] =
-    React.useState(false);
-  const [externalIdValue, setExternalIdValue] = React.useState('');
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  React.useEffect(() => {
-    (async () => {
-      await updateScreenCaptureStatus();
-    })();
-  }, []);
-
-  const updateScreenCaptureStatus = async () => {
-    try {
-      const isBlocked = await isScreenCaptureBlocked();
-      setHasScreenCaptureBlocked(isBlocked);
-    } catch (error) {
-      console.error('Error fetching screen capture status:', error);
-    }
-  };
-
-  const toggleScreenCaptureBlock = async () => {
-    try {
-      const response = await blockScreenCapture(!hasScreenCaptureBlocked);
-      console.info('Changing Screen Capture Status:', response);
-      await updateScreenCaptureStatus();
-    } catch (error: any) {
-      console.error('Screen capture Error:', error.message);
-    }
-  };
-
-  const handleModalSend = async () => {
-    setModalVisible(false);
-    try {
-      await storeExternalId(externalIdValue);
-      Toast.show({
-        type: ALERT_TYPE.SUCCESS,
-        title: 'Success',
-        textBody: 'External ID stored',
-      });
-    } catch (error: any) {
-      Toast.show({
-        type: ALERT_TYPE.WARNING,
-        title: 'Warning',
-        textBody: 'External ID not stored',
-      });
-    }
-  };
-
-  const handleModalRemove = async () => {
-    setModalVisible(false);
-    try {
-      await removeExternalId();
-      Toast.show({
-        type: ALERT_TYPE.SUCCESS,
-        title: 'Success',
-        textBody: 'External ID removed',
-      });
-    } catch (error: any) {
-      Toast.show({
-        type: ALERT_TYPE.WARNING,
-        title: 'Warning',
-        textBody: 'External ID not removed',
-      });
-    }
-  };
-
-  const handleModalDismiss = () => {
-    setModalVisible(false);
-  };
-
-  return (
-    <>
-      <AlertNotificationRoot>
-        <Flex fill style={styles.flex}>
-          <ScrollView>
-            <VStack>
-              <Image source={TalsecLogo} style={{ alignSelf: 'center' }} />;
-              <HStack
-                style={{ justifyContent: 'space-evenly', paddingTop: 10 }}>
-                <TouchableOpacity
-                  onPress={toggleScreenCaptureBlock}
-                  style={[
-                    styles.button,
-                    hasScreenCaptureBlocked && styles.blockedButton,
-                  ]}>
-                  <Text
-                    style={[
-                      styles.buttonText,
-                      { color: hasScreenCaptureBlocked ? 'white' : 'black' },
-                    ]}>
-                    {hasScreenCaptureBlocked
-                      ? 'Enable Screen Capture'
-                      : 'Block Screen Capture'}
-                  </Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={() => setModalVisible(true)}
-                  style={[styles.button]}>
-                  <Text style={[styles.buttonText, { color: 'black' }]}>
-                    Set External ID
-                  </Text>
-                </TouchableOpacity>
-                <Modal
-                  transparent
-                  visible={modalVisible}
-                  animationType="fade"
-                  onRequestClose={handleModalDismiss}>
-                  <View style={styles.modalOverlay}>
-                    <View style={styles.modalContent}>
-                      <Text style={styles.title}>Set External ID</Text>
-                      <TextInput
-                        style={styles.input}
-                        placeholder="Type something..."
-                        value={externalIdValue}
-                        onChangeText={setExternalIdValue}
-                      />
-                      <View style={styles.buttonRow}>
-                        <TouchableOpacity
-                          style={styles.sendButton}
-                          onPress={handleModalSend}>
-                          <Text style={styles.modalText}>Send</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                          style={styles.removeButton}
-                          onPress={handleModalRemove}>
-                          <Text style={styles.modalText}>Remove</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                          style={styles.dismissButton}
-                          onPress={handleModalDismiss}>
-                          <Text style={styles.modalText}>Dismiss</Text>
-                        </TouchableOpacity>
-                      </View>
-                    </View>
-                  </View>
-                </Modal>
-              </HStack>
-              <Text style={styles.titleText}>RASP Execution State:</Text>
-              <Box
-                style={[
-                  styles.box,
-                  allChecksFinishedStatus === 'completed'
-                    ? styles.boxCheckOk
-                    : styles.boxProgress,
-                ]}>
-                <HStack
-                  style={{
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                  }}>
-                  <Text
-                    style={{
-                      color:
-                        allChecksFinishedStatus === 'completed'
-                          ? 'green'
-                          : Colors.progressDark,
-                      fontWeight: 'bold',
-                      alignSelf: 'center',
-                    }}>
-                    All Checks Finished
-                  </Text>
-                  {allChecksFinishedStatus === 'completed' ? (
-                    <Image
-                      source={CheckmarkCircle}
-                      style={[
-                        styles.checkIcon,
-                        {
-                          tintColor: Colors.checkOkDark,
-                        },
-                      ]}
-                    />
-                  ) : (
-                    <ActivityIndicator size={30} color={Colors.progressDark} />
-                  )}
-                </HStack>
-              </Box>
-              <Text style={styles.titleText}>freeRASP checks:</Text>
-              {checks.map((check: any, idx: number) => (
-                <Box
-                  key={idx}
-                  style={[
-                    styles.box,
-                    check.status === 'ok'
-                      ? styles.boxCheckOk
-                      : styles.boxCheckNok,
-                  ]}>
-                  <HStack style={{ justifyContent: 'space-between' }}>
-                    <Text
-                      style={{
-                        color:
-                          check.status === 'ok' ? 'green' : 'rgb(200, 0, 0)',
-                        fontWeight: 'bold',
-                        alignSelf: 'center',
-                      }}>
-                      {check.name}
-                    </Text>
-                    {check.name === 'Malware' && (
-                      <MalwareModal
-                        isDisabled={check.status === 'ok'}
-                        suspiciousApps={suspiciousApps}
-                      />
-                    )}
-                    {check.status === 'ok' ? (
-                      <Image
-                        source={CheckmarkCircle}
-                        style={[
-                          styles.checkIcon,
-                          {
-                            tintColor: Colors.checkOkDark,
-                          },
-                        ]}
-                      />
-                    ) : (
-                      <Image
-                        source={CloseCircle}
-                        style={[
-                          styles.checkIcon,
-                          {
-                            tintColor: Colors.checkNokDark,
-                          },
-                        ]}
-                      />
-                    )}
-                  </HStack>
-                </Box>
-              ))}
-            </VStack>
-          </ScrollView>
-        </Flex>
-      </AlertNotificationRoot>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  flex: {
-    paddingTop: 50,
-    backgroundColor: Colors.background,
-    justifyContent: 'center',
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: '500',
-    alignSelf: 'center',
-    textAlign: 'center',
-  },
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 180,
-    height: 50,
-    backgroundColor: Colors.checkOkLight,
-    borderRadius: 10,
-    padding: 2,
-    marginTop: 20,
-  },
-  blockedButton: {
-    backgroundColor: Colors.checkNokDark,
-  },
-  colorCheckNok: {
-    color: Colors.checkNokDark,
-  },
-  colorCheckOk: {
-    color: Colors.checkOkDark,
-  },
-  boxCheckNok: {
-    borderColor: Colors.checkNokDark,
-    backgroundColor: Colors.checkNokLight,
-  },
-  boxCheckOk: {
-    borderColor: Colors.checkOkDark,
-    backgroundColor: Colors.checkOkLight,
-  },
-  boxProgress: {
-    borderColor: Colors.progressDark,
-    backgroundColor: Colors.progressLight,
-  },
-  box: {
-    borderWidth: 1,
-    paddingHorizontal: 30,
-    paddingVertical: 4,
-    marginVertical: 8,
-    marginHorizontal: 20,
-    borderRadius: 15,
-  },
-  checkIcon: {
-    width: 30,
-    height: 30,
-  },
-  titleText: {
-    alignSelf: 'center',
-    fontWeight: 'bold',
-    fontSize: 25,
-    color: 'white',
-    paddingTop: 15,
-  },
-  modalOverlay: {
-    flex: 1,
-    height: 10,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalContent: {
-    width: '80%',
-    backgroundColor: 'white',
-    padding: 20,
-    borderRadius: 10,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 10,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 5,
-    padding: 10,
-    marginBottom: 20,
-  },
-  buttonRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  sendButton: {
-    backgroundColor: '#4CAF50',
-    padding: 10,
-    borderRadius: 5,
-    flex: 1,
-    marginRight: 10,
-    alignItems: 'center',
-  },
-  removeButton: {
-    backgroundColor: '#FF9800',
-    padding: 10,
-    borderRadius: 5,
-    flex: 1,
-    marginRight: 10,
-    alignItems: 'center',
-  },
-  dismissButton: {
-    backgroundColor: '#f44336',
-    padding: 10,
-    borderRadius: 5,
-    flex: 1,
-    alignItems: 'center',
-  },
-  modalText: {
-    color: '#fff',
-    fontWeight: 'bold',
-  },
-});

package/example/src/MalwareItem.tsx

@@ -1,161 +0,0 @@
-import { Button, HStack } from '@react-native-material/core';
-import {
-  addToWhitelist,
-  getAppIcon,
-  type SuspiciousAppInfo,
-} from 'freerasp-react-native';
-import ArrowUp from '../assets/arrow-up.png';
-import ArrowDown from '../assets/arrow-down.png';
-import React, { useEffect } from 'react';
-import { useState } from 'react';
-import { TouchableOpacity, View, Text, Image, StyleSheet } from 'react-native';
-import { Colors } from './styles';
-
-export const MalwareItem: React.FC<{ app: SuspiciousAppInfo }> = ({ app }) => {
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      // retrieve app icons for detected malware
-      const appIcon = await getAppIcon(app.packageInfo.packageName);
-      app.packageInfo.appIcon = appIcon;
-    })();
-  }, [app.packageInfo]);
-
-  const appUninstall = async () => {
-    alert('Implement yourself!');
-  };
-
-  const whitelistApp = async (packageName: string) => {
-    try {
-      const whitelistResponse = await addToWhitelist(packageName);
-      console.info(
-        `Malware Whitelist response for ${app}: ${whitelistResponse}`
-      );
-      alert('Restart app for whitelist to take effect');
-    } catch (error: any) {
-      console.info('Error while adding app to malware whitelist: ', error);
-    }
-  };
-
-  return (
-    <View style={styles.item}>
-      <TouchableOpacity onPress={() => setExpanded(!expanded)}>
-        <HStack>
-          <Image
-            style={styles.iconSmall}
-            source={{
-              uri: `data:image/png;base64,${app.packageInfo.appIcon}`,
-            }}
-          />
-          <View style={styles.textView}>
-            <Text numberOfLines={1} style={styles.titleText}>
-              {app.packageInfo.appName}
-            </Text>
-          </View>
-
-          <View style={styles.buttonView}>
-            <Image
-              source={expanded ? ArrowUp : ArrowDown}
-              style={styles.expandArrow}
-            />
-          </View>
-        </HStack>
-      </TouchableOpacity>
-      {expanded && (
-        <>
-          <View style={styles.spacer} />
-          <Text style={styles.listItemTitle}>Package name:</Text>
-          <Text style={styles.listItem}>{app.packageInfo.packageName}</Text>
-          <Text style={styles.listItemTitle}>App name:</Text>
-          <Text style={styles.listItem}>
-            {app.packageInfo.appName ?? 'Not specified'}
-          </Text>
-          <Text style={styles.listItemTitle}>App version:</Text>
-          <Text style={styles.listItem}>
-            {app.packageInfo.version ?? 'Not specified'}
-          </Text>
-          <Text style={styles.listItemTitle}>App Icon:</Text>
-          {app.packageInfo.appIcon ? (
-            <Image
-              style={styles.icon}
-              source={{
-                uri: `data:image/png;base64,${app.packageInfo.appIcon}`,
-              }}
-            />
-          ) : (
-            <Text style={styles.listItem}>Not specified</Text>
-          )}
-          <Text style={styles.listItemTitle}>Installer store:</Text>
-          <Text style={styles.listItem}>
-            {app.packageInfo.installerStore ?? 'Not specified'}
-          </Text>
-          <Text style={styles.listItemTitle}>Detection reason:</Text>
-          <Text style={styles.listItem}>{app.reason}</Text>
-          <Text style={styles.listItemTitle}>Granted permissions:</Text>
-          <Text style={styles.listItem}>
-            {app.permissions?.join(', ') ?? 'Not specified'}
-          </Text>
-          <HStack style={styles.buttonGroup}>
-            <Button
-              title={'Add to whitelist'}
-              onPress={() => whitelistApp(app.packageInfo.packageName)}
-            />
-            <Button title={'Uninstall'} onPress={appUninstall} />
-          </HStack>
-        </>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  item: {
-    backgroundColor: '#d4e4ff',
-    borderRadius: 20,
-    padding: 20,
-    marginVertical: 8,
-  },
-  listItemTitle: {
-    fontSize: 20,
-    fontWeight: 'bold',
-  },
-  listItem: {
-    fontSize: 16,
-    paddingBottom: 5,
-  },
-  titleText: {
-    fontSize: 20,
-  },
-  icon: {
-    marginTop: 5,
-    marginBottom: 5,
-    width: 50,
-    height: 50,
-  },
-  iconSmall: {
-    width: 40,
-    height: 40,
-  },
-  textView: {
-    justifyContent: 'center',
-    flex: 1,
-    marginLeft: 20,
-    marginRight: 30,
-  },
-  buttonView: {
-    justifyContent: 'center',
-  },
-  spacer: {
-    height: 15,
-  },
-  buttonGroup: {
-    marginTop: 10,
-    justifyContent: 'space-between',
-  },
-  expandArrow: {
-    tintColor: Colors.grey,
-    width: 30,
-    height: 30,
-  },
-});

package/example/src/MalwareModal.tsx

@@ -1,116 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Alert,
-  FlatList,
-  Modal,
-  Pressable,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View,
-  Button,
-} from 'react-native';
-import type { SuspiciousAppInfo } from 'freerasp-react-native';
-import { MalwareItem } from './MalwareItem';
-
-export const MalwareModal: React.FC<{
-  isDisabled: boolean;
-  suspiciousApps: SuspiciousAppInfo[];
-}> = ({ isDisabled, suspiciousApps }) => {
-  const [modalVisible, setModalVisible] = useState(false);
-
-  return (
-    <>
-      {!isDisabled && (
-        <>
-          <View style={styles.viewFlex} />
-          <Button
-            title={'Details'}
-            color="#cf000a"
-            disabled={isDisabled}
-            onPress={() => setModalVisible(true)}
-          />
-          <View style={styles.viewWithMargin} />
-        </>
-      )}
-
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={modalVisible}
-        style={styles.modal}
-        onRequestClose={() => {
-          Alert.alert('Modal has been closed.');
-          setModalVisible(false);
-        }}>
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <SafeAreaView style={styles.container}>
-              <Text style={styles.title}>Detected malware:</Text>
-              <FlatList
-                data={suspiciousApps}
-                renderItem={({ item }) => <MalwareItem app={item} />}
-                keyExtractor={(_, index) => index.toString()}
-              />
-            </SafeAreaView>
-            <Pressable
-              style={[styles.button, styles.buttonClose]}
-              onPress={() => setModalVisible(false)}>
-              <Text style={styles.textStyle}>Close</Text>
-            </Pressable>
-          </View>
-        </View>
-      </Modal>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  modalView: {
-    margin: 10,
-    backgroundColor: 'white',
-    borderRadius: 20,
-    padding: 15,
-    alignItems: 'center',
-    elevation: 5,
-    flex: 1,
-    width: '98%',
-  },
-  button: {
-    borderRadius: 20,
-    paddingHorizontal: 30,
-    paddingVertical: 10,
-    marginTop: 15,
-  },
-  buttonClose: {
-    backgroundColor: '#2196F3',
-  },
-  textStyle: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  container: {
-    flex: 1,
-    width: '100%',
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  viewFlex: {
-    flex: 1,
-  },
-  viewWithMargin: {
-    margin: 5,
-  },
-  modal: {
-    flex: 1,
-  },
-});

package/example/src/checks.ts

@@ -1,28 +0,0 @@
-export const commonChecks = [
-  { name: 'App Integrity', status: 'ok' },
-  { name: 'Privileged Access', status: 'ok' },
-  { name: 'Debug', status: 'ok' },
-  { name: 'Hooks', status: 'ok' },
-  { name: 'Passcode', status: 'ok' },
-  { name: 'Simulator', status: 'ok' },
-  { name: 'Secure Hardware Not Available', status: 'ok' },
-  { name: 'System VPN', status: 'ok' },
-  { name: 'Device Binding', status: 'ok' },
-  { name: 'Unofficial Store', status: 'ok' },
-  { name: 'Screenshot', status: 'ok' },
-  { name: 'Screen Recording', status: 'ok' },
-  { name: 'Time Spoofing', status: 'ok' },
-];
-
-export const iosChecks = [{ name: 'Device ID', status: 'ok' }];
-
-export const androidChecks = [
-  { name: 'Obfuscation Issues', status: 'ok' },
-  { name: 'Developer Mode', status: 'ok' },
-  { name: 'Malware', status: 'ok' },
-  { name: 'ADB Enabled', status: 'ok' },
-  { name: 'Multi Instance', status: 'ok' },
-  { name: 'Location Spoofing', status: 'ok' },
-  { name: 'Unsecure Wifi', status: 'ok' },
-  { name: 'Automation', status: 'ok' },
-];

package/example/src/styles.ts

@@ -1,10 +0,0 @@
-export const Colors = {
-  background: 'rgba(26, 31, 45, 255)',
-  checkOkLight: 'rgba(173, 247, 187, 1)',
-  checkNokLight: 'rgba(247, 173, 173, 1)',
-  checkOkDark: 'green',
-  checkNokDark: 'rgb(200, 0, 0)',
-  grey: 'rgb(120, 120, 120)',
-  progressLight: 'rgba(173, 216, 230, 1)', // light blue
-  progressDark: 'rgb(30, 144, 255)', // dodger blue
-};