javascript-obfuscator / javascript-obfuscator/react-native-obfuscating-transformer
Code not being encrypted
- Ngôn ngữ chính
- TypeScript
- Star
- 211
- Fork
- 102
- Chỉ số merge pull request
- Không có pull request nào được merge trong 30 ngày
Mô tả
I have spent a good while playing around with multiple options and examples and can't seem to get it to work. My setup is the following:
```
"metro-react-native-babel-preset": "0.56.0",
"metro-react-native-babel-transformer": "^0.59.0",
"react-native-obfuscating-transformer": "^1.0.0",
"react-native": "^0.61.0",
```
**metro.config.js**
```javascript
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* @format
*/
module.exports = {
transformer: {
babelTransformerPath: require.resolve("./transformer"),
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
```
**transformer.js**
```javascript
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
})
```
The command I am using to build the output js bundle for testing is the following:
```npx react-native bundle --entry-file=index.js --bundle-output='./bundle.js' --dev=false --platform='ios' --assets-dest='./ios' --reset-cache```
I can see the output from stdout of the transformer logging which files are being obfuscated, however when I look at the entire bundle and even the sub obfuscated files, the variable names and function calls are not encrypted.
Below is an example of a before and after obfuscation:
**Before (screens.js)**:
```javascript
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import firebase from 'react-native-firebase';
const crashlytics = firebase.crashlytics();
import configureStore from 'app/store';
// Initialise global store
export const store = configureStore()
export function registerScreens() {
crashlytics.enableCrashlyticsCollection();
crashlytics.log('[utils][screens] - Registering screens...');
// Register screens with redux stores
Navigation.registerComponentWithRedux('Initialising', () => require('screens/Initialising').default, Provider, store);
Navigation.registerComponentWithRedux('Auth', () => require('screens/Auth').default, Provider, store);
Navigation.registerComponentWithRedux('VerifyPhoneNumber', () => require('screens/VerifyPhoneNumber').default, Provider, store);
Navigation.registerComponentWithRedux('SignIn', () => require('screens/SignIn').default, Provider, store);
// Profile Stack
Navigation.registerComponentWithRedux('Profile', () => require('screens/Profile').default, Provider, store);
Navigation.registerComponentWithRedux('QRScanner', () => require('screens/Profile/QRScanner').default, Provider, store);
// Register Stack
Navigation.registerComponentWithRedux('InitialRegister', () => require('screens/Register/InitialRegister').default, Provider, store);
Navigation.registerComponentWithRedux('RegisterDetails', () => require('screens/Register/RegisterDetails').default, Provider, store);
// Rewards Stack
Navigation.registerComponentWithRedux('Rewards', () => require('screens/Rewards').default, Provider, store);
Navigation.registerComponentWithRedux('RewardBack', () => require('screens/Rewards/RewardBack').default, Provider, store);
Navigation.registerComponentWithRedux('RewardRedeemed', () => require('screens/Rewards/RewardRedeemed').default, Provider, store);
// Home stack
Navigation.registerComponentWithRedux('Home', () => require('screens/Home').default, Provider, store);
// Marketplace stack
Navigation.registerComponentWithRedux('MarketplaceBack', () => require('screens/Rewards/MarketplaceBack').default, Provider, store);
// Bundles
Navigation.registerComponentWithRedux('PreBundle', () => require('screens/Home/PreBundle').default, Provider, store);
Navigation.registerComponentWithRedux('BundleQuestion', () => require('screens/Home/BundleQuestion').default, Provider, store);
Navigation.registerComponentWithRedux('BundleComplete', () => require('screens/Home/BundleComplete').default, Provider, store);
// Help Screens
Navigation.registerComponentWithRedux('HomeHelp', () => require('screens/Help/HomeHelp').default, Provider, store);
Navigation.registerComponentWithRedux('RewardsHelp', () => require('screens/Help/RewardsHelp').default, Provider, store);
// Modals
Navigation.registerComponentWithRedux('VersionUpdateModal', () => require('misc/Modals/VersionUpdateModal').default, Provider, store);
Navigation.registerComponentWithRedux('PolicyUpdateModal', () => require('misc/Modals/PolicyUpdateModal').default, Provider, store);
}
```
**After (screens.obfuscated.js):**
```javascript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports, "__esModule", { value: true });exports.registerScreens = registerScreens;exports.store = void 0;var _reactNativeNavigation = require("react-native-navigation");
var _reactRedux = require("react-redux");
var _reactNativeFirebase = _interopRequireDefault(require("react-native-firebase"));
var _store = _interopRequireDefault(require("../../store"));var crashlytics = _reactNativeFirebase.default.crashlytics();
// Initialise global store
var store = (0, _store.default)();exports.store = store;
function registerScreens() {
crashlytics.enableCrashlyticsCollection();
crashlytics.log('[utils][screens] - Registering screens...');
// Register screens with redux stores
_reactNativeNavigation.Navigation.registerComponentWithRedux('Initialising', function () {return require("../components/screens/Initialising").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('Auth', function () {return require("../components/screens/Auth").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('VerifyPhoneNumber', function () {return require("../components/screens/VerifyPhoneNumber").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('SignIn', function () {return require("../components/screens/SignIn").default;}, _reactRedux.Provider, store);
// Profile Stack
_reactNativeNavigation.Navigation.registerComponentWithRedux('Profile', function () {return require("../components/screens/Profile").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('QRScanner', function () {return require("../components/screens/Profile/QRScanner").default;}, _reactRedux.Provider, store);
// Register Stack
_reactNativeNavigation.Navigation.registerComponentWithRedux('InitialRegister', function () {return require("../components/screens/Register/InitialRegister").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('RegisterDetails', function () {return require("../components/screens/Register/RegisterDetails").default;}, _reactRedux.Provider, store);
// Rewards Stack
_reactNativeNavigation.Navigation.registerComponentWithRedux('Rewards', function () {return require("../components/screens/Rewards").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('RewardBack', function () {return require("../components/screens/Rewards/RewardBack").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('RewardRedeemed', function () {return require("../components/screens/Rewards/RewardRedeemed").default;}, _reactRedux.Provider, store);
// Home stack
_reactNativeNavigation.Navigation.registerComponentWithRedux('Home', function () {return require("../components/screens/Home").default;}, _reactRedux.Provider, store);
// Marketplace stack
_reactNativeNavigation.Navigation.registerComponentWithRedux('MarketplaceBack', function () {return require("../components/screens/Rewards/MarketplaceBack").default;}, _reactRedux.Provider, store);
// Bundles
_reactNativeNavigation.Navigation.registerComponentWithRedux('PreBundle', function () {return require("../components/screens/Home/PreBundle").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('BundleQuestion', function () {return require("../components/screens/Home/BundleQuestion").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('BundleComplete', function () {return require("../components/screens/Home/BundleComplete").default;}, _reactRedux.Provider, store);
// Help Screens
_reactNativeNavigation.Navigation.registerComponentWithRedux('HomeHelp', function () {return require("../components/screens/Help/HomeHelp").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('RewardsHelp', function () {return require("../components/screens/Help/RewardsHelp").default;}, _reactRedux.Provider, store);
// Modals
_reactNativeNavigation.Navigation.registerComponentWithRedux('VersionUpdateModal', function () {return require("../components/misc/Modals/VersionUpdateModal").default;}, _reactRedux.Provider, store);
_reactNativeNavigation.Navigation.registerComponentWithRedux('PolicyUpdateModal', function () {return require("../components/misc/Modals/PolicyUpdateModal").default;}, _reactRedux.Provider, store);
}
```
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Hướng nghiên cứu
Bắt đầu với metro.config.js và transformer.js, sau đó chạy lệnh npx react-native bundle được ghi trong tài liệu với các phiên bản React Native và transformer được cung cấp. So sánh các log của transformer, bundle.js được tạo ra và các tệp đã làm rối với ví dụ screens.js. Hoàn tất khi các tệp nguồn đã cấu hình tạo ra các mã định danh và lệnh gọi bị làm rối một cách rõ ràng trong bundle đầu ra.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, react-native
- Lĩnh vực
- build-system, mobile-dev
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 25/100