使用 Jscrambler 保护您的源代码

观看网络研讨会 "移动应用安全最佳实践"，获取一些关于 NativeScript 安全性的技巧和窍门！

今天，我们很高兴地宣布在 NativeScript 应用中支持 Jscrambler。Jscrambler 是一款高级安全工具，它可以转换应用程序中的 JavaScript 代码，使其极难进行逆向工程。

在本文中，我们将探讨为什么要使用 Jscrambler、它的工作原理以及如何在您自己的 NativeScript 应用中集成此工具。让我们首先了解一下为什么 Jscrambler 可能是适合您应用的良好选择。

为什么选择 Jscrambler？

在 NativeScript 中，您使用 JavaScript 编写应用程序逻辑。由于 JavaScript 不是编译型语言，因此您的 NativeScript 应用程序的源代码会以纯文本形式分发，作为 Android 和 iOS 应用程序包的一部分。如果您深入研究 platforms 文件夹，您会发现与 NativeScript 应用一起提供的纯文本源代码——恶意用户也可能找到这些代码。

默认情况下，您的 NativeScript 应用程序分发的纯文本代码示例。此特定代码来自 NativeScript Groceries 示例 的构建版本。

如果您来自 Web 开发背景，那么这种纯文本部署并不是一个新概念——Web 应用绝对必须以纯文本形式提供其源代码，以便浏览器解释它。但是，如果您来自原生开发背景，这则是一个新问题，因为原生应用通常只分发编译后的字节码。

如果您担心保护 NativeScript 应用的源代码，您可以选择几种方法。NativeScript 内置支持 UglifyJS，这是一种压缩 JavaScript 代码的工具。在缩小过程中，Uglify 会替换变量名并删除空格，使您的代码对于普通开发人员来说难以阅读。例如，以下是 Groceries 示例在经过 UglifyJS 处理后的代码。

经过 UglifyJS 处理后的 NativeScript Groceries 示例的源代码。

但是，UglifyJS 的唯一目的是减小代码的文件大小，而不是混淆代码以使其难以被恶意用户进行逆向工程。例如，如果我采用上面相同的缩小代码并通过在线格式化工具运行它，则该代码突然变得更容易阅读了。

使用 beautifier.io 格式化的 NativeScript Groceries 示例的缩小源代码。

如果您只是想在 NativeScript 应用部署中进行一些非常基本的代码隐藏，则 UglifyJS 缩小可能就足够了，但如果您真的想要保护您的代码，则需要一个专门用于 JavaScript 保护的工具——这就是 Jscrambler 的用武之地。

Jscrambler 的工作原理

从高层次上讲，Jscrambler 会获取您的 JavaScript 代码并将其混淆到无法识别，同时添加一系列保护层。这些包括多态混淆、代码锁和自防御功能。通过这些层，Jscrambler 远远超出了混淆的范围，生成的源代码可以防止调试和篡改尝试，同时继续按预期工作。

为了让您了解它的外观，以下是在经过 Jscrambler 处理后的相同 NativeScript Groceries 示例代码。

经过 Jscrambler 处理后的 NativeScript Groceries 示例的源代码。

祝您好运，看看能否弄清楚代码在做什么。即使您将此代码通过美化器或格式化工具运行，您仍然会很难解读任何内容。以下是通过 beautifier.io 运行后的相同文件。

使用 beautifier.io 格式化的经过 Jscrambler 处理的 NativeScript Groceries 示例的源代码。

如上图所示，Jscrambler 除了混淆您的代码使其无法阅读之外，即使在经过格式化和美化工具处理后也是如此。恶意用户将很难理解代码的功能，尤其是在 Jscrambler 具有内置功能可以阻止任何逆向工程工具对其进行操作的情况下。

Jscrambler 提供了 许多可配置的转换，因此您可以微调工具转换代码的方式，但 Jscrambler 团队已为 NativeScript 开发人员提供了一系列默认设置。让我们来看看这些设置，并了解如何在您的应用中使用 Jscrambler。

使 Jscrambler 正常工作

首先要注意的是，Jscrambler 是一款高级工具，但是，他们确实为任何想要尝试 Jscrambler 的用户提供免费试用。要按照本文中的步骤操作，您需要在以下所示的 Jscrambler 注册页面 上注册其中一个试用版。

创建试用帐户并完成 Jscrambler 入门演示后，转到您的 仪表盘，然后点击右上角的大绿色“新建应用”按钮。

为应用命名，在“保护类型”下拉列表中选择“代码完整性”，然后点击绿色“创建”按钮。

现在，您需要选择要应用于源代码的 Jscrambler 转换。转换很多，因此，为了开始，让我们选择 Jscrambler 的一个保护模板。转到“模板”选项卡，然后选择“混淆”。

在此阶段，我们可以通过获取包含所有 Jscrambler 配置的 JSON 文件来简化操作。为此，请点击右上角的蓝色下载图标。

现在您已完成必要的 Jscrambler 帐户工作，让我们转到您的 NativeScript 应用，了解如何连接到 Jscrambler 服务。

安装 Jscrambler 插件

Jscrambler 的 NativeScript 集成是通过 webpack 插件完成的。因此，如果您尚未安装，请在您的应用中安装 NativeScript webpack 插件。如果一切顺利，安装应该像运行以下两个命令一样简单。

npm install --save-dev nativescript-dev-webpack

然后

npm install

注意：如果您在 NativeScript 应用中设置 webpack 时遇到问题，NativeScript 社区论坛 是一个寻求帮助的好地方。

安装 webpack 后，接下来需要安装 Jscrambler webpack 插件。

npm i --save-dev jscrambler-webpack-plugin

之后，复制之前下载的 jscrambler.json 文件，并将其粘贴到应用的根目录中。该文件应如下所示

{
  "keys": {
    "accessKey": "YOUR ACCESS KEY HERE",
    "secretKey": "YOUR SECRET KEY HERE"
  },
  "applicationId": "YOUR APPLICATION ID HERE",
  "params": [
    {
      "name": "objectPropertiesSparsing"
    },
    {
      "name": "variableMasking"
    },
    {
      "name": "whitespaceRemoval"
    },
    {
      "name": "identifiersRenaming",
      "options": {
        "mode": "SAFEST"
      }
    },
    {
      "name": "dotToBracketNotation"
    },
    {
      "name": "stringConcealing"
    },
    {
      "name": "functionReordering"
    },
    {
      "options": {
        "freq": 1,
        "features": [
          "opaqueFunctions"
        ]
      },
      "name": "functionOutlining"
    },
    {
      "name": "propertyKeysObfuscation",
      "options": {
        "encoding": [
          "hexadecimal"
        ]
      }
    },
    {
      "name": "regexObfuscation"
    },
    {
      "name": "booleanToAnything"
    }
  ],
  "areSubscribersOrdered": false,
  "applicationTypes": {
    "webBrowserApp": false,
    "desktopApp": false,
    "serverApp": false,
    "hybridMobileApp": false,
    "javascriptNativeApp": false,
    "html5GameApp": false
  },
  "useRecommendedOrder": true,
  "jscramblerVersion": "<VERSION>",
  "tolerateMinification": true,
  "useProfilingData": false
}

注意：此文件包含在 NativeScript 应用中使用 Jscrambler 的推荐设置示例。请随时查看 Jscrambler 文档以 了解每个设置的更多详细信息。

您在上面看到的占位符值——YOUR ACCESS KEY HERE、YOUR SECRET KEY HERE、YOUR APPLICATION ID HERE 和 VERSION——如果您从 Jscrambler Web 应用下载了 JSON 文件，则已填写。如果您希望手动检索它们，请查看 此 Jscrambler 指南。

配置就位后，您最后一步是在 webpack 配置中添加 Jscrambler 的 webpack 插件。为此，请打开应用根目录中的 webpack.config.js 文件。

在此文件中，首先将这两行代码复制并粘贴到顶部，这两行代码导入插件本身并使其可用。

const JscramblerWebpack = require("jscrambler-webpack-plugin");
const jscramblerConfig = require("./jscrambler.json");

接下来，向下滚动相同的 webpack.config.js 文件，直到找到 Plugins 数组。要激活 Jscrambler 插件，您需要将以下条目添加到该数组中。

new JscramblerWebpack(Object.assign({}, jscramblerConfig, {
    chunks: ["bundle"]
})),

这样，您就可以在应用中测试 Jscramber 了。

保护您的代码

要通过 Jscrambler 运行您的应用，您只需运行 启用 webpack 的构建 NativeScript 应用的其中一个 npm 脚本。最容易使用的是下面显示的脚本，它们使用 webpack 构建您的应用并在 iOS 或 Android 设备上启动它们。

tns build ios --bundle 

或

tns build android --bundle 

构建过程完成后，您需要查看 platforms 文件夹以查看保护结果，具体在 platforms/<android|ios>/app/build/outputs/apk/debug 中。打开这些文件夹的 bundle.js 文件，您应该会找到如下所示的严重混淆的代码。

恶意用户现在将非常难以弄清楚此代码的功能，并且您的应用应该继续按预期工作。

此外，在我们的测试中，我们没有发现使用 Jscrambler 保护 NativeScript 应用程序代码会产生任何有意义的性能下降。您的体验可能会有所不同，因此请注意 Jscrambler 的性能导向功能，例如 性能分析 和 代码注释。

还要记住，在本教程中，我们只选择了混淆模板。如果您有兴趣获得更高的保护，即反调试和反篡改功能，请尝试其他模板，例如自防御。

总结

Jscrambler 是一款功能强大的工具，可以保护您的 JavaScript 代码免受恶意用户的侵害。Jscrambler webpack 插件很好地融入了 NativeScript webpack 工作流程，使其成为希望保护其源代码的 NativeScript 开发人员的便捷选择。

因此，请在您自己的应用中尝试按照本文的步骤操作，并查看结果。我们建议您尝试使用 Jscrambler，并告诉我们您的想法！