04_Electron 模块介绍

一、Electron 主进程和渲染进程中的模块（介绍）

官方文档： https://www.electronjs.org/zh/docs/latest/api/app

二、Electron remote 模块

remote 模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径。
Electron 中，与 GUI 相关的模块（如 dialog， menu 等）只存在于主进程，而不在渲染进程中。为了能从渲染进程中使用它们，需要用 ipc 模块来给 主进程发送进程间消息。使用 remote 模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于 java 的 RMI。
electron 14.x 以后官方把内置的 remote 挪到了第三方模块里面，下面一起看看如何在 Electron 最新版本中使用 @electron/remote 模块

三、Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口

1、安装 @electron/remote

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

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

const remote = require("@electron/remote/main")
remote.initialize()
remote.enable(mainWindow.webContents)

3、渲染进程引入 remote 模块使用

const {BrowserWindow}= require("@electron/remote")

渲染进程代码：

const {BrowserWindow}= require("@electron/remote")
const path = require("path")
window.onload=()=>{
  let btnDom = document.getElementById("btn")
  btnDom.onclick = ()=>{
    const secondWindow = new BrowserWindow({
      width:300,
      height:300,
    })
    // __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html
    secondWindow.loadFile(path.join(__dirname, 'second.html'))
  }
 
}

4、实现效果

四、Electron 网页安全政策 Content-Security-Policy

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

加载本地文件可以不配置，加载 远程（使用loadURL方法）的话就需要配置。

1、配置 Content-Security-Policy

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

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

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

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

例如我们要引入 google-analytics 分析浏览 可以这样设置：

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