Comment masquer le code dans React-Native pour IOS

Question

J'ai essayé de masquer le code pendant un certain temps en utilisant react-native-obfuscating-transformer . Tout semble correct mais quand je vérifie le bundle.js. Je ne vois aucun code obscurci.

PS: Actuellement, j'essaye uniquement pour IOS.

Voici mes fichiers de configuration.

metro.config.js

module.exports = {
    transformer: {
        babelTransformerPath: require.resolve('./transformer'),
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
};

transformer.js

const obfuscatingTransformer = require('react-native-obfuscating-transformer');

module.exports = obfuscatingTransformer({
    upstreamTransformer: require('metro-react-native-babel-transformer'),
    enableInDevelopment: true,
    obfuscatorOptions: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: false,
        debugProtectionInterval: false,
        disableConsoleOutput: true,
        identifierNamesGenerator: 'hexadecimal',
        log: false,
        numbersToExpressions: true,
        renameGlobals: false,
        rotateStringArray: true,
        selfDefending: true,
        shuffleStringArray: true,
        simplify: true,
        splitStrings: true,
        splitStringsChunkLength: 10,
        stringArray: true,
        stringArrayEncoding: ['base64'],
        stringArrayWrappersCount: 2,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersType: 'variable',
        stringArrayThreshold: 0.75,
        transformObjectKeys: true,
        unicodeEscapeSequence: false,
    },
});

Answer 1

J'ai finalement compris comment le faire fonctionner après plusieurs tests.

ma version native react and react:

 "react": "16.9.0",
 "react-native": "0.61.5",

installer les autres dépendances nécessaires:

npm install babylon --save
npm install --save babel-traverse

transformer.js

const obfuscatingTransformer = require("react-native-obfuscating-transformer")
const filter = filename => { 
  return filename.startsWith("src");
};

module.exports = obfuscatingTransformer({
// this configuration is based on https://github.com/javascript-obfuscator/javascript-obfuscator
  obfuscatorOptions:{
    compact: true,
    controlFlowFlattening: false,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: false,
    disableConsoleOutput: true,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    renameGlobals: false,
    rotateStringArray: true,
    selfDefending: true,
    shuffleStringArray: true,
    splitStrings: false,
    stringArray: true,
    stringArrayEncoding: false,
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false
  },
  upstreamTransformer: require('metro-react-native-babel-transformer'),
  emitObfuscatedFiles: false,
  enableInDevelopment: true,
  filter: filter,
  trace: true
})

metro.config.js

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
    babelTransformerPath: require.resolve("./transformer")   // add here the transformer.js
  },
};

REMARQUE:

définissez emitObfuscatedFiles sur true dans obfuscatorOptions pour émettre les versions masquées des fichiers à côté de leurs originaux, à des fins de comparaison.

Si vous construisez en version, vous pouvez également comparer l' index.android.bundle généré (situé dans \ android \ app \ build \ generated \ assets \ react \ release) avec et sans utiliser le react-native-obfuscating-transformer en utilisant outil de diff en ligne pour voir la différence