Electron入门宝典（二）模块&CSP(网页安全政策)

最新推荐文章于 2025-07-01 14:52:36 发布

原创最新推荐文章于 2025-07-01 14:52:36 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaScript #Node.js #electron基础 #桌面应用软件

Electron 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Electron中remote模块的使用，包括在新版本中如何启用并调用BrowserWindow打开新窗口。同时，讨论了Content-Security-Policy的重要性，提供配置示例以增强网页安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 .Electron模块介绍

二.remote模块

三.remote调用BrowserWindow打开新窗口

四.Content- Security-Policy

一 .Electron模块介绍

分为主进程模块和渲染进程模块，有些模块既是主进程模块又是渲染进程模块。

官方api文档戳这里

二.remote模块

remote模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC) 的简便途径。
Electron中，与GUI相关的模块(如dialog, menu等)只存在于主进程，而不在渲染进程中。
为了能从渲染进程中使用它们，需要用ipc模块来给主进程发送进程间消息。使用remote模
块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于Java 的RMI。

注意: Electron10.x 之前可以直接使用Remote模块，Electron10.x 以后Electron14.x以前要
使用remote模块的话必须得在BrowserWindow中通过enableRemoteModule: true开启，
Electron14.x以后官方把内置的remote挪到了第三方模块里面，下面我们给大家看看如何在
Electron最新版本中使用@electron/remote模块。

三.remote调用BrowserWindow打开新窗口

首先先试一下渲染进程中能否使用主进程中的模块，

报错，显然不能，在敲代码的过程中没有代码提示也会发现不能使用！

所以要安装remote模块。

1.安装@electron/remote

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

2.主进程中配置启用remote模块

//1.引入初始化模块remote
const remote=require("@electron/remote/main")
remote.initialize();

在创建主窗口函数中引入如下代码：

//2.启动remote模块
remote.enable(mainWindow.webContents);

3.在渲染进程中引入electron

//3.在渲染进程中使用electron只需如下引入
const { BrowserWindow } = require("@electron/remote");

项目结构：

相比之前需要改动的文件如下：

新增的index.js：

//3.在渲染进程中使用electron只需如下引入
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,
            webPreferences: {
                //渲染进程使用nodejs的第二种方法
                nodeIntegration: true,
                contextIsolation: false
            }
        });
        //加載渲染文件
        secondWindow.loadFile(path.join(__dirname,"second.html"));
    }
}

修改的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <!-- 渲染的第二种方式 -->
    <script src="./renderer/index.js"></script>
    <title>Document</title>
</head>
<body>
    <h2>这是渲染进程主窗口</h2>
    <!-- 快捷方式：ul>li*5 -->
    <ul>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
        <li>主窗口里面的内容</li>
    </ul> 

    <button id="btn">打开一个新窗口</button>
</body>
</html>

main.js：

//主文件
const {app,BrowserWindow}=require("electron");
//引入nodejs的path模块，用于合并路径
const path=require("path");
const fs=require("fs");

//1.引入初始化模块remote
const remote=require("@electron/remote/main")
remote.initialize();

//创建窗口函数
const createWindow=()=>{
    //创建主窗口
    const mainWindow=new BrowserWindow({
        width:800,
        height:550,
        webPreferences:{
            //渲染进程使用nodejs的第一种方法
            //preload:path.join(__dirname,"renderer/preload.js"),

            //渲染进程使用nodejs的第二种方法
            nodeIntegration:true,
            contextIsolation:false
        }
        
    })
    //加载渲染文件(也可以使用loadURL加载远程渲染文件)
    mainWindow.loadFile(path.join(__dirname,"index.html"));
    //打开调试模式
    mainWindow.webContents.openDevTools();

    //2.启动remote模块
    remote.enable(mainWindow.webContents);

    //主进程中直接使用nodejs模块即可
    //参数一是要读取的文件路径
    fs.readFile("package.json",(err,data)=>{
        if(err){
            console.log(err);
            return;
        }
        console.log(data.toString());
    })

}//createWindow

//监听应用的启动事件
app.on("ready",createWindow);

/*监听窗口关闭的事件，关闭的时候退出应用（macos除外）
Macos中点击dock中的应用图标的时候重新创建窗口
因为在mac中关闭窗口不会关闭应用程序,而是隐藏程序*/
app.on("window-all-closed",()=>{
    //如果当前系统不是macOS,则关闭应用程序
    if(process.platform != "darwin"){
        app.quit();
    }
})

app.on("activate",()=>{
    if(BrowserWindow.getAllWindows().length===0){
        //重新创建一个窗口
        createWindow();
    }
})

输出：

四.Content- Security-Policy

官网相关讲解

Content Security Policy简称CSP 是- -种网页安全政策。
CSP的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同
于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。
CSP大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一
台列入了白名单的可信主机。
通俗的讲开启CSP后可以让浏览器自动禁止外部注入恶意脚本，增加网站的安全性能。

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

如果是loadFile加载的本地页面，那么不配置也行，但是如果是loadURL，加载远程页面，那么一定要配置！

配置Content-Security-Policy:
两种方式的规则都是一样的，default-src 代表默认规则，'self' 表示限制所有的外部资源，只
允许当前域名加载资源。

不允许加载任何外部资源（如css，js，图片等）

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

一般情况下，默认规则可以包揽大多数的需求，但凡事都有例外，资源繁多的时候通常需要特殊配置，最值得关心的是script的安全，这至关重要，一旦被注入恶意script，很多安全控制就会荡然无存，可以使用script-src这一指令设置:

不允许加载外部脚本(不允许加载外部的js，但是可以加载外部的css和图片)：

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

根据情况选择上面的代码加入到index.html的head标签中。