Module 11 — Security & Storage

🎯 Mục tiêu học tập

• Hiểu tại sao AsyncStorage không an toàn cho sensitive data và biết cách dùng Keychain/Keystore
• So sánh và lựa chọn đúng giữa MMKV, AsyncStorage, SQLite, WatermelonDB
• Implement offline-first patterns với React Query persist
• Hiểu và áp dụng Certificate Pinning để chống man-in-the-middle attacks
• Nắm vững OWASP Mobile Top 10 — giải thích và phòng chống từng mục
• Implement biometric authentication, root/jailbreak detection
• Áp dụng encryption cho data at rest và data in transit
• Cấu hình ProGuard/R8 obfuscation cho production builds

📖 Hướng dẫn học

🧭 Vòng lặp học module này

📚 Lý thuyết chi tiết

1. Secure Token Storage: Keychain/Keystore vs AsyncStorage

Cài đặt và sử dụng react-native-keychain:

import * as Keychain from 'react-native-keychain';

const saveToken = async (token: string): Promise<boolean> => {
  const result = await Keychain.setGenericPassword('auth_token', token, {
    accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
    securityLevel: Keychain.SECURITY_LEVEL.SECURE_HARDWARE,
  });
  return result !== false;
};

const getToken = async (): Promise<string | null> => {
  const credentials = await Keychain.getGenericPassword();
  if (credentials) {
    return credentials.password;
  }
  return null;
};

const removeToken = async (): Promise<void> => {
  await Keychain.resetGenericPassword();
};

Option WHEN_UNLOCKED_THIS_DEVICE_ONLY đảm bảo token chỉ accessible khi device unlocked và không được sync qua iCloud backup. SECURE_HARDWARE yêu cầu hardware-backed encryption trên Android.

2. MMKV vs AsyncStorage

Setup MMKV:

import { MMKV } from 'react-native-mmkv';

const storage = new MMKV({
  id: 'app-storage',
  encryptionKey: 'your-encryption-key',
});

storage.set('user.theme', 'dark');
storage.set('user.onboarded', true);
storage.set('cache.lastFetch', Date.now());

const theme = storage.getString('user.theme');
const onboarded = storage.getBoolean('user.onboarded');

storage.delete('cache.lastFetch');

const allKeys = storage.getAllKeys();

Tích hợp MMKV với Zustand persist:

import { create } from 'zustand';
import { persist, createJSONStorage, StateStorage } from 'zustand/middleware';
import { MMKV } from 'react-native-mmkv';

const mmkv = new MMKV({ id: 'zustand-storage' });

const zustandStorage: StateStorage = {
  setItem: (name: string, value: string) => {
    mmkv.set(name, value);
  },
  getItem: (name: string) => {
    return mmkv.getString(name) ?? null;
  },
  removeItem: (name: string) => {
    mmkv.delete(name);
  },
};

interface SettingsState {
  theme: 'light' | 'dark';
  language: string;
  setTheme: (theme: 'light' | 'dark') => void;
  setLanguage: (lang: string) => void;
}

const useSettingsStore = create<SettingsState>()(
  persist(
    (set) => ({
      theme: 'light',
      language: 'vi',
      setTheme: (theme) => set({ theme }),
      setLanguage: (language) => set({ language }),
    }),
    {
      name: 'settings',
      storage: createJSONStorage(() => zustandStorage),
    }
  )
);

3. Offline-first Patterns

React Query Persist với MMKV

import { QueryClient } from '@tanstack/react-query';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
import { MMKV } from 'react-native-mmkv';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24,
      staleTime: 1000 * 60 * 5,
    },
  },
});

const mmkv = new MMKV({ id: 'query-cache' });

const persister = createSyncStoragePersister({
  storage: {
    getItem: (key: string) => mmkv.getString(key) ?? null,
    setItem: (key: string, value: string) => mmkv.set(key, value),
    removeItem: (key: string) => mmkv.delete(key),
  },
});

function App() {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister, maxAge: 1000 * 60 * 60 * 24 }}
    >
      <MainApp />
    </PersistQueryClientProvider>
  );
}

Offline Mutations Queue

import { useMutation, useQueryClient, onlineManager } from '@tanstack/react-query';
import NetInfo from '@react-native-community/netinfo';

onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected);
  });
});

const useCreatePost = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (newPost: CreatePostInput) => api.createPost(newPost),
    onMutate: async (newPost) => {
      await queryClient.cancelQueries({ queryKey: ['posts'] });
      const previousPosts = queryClient.getQueryData<Post[]>(['posts']);
      queryClient.setQueryData<Post[]>(['posts'], (old) => [
        ...(old ?? []),
        { ...newPost, id: `temp-${Date.now()}`, pending: true },
      ]);
      return { previousPosts };
    },
    onError: (_err, _newPost, context) => {
      queryClient.setQueryData(['posts'], context?.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    },
  });
};

Pattern trên sử dụng optimistic update: UI cập nhật ngay lập tức, nếu mutation fail thì rollback. Kết hợp với onlineManager, mutations sẽ được queue khi offline và tự retry khi online.

Local Database Options

4. Certificate Pinning

Implement certificate pinning với react-native-ssl-pinning:

import { fetch as sslFetch } from 'react-native-ssl-pinning';

const fetchWithPinning = async (url: string) => {
  const response = await sslFetch(url, {
    method: 'GET',
    timeoutInterval: 10000,
    sslPinning: {
      certs: ['server_cert'],
    },
    headers: {
      'Content-Type': 'application/json',
    },
  });
  return response.json();
};

Cách khác: dùng TrustKit (iOS) hoặc cấu hình network_security_config.xml (Android):

<network-security-config>
  <domain-config>
    <domain includeSubdomains="true">api.yourapp.com</domain>
    <pin-set expiration="2025-12-31">
      <pin digest="SHA-256">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=</pin>
      <pin digest="SHA-256">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB=</pin>
    </pin-set>
  </domain-config>
</network-security-config>

5. Biometric Authentication

import ReactNativeBiometrics, { BiometryTypes } from 'react-native-biometrics';

const biometrics = new ReactNativeBiometrics();

const checkBiometricAvailability = async () => {
  const { available, biometryType } = await biometrics.isSensorAvailable();

  if (!available) {
    return { supported: false, type: null };
  }

  return {
    supported: true,
    type: biometryType,
    isFaceID: biometryType === BiometryTypes.FaceID,
    isFingerprint: biometryType === BiometryTypes.Biometrics,
  };
};

const authenticateWithBiometrics = async (): Promise<boolean> => {
  const { success } = await biometrics.simplePrompt({
    promptMessage: 'Xác nhận danh tính',
    cancelButtonText: 'Hủy',
  });
  return success;
};

const createBiometricKey = async () => {
  const { publicKey } = await biometrics.createKeys();
  await sendPublicKeyToServer(publicKey);
};

const signWithBiometrics = async (payload: string) => {
  const { signature } = await biometrics.createSignature({
    promptMessage: 'Xác nhận giao dịch',
    payload,
  });
  return signature;
};

createKeys() tạo RSA key pair trong Secure Enclave (iOS) / Keystore (Android). Private key không bao giờ rời khỏi device. createSignature() ký data bằng private key sau khi user xác thực biometrics — server verify bằng public key.

6. Root/Jailbreak Detection

import JailMonkey from 'jail-monkey';

const performSecurityChecks = () => {
  const isRooted = JailMonkey.isJailBroken();
  const canMockLocation = JailMonkey.canMockLocation();
  const isDebugMode = JailMonkey.isDebuggedMode();
  const isOnExternalStorage = JailMonkey.isOnExternalStorage();

  const threats: string[] = [];

  if (isRooted) threats.push('ROOTED_DEVICE');
  if (canMockLocation) threats.push('MOCK_LOCATION');
  if (isDebugMode) threats.push('DEBUG_MODE');
  if (isOnExternalStorage) threats.push('EXTERNAL_STORAGE');

  return {
    isSecure: threats.length === 0,
    threats,
  };
};

const enforceSecurityPolicy = (threats: string[]) => {
  if (threats.includes('ROOTED_DEVICE')) {
    return 'block';
  }
  if (threats.includes('DEBUG_MODE')) {
    return 'warn';
  }
  return 'allow';
};

7. OWASP Mobile Top 10

8. Encryption

Data at Rest

import { MMKV } from 'react-native-mmkv';

const encryptedStorage = new MMKV({
  id: 'encrypted-store',
  encryptionKey: 'your-256-bit-key-here',
});

encryptedStorage.set('sensitiveData', JSON.stringify({
  cardLastFour: '4242',
  expiryMonth: 12,
}));

Data in Transit

Block cleartext traffic trên Android:

<network-security-config>
  <base-config cleartextTrafficPermitted="false">
    <trust-anchors>
      <certificates src="system" />
    </trust-anchors>
  </base-config>
</network-security-config>

9. Environment Variables

import Config from 'react-native-config';

const API_BASE_URL = Config.API_BASE_URL;
const ANALYTICS_KEY = Config.ANALYTICS_KEY;
const ENVIRONMENT = Config.ENVIRONMENT;

File .env:

API_BASE_URL=https://api.yourapp.com
ANALYTICS_KEY=UA-XXXXXXXXX
ENVIRONMENT=production

10. Screen Capture Prevention

Ngăn screenshot/screen recording cho sensitive screens (banking, passwords):

import { Platform } from 'react-native';
import { useEffect } from 'react';
import { useFocusEffect } from '@react-navigation/native';
import ScreenCapture from 'react-native-screen-capture';

const usePreventScreenCapture = () => {
  useFocusEffect(
    useCallback(() => {
      ScreenCapture.enableSecureView();
      return () => {
        ScreenCapture.disableSecureView();
      };
    }, [])
  );
};

Trên Android, cơ chế này set FLAG_SECURE trên Window. Trên iOS, overlay hidden text field để trigger DRM protection. Expo users có thể dùng expo-screen-capture.

11. ProGuard/R8 Obfuscation

Enable trong android/app/build.gradle:

android {
    buildTypes {
        release {
            minifyEnabled true
            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

ProGuard rules cho React Native (proguard-rules.pro):

-keep class com.facebook.react.** { *; }
-keep class com.facebook.hermes.** { *; }
-keep class com.facebook.jni.** { *; }

-dontwarn com.facebook.react.**

-keepclassmembers class * {
    @com.facebook.react.uimanager.annotations.ReactProp *;
}

-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters

-keep @com.facebook.proguard.annotations.DoNotStrip class *
-keepclassmembers class * {
    @com.facebook.proguard.annotations.DoNotStrip *;
}

❓ Câu hỏi phỏng vấn + Đáp án

🛠️ Debug playbook: security/storage bug

🏋️ Bài tập thực hành

import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
import * as Keychain from 'react-native-keychain';

let isRefreshing = false;
let failedQueue: Array<{
  resolve: (token: string) => void;
  reject: (error: Error) => void;
}> = [];

const processQueue = (error: Error | null, token: string | null) => {
  failedQueue.forEach((promise) => {
    if (error) {
      promise.reject(error);
    } else {
      promise.resolve(token!);
    }
  });
  failedQueue = [];
};

const apiClient = axios.create({
  baseURL: 'https://api.yourapp.com',
});

apiClient.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
  const credentials = await Keychain.getGenericPassword({ service: 'accessToken' });
  if (credentials) {
    config.headers.Authorization = `Bearer ${credentials.password}`;
  }
  return config;
});

apiClient.interceptors.response.use(
  (response) => response,
  async (error: AxiosError) => {
    const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };

    if (error.response?.status !== 401 || originalRequest._retry) {
      return Promise.reject(error);
    }

    if (isRefreshing) {
      return new Promise<string>((resolve, reject) => {
        failedQueue.push({ resolve, reject });
      }).then((token) => {
        originalRequest.headers.Authorization = `Bearer ${token}`;
        return apiClient(originalRequest);
      });
    }

    originalRequest._retry = true;
    isRefreshing = true;

    const refreshCreds = await Keychain.getGenericPassword({ service: 'refreshToken' });
    if (!refreshCreds) {
      processQueue(new Error('No refresh token'), null);
      isRefreshing = false;
      navigateToLogin();
      return Promise.reject(error);
    }

    const response = await axios.post('https://api.yourapp.com/auth/refresh', {
      refreshToken: refreshCreds.password,
    });

    const { accessToken, refreshToken } = response.data;
    await Keychain.setGenericPassword('token', accessToken, { service: 'accessToken' });
    await Keychain.setGenericPassword('token', refreshToken, { service: 'refreshToken' });

    processQueue(null, accessToken);
    isRefreshing = false;

    originalRequest.headers.Authorization = `Bearer ${accessToken}`;
    return apiClient(originalRequest);
  }
);

🧩 Mini exercise bảo mật thực tế

⚠️ Lỗi thường gặp

🏢 Case đi làm thật

🧠 Ghi nhớ nhanh

❔ Câu hỏi tự kiểm tra

✅ Checklist tự đánh giá

📎 Tài nguyên