electron-vite：輕松保護你的 Electron 源代碼

electron-vite 是一個新型 Electron 開發建構工具，旨在為 Electron 提供更快、更精簡的開發體驗。

源代碼保護

背景

無法保護 Electron 源代碼，是很多開發者提及最多的問題之一。我們都知道 Electron 使用 javascript 來建構桌面應用程式，這使得黑客很容易對我們的應用程式進行進行解包、修改邏輯破解商業化限制、重新打包，再重新分發破解版。

解決方案

要想真正解決問題，除了把所有商業化邏輯做到服務端，我們還需要對代碼進行加強，避免解包、篡改、二次打包、二次分發。

主流方案：

1. Uglify / Obfuscator：通過對 JS 代碼進行醜化和混淆，盡可能降低其可讀性。
2. Native 加密：通過 XOR 或 AES 對建構産物進行加密，封裝到 Node Addon 中，并在運作時由 JS 解密。
3. ASAR 加密：将 Electron ASAR 檔案進行加密，并修改 Electron 源代碼，在讀取 ASAR 檔案之前對其解密後再運作。
4. V8 位元組碼： 通過 Node 标準庫裡的 

   vm

    子產品，可以從 script 對象中生成其緩存資料（參考）。該緩存資料可以了解為 v8 的位元組碼，該方案通過分發位元組碼的形式來達到源代碼保護的目的。

方案比較：

-	Obfuscator 混淆	Native 加密	ASAR 加密	V8 位元組碼
解包	容易	難	難	難
篡改	容易	容易	中等	難
可讀性	容易	容易	容易	難
二次打包	容易	容易	容易	容易
接入成本	低	難	難	中等
保護強度	低	中等	中等	高

目前，使用 v8 位元組碼的解決方案似乎是最好的解決方案。

如何實作

什麼是 V8 位元組碼

我們可以了解，V8 位元組碼是 V8 引擎在解析和編譯 JavaScript 後産物的序列化形式，它通常用于浏覽器内的性能優化。是以如果我們通過 V8 位元組碼運作代碼，不僅能夠起到代碼保護作用，還對性能有一定的提升。

具體實作

electron-vite 受 bytenode 啟發，具體實作：

• 實作一個插件

  bytecodePlugin

   來解析建構産物，并确定是否編譯為位元組碼。
• 啟動 Electron 程序将建構産物編譯成

  .jsc

   檔案，并確定生成的位元組碼可以在 Electron 的 Node 環境中運作。
• 自動生成位元組碼 Loader（加載器），讓 Electron 能正常加載位元組碼子產品。
• 支援開發者自由決定編譯哪些塊。

此外，electron-vite 還解決了一些 ​

​bytenode​

​ 無法解決的問題：

• 修複了異步箭頭函數可能導緻 Electron 應用程式崩潰的問題。

如何使用

開啟位元組碼插件保護源代碼

啟用 ​

​bytecodePlugin​

​ 插件：

`import { defineConfig, bytecodePlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [bytecodePlugin()]
  },
  preload: {
    plugins: [bytecodePlugin()]
  },
  renderer: {
    // ...
 }
})`       

是不是非常簡單呢？

自定義保護

例如，隻要保護 ​

​src/main/foo.ts​

​ ：

├──src
│  ├──main
│  │  ├──index.ts
│  │  ├──foo.ts
│  │  └──...
└──...      

可以像下面一樣修改配置檔案：

`import { defineConfig, bytecodePlugin } from 'electron-vite'

export default defineConfig({
  main: {
    plugins: [bytecodePlugin({ chunkAlias: 'foo' })],
    build: {
      rollupOptions: {
        output: {
          manualChunks(id): string | void {
            if (id.includes('foo')) {
              return 'foo'
            }
          }
        }
      }
    }
  },
  preload: {
    // ...
  },
  renderer: {
    // ...
  }
})`       

常見疑問

對代碼組織和編寫的影響？

目前發現位元組碼方案對代碼的唯一影響，是 ​

​Function.prototype.toString()​

​ 方法無法正常使用，原因是源代碼并不跟随位元組碼分發，是以取不到函數的源代碼。

對程式性能是否有影響？

對代碼執行性能沒有影響，略有提升。

對程式體積的影響？

代碼保護強度如何？

更多功能

• 預配置：針對 Electron 預先配置，不用擔心配置問題。
• 熱替換 HMR：渲染器支援子產品熱替換（HMR）。
• 熱重載：主程序和預加載腳本支援熱重載。
• IDE調試：非常容易在 IDE 中調試，例如 vscode 或 webstorm。
• 開箱即用：開箱即用支援 Typescript、Vue、React、Svelte 和 SolidJS 等