Electron:remove模块

усилの博客 2022/9/24 Electron

# Electron 主进程和渲染进程中的模块

在这里插入图片描述

# remote模块

主要作用：提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径

例子：在渲染进程（index.html）中创建新的窗口

注意：

Electron10.x 之前可以直接使用 remote 模块
Electron10.x 以后 Electron14.x 以前要使用 remote 模块的话必须得在 BrowserWindow 中通过 enableRemoteModule: true 开启
Electron14.x 以后官方把内置的 remote 挪到了第三方模块里面

在这里插入图片描述

# 例子：在渲染进程中创建新的窗口

1、安装 @electron/remote

npm install --save @electron/remote
// 或者
cnpm install --save @electron/remote
// 或者
yarn add @electron/remote

1
2
3
4
5

2、在配置main.js进行配置

const { app, BrowserWindow } = require("electron");
const path = require("path");
//1、引入初始化remote模块
const remote=require('@electron/remote/main');
remote.initialize();

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        webPreferences: {            
            nodeIntegration: true,   //允许渲染进程使用nodejs
            contextIsolation: false  //允许渲染进程使用nodejs
        }
    });
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    
    // 加载外部链接
    // mainWindow.loadURL("https://www.itying.com")
  
    //2、启动remote模块
    remote.enable(mainWindow.webContents);
}


app.on("ready", createWindow)


app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});


app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

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

3、在main.js引入处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="renderer/index.js"></script>       
</head>
<body>
    <h2>这是渲染进程主窗口</h2>
   <button id="btn">打开一个新窗口</button>
</body>
</html>

1
2
3
4
5
6
7
8
9
10

4、在 renderer/index.js 创建窗口

const {  BrowserWindow } = require("@electron/remote");
const path = require("path");
window.onload=()=>{
    var btnDom=document.querySelector("#btn")
    btnDom.onclick=()=>{
        const secondWindow = new BrowserWindow({
            width: 300,
            height: 200,         
        });
        secondWindow.loadFile(path.join(__dirname, "second.html"));
    }
}

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

在这里插入图片描述

# 安全策略 Content-Security-Policy

CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。

CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

通俗的讲开启 CSP 后可以让浏览器自动禁止外部注入恶意脚本，增加网站的安全性能。

从 2.0 版本开始，如果使用 electron 的开发人员没有定义 Content-Security-Policy，Electron 就会在 DevTool console 发出警告提示，如下图：

在这里插入图片描述

配置 Content-Security-Policy

<!-- 不允许加载本页面以外的任何资源 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 不允许加载本页面以外的js脚本 -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

1
2
3
4