Monaca Docs
Search
⌃K
Comment on page

Monaca HTML5 Resource Encryption

This plugin provides the encryption function for HTML5 assets bundled up with the built app in Monaca and the decoding function for application execution time.
In order to use this plugin, you are required to subscribe to a valid plan. Please refer to Monaca Subscription Plans .
This plugin is not available for custom build debuggers. If you want to check the operation, you need to debug build the app.
When using this plugin, the following options in config.xml are not available for Android. <preference name="AndroidInsecureFileModeEnabled" value="true" />

Supported Platforms

  • Cordova 7.1 or higher
  • iOS 9 or later
    • For WKWebView version (5.0.5 or later): iOS 11 or later
    • CustomScheme supporting version（6.1.0 or later）: iOS 11 or later
  • Android 4.1 or later
If you are using WKWebView, Xcode 11 or later, you need to use version 5.0.5 or later.

Encryption Scheme

  • Encryption Method: AES
  • Key Length: 256 bits

Adding the Plugin in Monaca Cloud IDE

  1. 1.
    From Monaca Cloud IDE menu, go to Configure → Cordova Plugin Settings .
  2. 2.
    Under Available Plugins section, hover over the Encrypt plugin and click Enable button.
3. Find the newly added plugin under the Enabled Plugins section. Then, hover the plugin and click Configure button.
4. Enter parameter(s) for this plugin. Then, click button. Available parameters are as follows:
Parameter
Type
Description
SECRET
String
[Required] Password/secret for the encryption.
TARGETS
String
[Optional] Target folder of the project files to be encrypted.
​
  • www folder (default) 。
  • To set multiple folders, separate them with , (comma). Example: TARGETS＝www/data,www/js
  • To exclude folders from encryption, add a ! (exclamation point). (5.1.0 or later) Example: TARGETS＝www/data,!www/js
AUTO_DECRYPT
Boolean
[Optional] Auto decryption options:
​
  • 1: (default) for enabling auto decryption
  • 0: for disabling auto decryption

Manual Decryption

You can also manually decrypt the configured target folder. The target folder is encrypted and can't be read until the monaca.Encrypt.setDecryptHash() function is executed. In other words, it can not be read with the script tag in index.html file.
Please follow the steps below on how to use manual decryption:

Step 1: Enabling the Manual Decryption Option

In order to enable manual decryption, please set AUTO_DECRYPT to 0 in the plugin configuration (Step 4 in the previous section).

Step 2: Getting the Hash Code for Decryption

A hash code is required when calling monaca.Encrypt.setDecryptHash() function to decrypt the target folder(s). The hash code can be found in the build log as follows:
  1. 1.
    Build your project (either iOS or Android).
  2. 2.
    Once the build is successfully completed, click on here (as shown in the screenshot below) button to see the build log.
3. Copy the build log and paste it in any text editor and find the hash code which looks like this:
...
Hash : [4c716d***************************************************ae9f720d]
...

Step 3: Calling the Decryption Function

Once you have the hash code, you can start using the decryption function. The function needs to be called inside the deviceready event. For example:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
monaca.Encrypt.setDecryptHash(
function() {alert('SUCESS');},
function() {alert('FAIL');},
"4c716d***************************************************ae9f720d"); // Hash code for decryption
}
In the above example, the hash code is embedded directly in the function. For security concern, you can also hide it by loading the value from the server and use it under a parameter.

CustomScheme configuration (Cordova 10 or later + this plugin 6.1.0 or later, iOS only)

In iOS, we can set the scheme and hostname for this plugin. (Same as In-App Updater plugin)
The default scheme and hostname of Cordova 10 are as follows.
<preference name="scheme" value="monaca-app"/>
<preference name="hostname" value="localhost"/>
Please remove this default setting. If you specify this, you will get a build error.
You can then set the scheme and hostname in config.xml as follows.
<preference name="monaca:scheme" value="monacax-app"/>
<preference name="monaca:hostname" value="monacax.io"/>
In this example, the scheme is "monacax-app" and the hostname is "monacax.io". The characters that can be used in the scheme are as shown in RFC 2396 Appendix A​
scheme = alpha *( alpha | digit | "+" | "-" | "." )
Also, if you omit monaca:scheme and moanca:hostname, they become monaca-plugin and monaca.plugin respectively.

App Store Submission

In this plugin, we use the encryption library of iOS SDK. Therefore, in order to release the built app embedded this plugin to the AppStore, you need to set 2 options when you submit your app for a review. Under the Export Compliance section, please choose "Yes" for both questions as shown in the screenshot below:
See Also:

Release Note

Version
Changes
6.2.3
Automatic lowercase recognition of uppercase schemes and host names
6.2.2
Fixed a bug when retrieving json files from external sites
6.2.0
Support cordova-android 10 series or later (cordova-android 9 series is no longer supported)
6.1.0
Support CustomScheme
6.0.0
Support Cordova10 (Cordova9 series is no longer supported)
Previous
Monaca Power Plugins
Next
Monaca In-App Updater
Last modified 1yr ago