如何保护角度代码免遭盗窃和逆向工程

最新推荐文章于 2024-06-17 09:34:50 发布

dfsgwe1231

最新推荐文章于 2024-06-17 09:34:50 发布

阅读量284

点赞数

文章标签： webpack json javascript ViewUI

Angular是最受欢迎的JavaScript框架之一。自2016年Angular 2发布以来，Google 在短短两年内就发布了5个新的主要版本 。

这种基于TypeScript的框架使得可以轻松地为Web和移动开发前端应用程序。

随着发布了这么多新的Angular应用， 我们希望确保每个开发人员都能通过最灵活的混淆和保护形式轻松地保护自己的代码 。

本教程将说明如何在短短几分钟内将Jscrambler无缝集成到Angular的构建过程中。如果您不熟悉Angular，请务必阅读官方的quickstart 。

先决条件

将Jscrambler正确集成到Angular构建过程中只需要两件事： 创建Angular应用程序和配置Jscrambler 。我们将在下面突出显示两者。

如何创建一个Angular应用

就本教程而言，我们将使用Angular 7.0样板应用程序。如果您要保护使用Angular 5或更早版本构建的应用程序，请参阅我们的文档。我们也有一个专门针对AngularJS的教程。

首先，我们需要使用npm安装Angular CLI：

npm install -g @angular/cli

Angular CLI将下载并安装最新Angular版本的所有必需依赖关系-在本例中为版本7。

现在，我们准备创建样板应用程序，并将其用作本教程的基础。首先在安装后使用ng命令创建此新应用：

ng new angular-boilerplate

在安装过程中，系统将提示您确定是否要添加Angular路由，并且还可以选择样式表格式。选择最适合您的选项，然后等待安装完成。在本教程中，我们使用了默认选项。

然后，我们可以为这个新创建的样板应用提供服务：

cd angular-boilerplate
ng serve

这就是我们拥有功能正常的Angular应用程序所需要的。通过在浏览器中运行应用程序，检查是否一切就绪。默认情况下，它将在http://localhost:4200/ 。

如果您需要更多有关入门的信息，请参阅官方文档。您也可以运行ng help来检查所有可用命令。

Angular应用程序的基础项目结构如下：

angular-boilerplate/
|-- angular.json
|-- package-lock.json
|-- package.json
|-- tsconfig.json
|-- tslint.json
|-- dist/
| |-- angular-boilerplate/
|-- e2e/
| |-- src/
|-- node_modules/
|-- src/
| |-- app/
| |-- assets/
| |-- environments/

angular.json包含工作空间中所有项目的所有CLI配置。 CLI定义了CLI使用的构建，服务和测试工具的选项。
package.json包含与npm相关的所有配置，例如依赖项，版本和脚本。
src目录包含应用程序的所有源代码。然后将源构建并打包到dist目录中。在此之后，将在构建后放置我们受保护的HTML和JavaScript文件。

如何配置Jscrambler

Jscrambler的所有配置都将驻留在一个文件中： .jscramblerrc 。因此，我们将需要创建此文件以指定我们要使用的转换。

实现这一目标的最快方法是通过Jscrambler Web App 。在那里，创建一个新的应用程序。现在，在“ 应用程序模式”选项卡中，选择“语言规范”和应用程序类型。接下来，选择所需的转换（选中“ 模板”和“ 微调”选项卡）。在本教程中，我们将选择混淆模板。如果您需要这些步骤的帮助，请参阅我们的指南。

现在，我们只需下载具有所有此配置的JSON文件，该文件仅用于快速获取所需的设置。

现在，让我们在Angular项目的根文件夹中创建一个名为.jscramblerrc的新文件。打开我们刚刚下载的jscrambler.json文件，并将其所有内容复制到.jscramblerrc文件。之后，我们只需要向.jscramblerrc添加两个新部分，分别为filesSrc和filesDest （请参见下文）。最终的.jscramblerrc文件应如下所示：

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "filesSrc": [
   "./dist/**/*.html",
   "./dist/**/*.js"
 ],
 "filesDest": "./",
 "params": [
   {
     "name": "whitespaceRemoval"
   },
   {
     "name": "identifiersRenaming",
     "options": {
       "mode": "SAFEST"
     }
   },
   {
     "name": "dotToBracketNotation"
   },
   {
     "name": "deadCodeInjection"
   },
   {
     "name": "stringConcealing"
   },
   {
     "name": "functionReordering"
   },
   {
     "options": {
       "freq": 1,
       "features": [
         "opaqueFunctions"
       ]
     },
     "name": "functionOutlining"
   },
   {
     "name": "propertyKeysObfuscation"
   },
   {
     "name": "regexObfuscation"
   },
   {
     "name": "booleanToAnything"
   }
 ],
 "areSubscribersOrdered": false,
 "applicationTypes": {
   "webBrowserApp": true,
   "desktopApp": false,
   "serverApp": false,
   "hybridMobileApp": false,
   "javascriptNativeApp": false,
   "html5GameApp": false
 },
 "languageSpecifications": {
   "es5": true,
   "es6": false,
   "es7": false
 },
 "useRecommendedOrder": true,
 "jscramblerVersion": "5.<X>"
}

由于我们是直接通过Jscrambler Web App获得此信息的，因此我们的accessKey ， secretKey和applicationId字段已经填写。如果您希望手动检索它们，请参阅我们的指南。

重要的是要注意， params部分指定了将用于保护Angular应用程序的转换。 您可以通过在Web App中选择它们或手动设置它们来手动选择它们。您可以在此处找到有关所有可用转换的文档。

您也可以更改filesSrc以匹配您需要/想要保护的文件。对于我们的示例以及所有Angular应用程序，我们建议保护所有.html和.js文件。当然，对项目有更好的了解后，您可以确定什么是关键和必要的保护。

通过使用filesDest: './' ，我们发送来保护的文件将被其受保护的版本覆盖。

在构建过程中集成Jscrambler

有两种将Jscrambler集成到Angular构建过程中的主要方法： Angular CLI和Webpack 。我们将在下面介绍。

通过Angular CLI集成Jscrambler

使用Angular CLI可能是生成构建的最常见方法。我们将使用样板应用程序来展示如何将Jscrambler集成到构建过程中。

与Jscrambler集成的第一步是安装Jscrambler API Client 。只需运行：

npm install jscrambler --save-dev

为了通过Angular CLI将Jscrambler集成到应用程序的构建过程中，我们需要在package.json的scripts部分中创建一个CLI挂钩。该部分应如下所示：

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:prod": "ng build --prod && jscrambler",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

特定的"build:prod": "ng build --prod && jscrambler"钩子将在构建过程完成后触发jscrambler命令。

为了使该命令可执行， 我们需要将 之前创建 的 .jscramblerrc 文件放置 在项目的根文件夹中 。

现在，我们准备保护代码并通过Angular CLI构建应用程序：

npm run build:prod

这将在dist/<app-name>上创建生产文件。

大功告成！现在，您的所有HTML和JavaScript文件都受到Jscrambler的保护，可以防止代码盗窃和反向工程。

通过Webpack集成Jscrambler

与ng eject上角6和上述被弃用的命令，使用的WebPack构建过程必须具有角助洗剂延伸底层构建配置。

在本教程中，我们将使用custom-webpack构建器，但是可以随意使用任何其他方法，只要您认为它更适合您的用例即可。

让我们安装构建器：

npm i -D @angular-builders/custom-webpack

这样做之后，我们现在将创建Webpack配置文件，然后将其合并到内置配置中。对于开发和生产版本，您可能希望至少具有2种不同的配置。

对于我们的生产配置，我们将仅包括Jscrambler Webpack插件，应使用以下命令安装该插件：

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

为简单起见，我们将开发webpack配置保留为空，最终的生产配置如下所示：

const JscramblerWebpack = require('jscrambler-webpack-plugin');

module.exports = {
  plugins: [
    new JscramblerWebpack({
     chunks: ['main']
    })
  ]
};

请注意，我们只保护包含所有应用程序逻辑的主块 。

要开始使用这些新的Webpack配置，我们将更新angular.json文件上的构建选项。

...
 "architect": {
   "build": {
     "builder": " @angular -builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./extra-webpack.config.js"
        },
        …
     },
     "configurations": {
       "production": {
         "customWebpackConfig": {
           "path": "./extra-webpack.config.prod.js"
         },
         …
         "vendorChunk": true,
   ...

通过将vendorChunk标志设置为true，所有供应商内容将生成到单独的捆绑文件中。这是可选的。

相应地更新用于生产的package.json构建脚本，其外观应如下所示：

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "build:prod": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

通过这些步骤，生产版本npm run build:prod将使用Jscrambler Webpack客户端来保护您的代码，并使用先前定义的.jscramblerrc 。