electron这样使用更安全

背景:

electron大家平时为了方便使用,或是一些网上demo的引导,会让渲染进程的业务界面支持直接使用nodejs,这种开发方式有一定的安全隐患,如果业务界面因为xss之类的漏洞被注入其他代码,危害非常大,属于最高等级的安全问题。那么怎样更好的避免发生这种问题呢?

一.禁止渲染进程页面直接使用nodejs,webPreferences这么配置

win = new BrowserWindow({
    webPreferences: {
      preload:"./preload.js",
      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
      // Consider using contextBridge.exposeInMainWorld
      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
      nodeIntegration: true,
      //webviewTag: true,
      contextIsolation: true,//隔离
    },
  });

二.通过preload配置,暴露允许使用调用的接口,preload配置的配置方式如上代码,内容如下例子:

import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

在渲染进程界面采用window.electronAPI.openFile()方式调用,为了让渲染进程足够安全,建议设计这里的接口尽量做到仅暴露必要函数和参数,不要直接把诸如electron对象暴露给页面界面,这种事情干多了,这个安全隔离的意义就会逐渐消失。

渲染进程与preload通讯的另外一种方式,通过postmessage,举例

preload.js

window.onmessage = (ev) => {
  ev.data.payload === "removeLoading" && removeLoading();
};

渲染页js

postMessage({ payload: "removeLoading" }, "*");

这种方式相比第一种更加安全一点(暴露的信息更加隐蔽),但使用起来比较麻烦,可能需要进一步封装

三:其他问答:

1.preload.js在跳转到新地址后还会不会存在?

答:会,每次发生跳转preload.js都会重新加载进来,跟普通加载js一样,所以这个js的变量并非持久化的

2.采用exposeInMainWorld暴露的接口需要注意什么?

答:exposeInMainWorld暴露的接口,是拷贝当前对象的属性,并不是真的把属性的引用暴露出来,例如暴露的属性是一个 new EventEmitter对象,你想在业务界面访问这个属性的on方法是访问不到的。

3.preload跟主进程通讯方式

方式一:invoke和handle的组合

//preload.js
let a = ipcRenderer.invoke('xxx')

//main.js
ipcMain.handle('xxx', async ()=>{
return "123"
})

方式二:on和send的组合

// 在主进程中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})
/在渲染器进程 (网页) 中。
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

相关推荐

  1. electron这样使用安全

    2023-12-15 11:42:05       95 阅读
  2. electron安装使用流程

    2023-12-15 11:42:05       73 阅读
  3. electron-updater使用整理

    2023-12-15 11:42:05       64 阅读
  4. electron使用typescript

    2023-12-15 11:42:05       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-15 11:42:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-15 11:42:05       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-15 11:42:05       82 阅读
  4. Python语言-面向对象

    2023-12-15 11:42:05       91 阅读

热门阅读

  1. Qt插件开发与QPluginLoader的使用

    2023-12-15 11:42:05       55 阅读
  2. 安卓10 flutter webview 回退会闪退

    2023-12-15 11:42:05       67 阅读
  3. 数据结构:第9关:删除链表中满足区间值的结点

    2023-12-15 11:42:05       67 阅读
  4. 【无标题】

    2023-12-15 11:42:05       51 阅读
  5. 逻辑回归的损失函数和目标函数

    2023-12-15 11:42:05       48 阅读
  6. Vue学习笔记-Vue3对响应式数据的判断

    2023-12-15 11:42:05       49 阅读