Electron调用nodejs的cpp .node扩展【安全】
环境：
electron: 30.1.1
nodejs: 20.14.0
前言
Electron是一个非常流行的跨平台桌面应用框架，它允许开发者使用Web技术来创建原生应用。然而，当应用需要进行高性能计算或访问系统API时，Web技术可能会成为性能瓶颈。这时，开发者可以选择使用C++来开发底层库，并在Electron中调用这些库，以实现高性能的功能。
在前面的文章中，我们使用禁用 contextIsolation 和启用 nodeIntegration的方式来调用C++扩展，这样会降低应用的安全性。
安全的方式为隔离上下文(contextIsolation: true)，通过 ipcMain通信使用主线程处理，contextBridge.exposeInMainWorld开放API接口。这种方式推荐在生产环境使用。
代码
$ tree
.
+--- build
| +--- Release
| | +--- addon.node
+--- addon.cpp
+--- binding.gyp
+--- CMakeLists.txt
+--- index.html
+--- index.js
+--- package.json
+--- preload.js
+--- renderer.js
index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello Electron</title><meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
</head><body><p id="version"></p><p id="napi"></p><script src="renderer.js"></script>
</body></html>
index.js
const { app, BrowserWindow,ipcMain } = require('electron/main');
const path = require('path');
const addon = require(path.join(__dirname, '/build/Release/addon.node'));const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {// nodeIntegration: true, // not safe// contextIsolation: false // not safepreload: path.join(__dirname, 'preload.js'), // preload script must absolute pathcontextIsolation: true,enableRemoteModule: false}})win.loadFile('index.html');
}app.whenReady().then(() => {createWindow();
})ipcMain.handle('ipcAddon', async () => {return addon.hello();
})
preload.js
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {getVersion: () => { return `electron: ${process.versions.electron}, nodejs: ${process.versions.node}, chrome: ${process.versions.chrome}, v8: ${process.versions.v8}`; },getHello: async () => {return await ipcRenderer.invoke('ipcAddon');}
});
renderer.js
window.addEventListener('DOMContentLoaded', async () => {let info = window.electronAPI.getVersion();document.getElementById("version").innerHTML = info;console.log(info);info = await window.electronAPI.getHello();document.getElementById("napi").innerHTML = info;console.log(info);
});
addon.cpp
#include <node_api.h>static napi_value helloMethod(napi_env env, napi_callback_info info)
{napi_value result;napi_create_string_utf8(env, "hello world from napi", NAPI_AUTO_LENGTH, &result);return result;
}static napi_value Init(napi_env env, napi_value exports)
{napi_property_descriptor desc = {"hello", 0, helloMethod, 0, 0, 0, napi_default, 0};napi_define_properties(env, exports, 1, &desc);return exports;
}NAPI_MODULE(NODE_GYP_MODULE_NAME, Init)
binding.gyp
{"targets": [{"target_name": "addon","sources": [ "addon.cpp" ]}]
}
CMakeLists.txt
cmake_minimum_required(VERSION 2.8.12)project(addon)message(STATUS "operation system is ${CMAKE_SYSTEM}")add_definitions(-std=c++11)include_directories(${CMAKE_JS_INC})
include_directories(.)file(GLOB SOURCE_FILES addon.cpp)add_library(${PROJECT_NAME} SHARED ${SOURCE_FILES} ${CMAKE_JS_SRC})set_target_properties(${PROJECT_NAME} PROPERTIES PREFIX "" SUFFIX ".node")target_link_libraries(${PROJECT_NAME} ${CMAKE_JS_LIB})
package.json
{"name": "my-electron-app","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "electron ."}
}
编译
node-gyp configure build
结果
electron: 30.1.1, nodejs: 20.14.0, chrome: 124.0.6367.243, v8: 12.4.254.20-electron.0hello world from napi
License
License under CC BY-NC-ND 4.0: 署名-非商业使用-禁止演绎
Reference:
NULL
