繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

开发知识点-Vue-Electron_electron updater plugin

作者：繁依Fanyi0 | 2024-03-02 06:21:29

踩

electron updater plugin

在这里插入图片描述

Electron

初始化
- 精简目录
- electron-vite路径别名
全局公用样式
Element Plus布局
运行时icon 设置
使用人群
打包 win32桌面exe程序
- 安装时图标设置
electron-reload
自定义窗口
- 创建无边框窗口
Chromium 的流程模型
漏洞复现-electron RCE命令执行CVE-2018-1000006
漏洞介绍
影响范围
漏洞复现
POC 分析
- 分析环境
- 原理浅析
攻击场景和完整的利用思路：
修复建议
前端解决跨域
后端解决跨域
使用 fs
electron-store
axios
Ant Design Vue UI
未使用变量报错
清理缓存
ESLint
mounted()
IPC(Inter-Process Communication)
- 渲染进程 TO 主进程
- - ipcRenderer.send
  - ipcMain.on
- 主进程 TO 渲染进程
- - ipcRenderer.on
- 渲染进程 TO 渲染进程
- - ipcRenderer.sendTo
窗口位置
关闭窗口
websocket
Nodejs 钉钉 webhook
localStorage
参考文档

初始化

pnpm create @quick-start/electron

? Add TypeScript? » No / Yes   
是否使用TypeScript？选No，本教程使用JavaScript。如果喜欢TypeScript，请选择Yes。
? Add Electron updater plugin? » No / Yes 
是否添加Electron updater插件？选择Yes。
? Enable Electron download mirror proxy? » No / Yes
是否开启Electron镜像下载代理。在国内网络环境，强烈建议选择Yes。

  cd xxx
  pnpm install
  pnpm dev
1
2
3
4
5
6
7
8
9
10
11
12

精简目录

├─ /.vscode
├─ /build                      <-- build编译过程性输出目录
├─ /dist                       <-- 最终build的输出目录
├─ /node_modules
├─ /out                        <-- dev和build编译过程性输出目录
├─ /resources                  <-- 主进程和preload的公共资源目录
├─ /src
|  ├─ /main                    <-- 主进程开发目录
|  ├─ /preload                 <-- preload开发目录
|  ├─ /renderer                <-- 渲染进程开发目录
|  |  ├─ /api                  <-- api目录
|  |  |  └─ index.js           <-- api库
|  |  ├─ /common               <-- 全局公用目录
|  |  |  ├─ /fonts             <-- 字体文件目录
|  |  |  ├─ /images            <-- 图片文件目录
|  |  |  ├─ /js                <-- 公用js文件目录
|  |  |  └─ /styles            <-- 公用样式文件目录
|  |  |  |  ├─ frame.styl      <-- 全部公用样式（import本目录其他全部styl）
|  |  |  |  ├─ reset.styl      <-- 清零样式
|  |  |  |  └─ global.styl     <-- 全局公用样式
|  |  ├─ /components           <-- 公共模块组件目录
|  |  |  ├─ /header            <-- 头部导航模块（示例）
|  |  |  |  └─ header.vue      <-- header主文件
|  |  |  └─ ...                <-- 其他模块
|  |  ├─ /views                <-- 页面组件目录
|  |  |  ├─ /home              <-- home页目录
|  |  |  |  └─ home.vue        <-- home主文件
|  |  |  ├─ /login             <-- login页目录
|  |  |  |  └─ login.vue       <-- login主文件
|  |  |  └─ ...                <-- 其他页面
|  |  ├─ /router               <-- 路由配置目录
|  |  |  └─ index.js           <-- 路由配置文件
|  |  ├─ App.vue               <-- 项目页面入口文件
|  |  ├─ main.js               <-- 渲染进程入口文件
|  |  └─ index.html            <-- 渲染进程HTML模板
├─ .editorconfig               <-- IDE配置文件
├─ .eslintignore               <-- 忽略eslint检查的配置文件
├─ .eslintrc.cjs               <-- eslint配置文件
├─ .gitignore   
├─ .npmrc                      <-- npm镜像源配置文件
├─ .prettierignore             <-- 忽略prettier代码格式化的配置文件
├─ .prettierrc.yaml            <-- prettier代码格式化配置文件
├─ dev-app-update.yml
├─ electron-builder.yml        <-- build配置文件
├─ electron.vite.config.js     <-- electron-vite配置文件
├─ package.json
├─ README.md
└─ yarn.lock

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

src/renderer/App.vue：

<script setup></script>

<template>
    <div class="App">Electron-Vite-Vue-App</div>
</template>

<style scoped></style>
1
2
3
4
5
6
7

src/renderer/index.html：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Electron</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
    />
  </head>

  <body>
    <!-- <div id="app"></div>
    <script type="module" src="/src/main.js"></script> -->
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

electron-vite路径别名

src/renderer/App.vue，可以直接省略成@renderer/App.vue。

electron.vite.config.js


    ...（略）
    renderer: {
        resolve: {
            alias: {
-               '@renderer': resolve('src/renderer/src')
+               '@renderer': resolve('src/renderer')
            }
        },
        plugins: [vue()]
    }
    ...（略）
1
2
3
4
5
6
7
8
9
10
11
12
13
14

全局公用样式

src/renderer/common/css/common.css

Element Plus布局

cnpm install element-plus --save
按需导入element-plus组件
cnpm install unplugin-vue-components unplugin-auto-import -D

    import { createApp } from 'vue'
    // 全局样式
    import '@/common/styles/frame.styl'
+   import ElementPlus from 'element-plus'
+   import 'element-plus/dist/index.css'
    import App from './App.vue'

-   createApp(App).mount('#app')
+   const app = createApp(App)
+   app.use(ElementPlus)
+   app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11

src/renderer/App.vue来验证下Element Plus

    <script setup></script>

    <template>
        <div class="App">
            Electron-Vite-Vue-App
+           <el-button type="primary">Primary</el-button>
        </div>
    </template>

    <style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13

运行时icon 设置


"\src\main\index.js"

const path = require('path') 
const iconPath = path.join(__dirname, '../../resources/img/icon.png')



  const mainWindow = new BrowserWindow({  
    icon: iconPath,
    ...(process.platform === 'linux' ? { icon } : {}),
    
1
2
3
4
5
6
7
8
9
10
11
12

1 Electron核心概念
• 1.1 主进程
• 1.2 渲染进程
• 1.3 预加载脚本（preload.js）
2 初始化项目
• 2.1 使用create-react-app新建项目
• 2.2 精简项目
3 Webpack配置
• 3.1 配置国内镜像源
• 3.2 暴露Webpack
• 3.3 支持Sass/Scss
• 3.4 支持Less
• 3.5 支持Stylus
• 3.6 设置路径别名
• 3.7 禁止build项目生成map文件
4 项目架构搭建
• 4.1 项目目录结构设计
• 4.2 关于样式命名规范
• 4.3 设置全局公用样式
5 引入Ant Design 5.x
• 5.1 安装Ant Design
• 5.2 设置Antd为中文语言
6 渲染进程开发
• 6.1 构建Login页面
• 6.2 构建Home页面
• 6.3 实现页面路由跳转
• 6.4 在React组件中实现页面路由跳转
• 6.5 在非React组件中实现页面路由跳转
7 集成Electron
• 7.1 通过国内镜像加速安装Electron
• 7.2 配置Electron
• 7.3 启动Electron dev热更新模式
• 7.4 禁止开发环境启动时同时打开浏览器
8 主进程与渲染进程通信方法一：send与on/once
• 8.1 主进程开发
• 8.2 preload.js开发
• 8.3 入口文件配置
• 8.4 渲染进程开发
• 8.5 打开Electron的DevTools
• 8.6 运行效果
• 8.7 关于ipcRenderer.on/once
• 8.8 为什么必须在preload里定义ipcRenderer.on/once
9 主进程与渲染进程通信方法二：invoke与handle
• 9.1 主进程开发
• 9.2 入口文件配置
• 9.3 渲染进程开发
• 9.4 运行效果
10 打包Electron
• 10.1 安装electron-builder
• 10.2 配置electron-builder
• 10.3 配置build版本的主入口
• 10.4 解决elecron-build编译过程中下载慢的问题
• 10.5 build Electron应用
• 10.6 解决nsis无法下载问题
• 10.7 build后的目录结构
11 常用配置
• 11.1 设置开发环境应用icon
• 11.2 设置build版应用icon
• 11.3 设置APP窗口大小
• 11.4 取消跨域限制
• 11.5 取消菜单栏
• 11.6 设置DevTools快捷键
• 11.7 禁止同时运行多个Electron程序
12 项目源码git

使用人群

Electron 被 Slack、Visual Studio Code 和 Discord 等大型产品广泛使用
QQ 技术团队

开源IM框架源码：https://github.com/JackJiang2011/MobileIMSDK
《IM跨平台技术学习(一)：快速了解新一代跨平台桌面技术——Electron》

《IM跨平台技术学习(二)：Electron初体验(快速开始、跨进程通信、打包、踩坑等)》

《IM跨平台技术学习(三)：vivo的Electron技术栈选型、全方位实践总结》

《IM跨平台技术学习(四)：蘑菇街基于Electron开发IM客户端的技术实践》

《IM跨平台技术学习(五)：融云基于Electron的IM跨平台SDK改造实践总结》

《IM跨平台技术学习(六)：网易云信基于Electron的IM消息全文检索技术实践》

《IM跨平台技术学习(七)：得物基于Electron开发客服IM桌面端的技术实践》

《IM跨平台技术学习(八)：新QQ桌面版为何选择Electron作为跨端框架》

在这里插入图片描述

打包 win32桌面exe程序

安装时图标设置

为了不报错卸载以前的脚手架

 npm uninstall -g vue-cli
1

安装最新版脚手架

cnpm install -g @vue/cli 
1

创建一个 vue 随便起个名

 vue create electron-vue-example (随便起个名字electron-vue-example)
1

进入创建过的 vue文件

vue3
cnpm C:\Users\xxx\AppData\Roaming\npm
https://npmmirror.com/
在这里插入图片描述
C:\Users\xxxx\electron-vue-example.

cd electron-vue-example
 
cnpm install electron -g
1
2
3

在这里插入图片描述

运行 vue

npm run serve
1

在这里插入图片描述

将vue 添加 electron模块

vue add electron-builder
1

在这里插入图片描述

运行 electron 模块是否可以弹出窗口

npm run electron:serve
1

在这里插入图片描述

 // 这个错误 网上说必须科学上网才可以安装  所以我临时没有进行安装  后继没有发现有异常错误
Vue Devtools failed to install: ReferenceError: installExtension is not defined
// 全局搜索 这个 注释掉 VUEJS_DEVTOOLS  VUEJS3_DEVTOOLS
 
1
2
3
4

在这里插入图片描述

最终打包exe

npm run electron:build
1

在这里插入图片描述

报错安装一下插件

npm install -g yarn
1

在这里插入图片描述

electron-reload

Webpack 5 不提供自带的 HTTP 请求模块

https://www.w3cschool.cn/electronmanual/

cnpm install --save-dev electron-rebuild

Node.js 18.15.0
antd 5.4.0
create-react-app 5.0.1
react 18.2.0
react-router-dom 6.10.0
sass-loader 13.2.2
webpack 5.77.0
webpack-dev-server 4.13.2
concurrently 8.0.1
electron 24.0.0
electron-builder 23.6.0
less 4.1.3
less-loader 11.1.0
node-sass 8.0.0
stylus 0.59.0
stylus-loader 7.1.0
wait-on 7.0.1

自定义窗口

BrowserWindow 模块是您的 Electron 应用程序的基础。
并且它暴露了许多可以改变您浏览器窗口的外观和行为的API。

创建无边框窗口

menu.closepopup([browserwindow])

Chromium 的流程模型

漏洞复现-electron RCE命令执行CVE-2018-1000006

漏洞介绍

Electron是由Github开发，
用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，
并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

像Slack、Skype、XXX音乐、Github的Atom、Microsoft的VS Code均采用该框架开发。

在Windows下，如果Electron开发的应用注册了Protocol Handler
（允许用户在浏览器中召起该应用），
则可能出现一个参数注入漏洞，并最终导致在用户侧执行任意命令。

影响范围

1.8.2-beta.3 and earlier,

1.7.10 and earlier,

1.6.15 and earlie

Windows操作系统下，
使用应用自定义协议（Custom URI Scheme）Handler的Electron应用均会受到该漏洞的影响。

漏洞复现

┌──(root声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/179434

推荐阅读

相关标签

开发知识点-Vue-Electron_electron updater plugin

Electron

初始化

精简目录

electron-vite路径别名

全局公用样式

Element Plus布局

运行时icon 设置

使用人群

打包 win32桌面exe程序

安装时 图标 设置

electron-reload

自定义窗口

创建无边框窗口

Chromium 的流程模型

漏洞复现-electron RCE命令执行CVE-2018-1000006

漏洞介绍

影响范围

漏洞复现

安装时图标设置