【Electron入门】进程环境和隔离

目录

一、主进程和渲染进程

1、主进程（main）

2、渲染进程（renderer）

二、预加载脚本

三、沙盒化

为单个进程禁用沙盒

全局启用沙盒

四、环境访问权限控制：contextIsolation和nodeIntegration

1、contextIsolation

🌰启用contextIsolation：true时（默认推荐做法）

🌰不启用contextIsolation：false时

2、nodeIntegration

🌰 如果启用nodeIntegration: true（不推荐）

🌰如果不启用，我们应该如何借助Node.js的功能呢？

Electron可以简单理解为一个桌面应用程序的“壳”，内里还是遵循浏览器的行为，加载网页进行渲染（可以是本地、也可以是远程网页）

一、主进程和渲染进程

Electron的架构其实类似现代浏览器，为了管理应用程序窗口中不同的页面，每个标签页在自己的进程中渲染， 从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。

在Electron中，我们可控制的两类进程为：主进程 和 渲染进程。

1、主进程（main）

1️⃣ 运行环境：node.js，具有 require 模块和使用所有 Node.js API

2️⃣ 职责：

  • 窗口管理：创建 / 销毁窗口实例BrowserWindow，其相当于一个小的EventEmitter，窗口将在单独的渲染器进程中加载一个网页。窗口中的webContents 代表的是 渲染进程 内部的网页内容（Web 页面），可以执行向渲染进程通信、网页内容生命周期监听、访问/控制devtools等
// main.js
const { BrowserWindow } = require('electron')const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://github.com')const contents = win.webContents
console.log(contents)
  • 应用程序的生命周期：监听app生命周期、做相应处理
// quitting the app when no windows are open on non-macOS platforms
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
  • 调用api与操作系统交互：Electron 有着多种控制原生桌面功能的模块，例如菜单、对话框以及托盘图标。下面举个例子🌰，创建应用菜单！
const { app, Menu, BrowserWindow } = require('electron');app.whenReady().then(() => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}});win.loadURL('https://example.com');// 创建菜单templateconst menuTemplate = [{label: '文件',submenu: [{ label: '打开文件', click: () => console.log('打开文件') },{ type: 'separator' }, // 分割线{ label: '退出', role: 'quit' }]},{label: '编辑',submenu: [{ label: '撤销', role: 'undo' },{ label: '重做', role: 'redo' },{ type: 'separator' },{ label: '剪切', role: 'cut' },{ label: '复制', role: 'copy' },{ label: '粘贴', role: 'paste' }]}];// 设置应用菜单const menu = Menu.buildFromTemplate(menuTemplate); //从模版设置菜单实例Menu.setApplicationMenu(menu);  // 放入应用菜单
});

2、渲染进程（renderer）

1️⃣ 运行环境：渲染器负责 渲染 网页内容。 所以实际上，运行于渲染器进程中的代码是须遵照网页web标准的。 

二、预加载脚本

由于主进程和渲染进程的运行环境完全不同，且默认情况下，二者无权直接访问互相之间的环境。

所以出现了预加载脚本preload.js作为环境桥梁，它包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码，与浏览器共享一个全局window接口 。 这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。

preload.js可以部分暴露一些api给对方进程、可以作为通信中转站等等。

三、沙盒化

当 Electron 中的渲染进程被沙盒化时，它们的行为与常规 Chrome 渲染器一样。 一个沙盒化的渲染器不会有一个 Node.js 环境。

附属于沙盒化的渲染进程的 preload 脚本中仍可使用一部分以 Polyfill 形式实现的 Node.js API。

为单个进程禁用沙盒

app.whenReady().then(() => {const win = new BrowserWindow({webPreferences: {sandbox: false}})win.loadURL('https://google.com')
})

全局启用沙盒

app.enableSandbox ：注意，此 API 必须在应用的 ready 事件之前调用

app.enableSandbox()
app.whenReady().then(() => }// 因为调用了app.enableSandbox()，所以任何sandbox:false的调用都会被覆盖。const win = new BrowserWindow()win.loadURL('https://google.com')
})

四、环境访问权限控制：contextIsolation和nodeIntegration

在创建一个browserWindow实例的时候，会配置webPreferences中的字段。

其中有两个字段与渲染进程的访问权限密切相关：contextIsolation 和 nodeIntegration

1、contextIsolation
  • 控制 window 对象是否在独立的 JavaScript 上下文中运行。
  • 默认值：true
  • 如果为true,代表渲染进程在独立的js上下文中。因此preload.js、第三方库都不能直接修改渲染进程中的window全局对象；如果为false，preload.js可以直接通过修改window属性传递值

那么不同设置下，如何借助预加载脚本让主进程与渲染进程通信呢？

🌰启用contextIsolation：true时（默认推荐做法）

main.js

const { BrowserWindow } = require('electron');
const win = new BrowserWindow({webPreferences: {contextIsolation: true,  // 开启上下文隔离preload: 'preload.js'}
});

preload.js：利用exposeInMainWorld将属性挂在window对象中

const { contextBridge } = require('electron');contextBridge.exposeInMainWorld('myAPI', {sayHello: () => console.log('Hello!')
});

renderer.js

console.log(window.myAPI.sayHello()); // ✅ "Hello!"
🌰不启用contextIsolation：false时

preload.js：可直接篡改window对象

window.myApi= {sayHello: () => console.log('Hello!')
};

2、nodeIntegration
  • 控制是否可以在渲染进程中直接使用Node.js API（如fs、path、require等语法和api)
  • 默认值：false，无法直接使用node环境
🌰 如果启用nodeIntegration: true（不推荐）

渲染进程中的js文件

// 渲染进程 index.html
<script>const fs = require('fs');fs.writeFileSync('test.txt', 'Hello, Electron!');
</script>
🌰如果不启用，我们应该如何借助Node.js的功能呢？

通过【 预加载脚本】执行ipcRenderer通信，发送至主进程处理

 preload.js

// preload.js
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {sendTitle: (title) => ipcRenderer.send('set-title', title),readFile : (filePath) => ipcRenderer.invoke('read-file', filePath)
});

main.js的利用ipcMain接受处理函数

const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')
const fs = require('fs').promises;function createWindow () {const mainWindow = new BrowserWindow({webPreferences: {preload: path.join(__dirname, 'preload.js')}})// send 'sendTitle'方法的接收器ipcMain.on('set-title', (event, title) => {//通过event.sender获取网页内容对象const webContents = event.sender// fromWebContents解析const win = BrowserWindow.fromWebContents(webContents)win.setTitle(title)})// invoke 'readFile'方法的处理器ipcMain.handle('read-file', async (_, filePath) => {try {const data = await fs.readFile(filePath, 'utf-8');return { success: true, data };} catch (error) {return { success: false, error: error.message };}});mainWindow.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})

⚠️注意：send + on和invoke + handle两种通信方法的区别

 send + on：单向通信，单向发送->单边处理

invoke + handle ：双向通信，发送者发送信息 -> 接收者理后可return一个返回值 -> 发送者接收到返回值的Promise对象，可针对返回值再处理

🌟推荐实践：

启用 sandbox: true（沙箱模式）进一步增强安全性

const win = new BrowserWindow({webPreferences: {contextIsolation: true, （默认，无需特别设置）nodeIntegration: false,（默认，无需特别设置）preload: 'preload.js',sandbox: true}
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/24701.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机三级网络技术备考

计算机三级网络技术备考

#subtotal 1Mbps1024kb128KB12.8M/s #1024B1KB 1024KB1MB 1024MB1GB #路由器的5G信号和平常的波长不同&#xff08;5G的穿墙性能差&#xff09; #局域网LAN&#xff08;一公里内——构成集线机、交换机、同轴电缆&#xff09; #城域网MAN&#xff08;几公里到几十公里——光…
阅读更多...
IDEA 2024.1 最新永久可用（亲测有效）

IDEA 2024.1 最新永久可用（亲测有效）

今年idea发布了2024.1版本&#xff0c;这个版本带来了一系列令人兴奋的新功能和改进。最引人注目的是集成了更先进的 AI 助手&#xff0c;它现在能够提供更复杂的代码辅助功能&#xff0c;如代码自动补全、智能代码审查等&#xff0c;极大地提升了开发效率。此外&#xff0c;用…
阅读更多...
30 分钟从零开始入门 CSS

30 分钟从零开始入门 CSS

前言 最近也是在复习&#xff0c;把之前没写的博客补起来&#xff0c;之前给大家介绍了 html&#xff0c;现在是 CSS 咯。 30分钟从零开始入门拿下 HTML_html教程-CSDN博客 一、CSS简介&#xff1a;给网页“化妆”的神器 CSS&#xff08;层叠样式表&#xff09;就像“化妆“&a…
阅读更多...
Game Maker 0.11更新：构建社交竞速游戏并增强玩家互动

Game Maker 0.11更新：构建社交竞速游戏并增强玩家互动

在这三部分系列中&#xff0c;我们将介绍如何实现Game Maker 0.11中一些最激动人心的新功能。 欢迎来到我们系列文章的第一篇&#xff0c;重点介绍了The Sandbox Game Maker 0.11更新中的新特性。 The Sandbox Game Maker 0.11是一个多功能工具&#xff0c;帮助创作者通过游戏…
阅读更多...
软件供应链安全工具链研究系列——RASP自适应威胁免疫平台（上篇）

软件供应链安全工具链研究系列——RASP自适应威胁免疫平台（上篇）

1.1 基本能力 RASP是一种安全防护技术&#xff0c;运行在程序执行期间&#xff0c;使程序能够自我监控和识别有害的输入和行为。也就是说一个程序如果注入或者引入了RASP技术&#xff0c;那么RASP就和这个程序融为一体&#xff0c;使应用程序具备了自我防护的能力&#xff0c;…
阅读更多...
2024信息技术、信息安全、网络安全、数据安全等国家标准合集共125份。

2024信息技术、信息安全、网络安全、数据安全等国家标准合集共125份。

2024信息技术、信息安全、网络安全、数据安全等国家标准合集&#xff0c;共125份。 一、2024信息技术标准&#xff08;54份&#xff09; GB_T 17966-2024 信息技术 微处理器系统 浮点运算.pdf GB_T 17969.8-2024 信息技术 对象标识符登记机构操作规程 第8部分&#xff1a;通用…
阅读更多...
HTTP与网络安全

HTTP与网络安全

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、HTTPS和HTTP有怎样的区别呢&#xff1f;HTTPS HTTP SSL/TLS&#xff08;SSL或者TLS&#xff09; HTTP&#xff1a;应用层 SSL/TLS&#xff1a;协议中间层 …
阅读更多...
ASP.NET Core 8.0学习笔记（二十八）——EFCore反向工程

ASP.NET Core 8.0学习笔记（二十八）——EFCore反向工程

一、什么是反向工程 1.原则&#xff1a;DBFirst 2.反向工程&#xff1a;根据数据库表来反向生成实体类 3.生成命令&#xff1a;Scaffold-DbContext ‘连接字符串’ 字符串示例&#xff1a; Server.;DatabaseDemo1;Trusted_Connectiontrue; MultipleActiveResultSets true;Tru…
阅读更多...
Unity基础——资源导出分享为Unity Package

Unity基础——资源导出分享为Unity Package

一.选中要打包的文件夹&#xff0c;右击&#xff0c;点击Exporting package 二.勾选 Include Dependencies&#xff0c;点击Export Include Dependencies&#xff1a;代表是否包含资源依赖的选项 三.选择保存的位置&#xff0c;即可生成Unity package 最终形成文件&#xff1a…
阅读更多...
kafka-leader -1问题解决

kafka-leader -1问题解决

一. 问题&#xff1a; 在 Kafka 中&#xff0c;leader -1 通常表示分区的领导者副本尚未被选举出来&#xff0c;或者在获取领导者信息时出现了问题。以下是可能导致出现 kafka leader -1 的一些常见原因及相关分析&#xff1a; 1. 副本同步问题&#xff1a; 在 Kafka 集群中&…
阅读更多...
【Java企业生态系统的演进】从单体J2EE到云原生微服务

【Java企业生态系统的演进】从单体J2EE到云原生微服务

Java企业生态系统的演进&#xff1a;从单体J2EE到云原生微服务 目录标题 Java企业生态系统的演进&#xff1a;从单体J2EE到云原生微服务摘要1. 引言2. 整体框架演进&#xff1a;从原始Java到Spring Cloud2.1 原始Java阶段&#xff08;1995-1999&#xff09;2.2 J2EE阶段&#x…
阅读更多...
内容中台的企业CMS架构是什么？

内容中台的企业CMS架构是什么？

企业CMS模块化架构 现代企业内容管理系统的核心在于模块化架构设计&#xff0c;通过解耦内容生产、存储、发布等环节构建灵活的技术栈。动态/静态发布引擎整合技术使系统既能处理实时更新的产品文档&#xff0c;也能生成高并发的营销落地页&#xff0c;配合版本控制机制确保内…
阅读更多...
Binder通信协议

Binder通信协议

目录 一,整体架构 二,Binder通信协议 三&#xff0c;binder驱动返回协议 四&#xff0c;请求binder驱动协议 一,整体架构 二,Binder通信协议 三&#xff0c;binder驱动返回协议 binder_driver_return_protocol共包含18个命令&#xff0c;分别是&#xff1a; 四&#xff0c…
阅读更多...
react 中，使用antd layout布局中的sider 做sider的展开和收起功能

react 中，使用antd layout布局中的sider 做sider的展开和收起功能

一 话不多说&#xff0c;先展示效果&#xff1a; 展开时&#xff1a; 收起时&#xff1a; 二、实现代码如下 react 文件 import React, {useState} from react; import {Layout} from antd; import styles from "./index.module.less"; // 这个是样式文件&#…
阅读更多...
神经网络 - 激活函数（Sigmoid 型函数）

神经网络 - 激活函数（Sigmoid 型函数）

激活函数在神经元中非常重要的。为了增强网络的表示能力和学习能力&#xff0c;激活函数需要具备以下几点性质: (1) 连续并可导(允许少数点上不可导)的非线性函数。可导的激活函数可以直接利用数值优化的方法来学习网络参数. (2) 激活函数及其导函数要尽可能的简单&#xff0…
阅读更多...
供应链管理系统--升鲜宝门店收银系统功能解析，登录、主界面、会员 UI 设计图（一）

供应链管理系统--升鲜宝门店收银系统功能解析，登录、主界面、会员 UI 设计图（一）

供应链管理系统--升鲜宝门店收银系统功能解析&#xff0c;登录、主界面 会员 UI 设计图&#xff08;一&#xff09;
阅读更多...
从零开始的网站搭建（以照片/文本/视频信息通信网站为例）

从零开始的网站搭建（以照片/文本/视频信息通信网站为例）

本文面向已经有一些编程基础&#xff08;会至少一门编程语言&#xff0c;比如python&#xff09;&#xff0c;但是没有搭建过web应用的人群&#xff0c;会写得尽量细致。重点介绍流程和部署云端的步骤&#xff0c;具体javascript代码怎么写之类的&#xff0c;这里不会涉及。 搭…
阅读更多...
三轴加速度推算姿态角的方法，理论分析和MATLAB例程

三轴加速度推算姿态角的方法，理论分析和MATLAB例程

三轴加速度推算三轴姿态的方法与MATLAB代码实现 文章目录 基本原理与方法概述静态姿态解算（仅俯仰角与横滚角）扩展（融合陀螺仪与加速度计）MATLAB代码 例程四元数动态姿态解算（融合加速度与陀螺仪）注意事项与扩展基本原理与方法概述 三轴加速度计通过测量重力分量在载体坐…
阅读更多...
2025最新Flask学习笔记（对照Django做解析）

2025最新Flask学习笔记（对照Django做解析）

前言&#xff1a;如果还没学Django的同学&#xff0c;可以看Django 教程 | 菜鸟教程&#xff0c;也可以忽略下文所提及的Django内容&#xff1b;另外&#xff0c;由于我们接手的项目大多都是前后端分离的项目&#xff0c;所以本文会跳过对模板的介绍&#xff0c;感兴趣的朋友可…
阅读更多...
HTML第二节

HTML第二节

一.列表 1.列表的简介 2.无序列表 注&#xff1a;1.ul里面只能放li&#xff0c;不能放标题和段落标签 2.li里面可以放标题和段落等内容 3.有序列表 4.定义列表 注&#xff1a;要实现上图的效果需要CSS 二.表格 1.表格介绍 注&#xff1a;1.th有额外的效果&#xff0c;可以…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023