Integrating Jscrambler with Flutter

Last updated: 22 Nov 2024

Framework versions tested: 3.24.5

Introduction

Flutter is an open-source framework for building multi-platform applications (mobile, desktop and browser) from a single codebase.

You can use Jscrambler to protect a Flutter web application.

For the purposes of this tutorial, we will use the create command of the Flutter CLI to bootstrap a simple Flutter application.

# check how to install flutter in https://docs.flutter.dev/get-started/install
flutter create sample_app --platforms web
cd sample_app

Integrating Jscrambler with Flutter

If you haven't tried Jscrambler out before reading this tutorial, please consider reading the Getting Started Guide, which will walk you through the steps on how to protect your application. This will make this section easier to grasp. It will also teach you how to configure Jscrambler and use a custom configuration.

To complete the integration with Jscrambler, you need a JSON configuration file with your API credentials, application ID, and protection configuration. You may create your transformations recipe using the Jscrambler Web application and download a JSON configuration file or use the following example for a quick test. This file should be named .jscramblerrc and placed on the project's root folder. If you choose to try the following example, just make sure to fill in the missing information: accessKey, secretKey, and applicationId.

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "filesSrc": [
   "./dist/*.+(mjs|js|html)"
 ],
 "filesDest": "./",
 "params": [
   {
     "name": "objectPropertiesSparsing"
   },
   {
     "name": "variableMasking"
   },
   {
     "name": "whitespaceRemoval"
   },
   {
     "name": "dotToBracketNotation"
   },
   {
     "name": "stringConcealing"
   },
   {
     "name": "functionReordering"
   },
   {
     "name": "propertyKeysObfuscation",
     "options": {
       "encoding": [
         "hexadecimal"
       ]
     }
   },
   {
     "name": "regexObfuscation"
   },
   {
     "name": "controlFlowFlattening",
     "options": {
       "features": [],
       "minimumBlockSize": 4
     }
   },
   {
     "name": "booleanToAnything"
   },
   {
     "name": "globalVariableIndirection"
   }
  ],
  "areSubscribersOrdered": false,
  "useRecommendedOrder": true,
  "jscramblerVersion": "stable",
  "tolerateMinification": true,
  "profilingDataMode": "off",
  "useAppClassification": true,
  "browsers": {}
}

Integrating Jscrambler in the Build Process

You can integrate Jscrambler into the Flutter build process with the Jscrambler CLI.

Install the Jscrambler API Client:

npm -g i jscrambler

Run the Jscrambler CLI, after the build command of the Flutter CLI:

# builds the Flutter application for the web platforms. 
# build/web is the default output folder
flutter build web

# Protect your web application
jscrambler

There you go. Jscrambler is now integrated into your build process and the protected production files will override the original ones on the build/web folder.

Known Problems

Application breaks with Identifiers Renaming

The Flutter web application, during runtime, validates the integrity of some function identifiers which are targeted by the Identifiers Renaming transformation. This behaviour causes your application to break.

Currently. there is no workaround or solution for this issue, therefore the Identifiers Renaming is not compatible with the Flutter SDK.

However, this limitation does not significantly impact the capacity to achieve source code obscurity for two key reasons:

• Identifier names produced by this compiler are unintelligible by default, reducing the necessity for obfuscation through renaming;
• If one still wishes to obfuscate identifier names, alternative methods are available. By applying a combination of transformations - Global Variable Indirection, Dot to Bracket Notation, and String Concealing - users can achieve effective obfuscation without relying on Identifiers Renaming.