Electron调用nodejs的cpp .node扩展【非安全】

Electron调用nodejs的cpp .node扩展【非安全】

环境:

复制代码
electron: 30.1.1
nodejs: 20.14.0

前言

Electron中可以非常容易的调用nodejs的js代码,但是对于cpp .node扩展需要一定的配置才能调用,下面介绍一种最简单的cpp扩展的调用方法,该方法的优点是调用简单,缺点是会降低应用程序的安全性,生产环境中需谨慎使用。

代码

复制代码
$ tree
.
+--- build
|   +--- Release
|   |   +--- addon.node
+--- addon.cpp
+--- binding.gyp
+--- CMakeLists.txt
+--- index.html
+--- index.js
+--- package.json

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>
    let info = `electron: ${process.versions.electron}, nodejs: ${process.versions.node}, chrome: ${process.versions.chrome}, v8: ${process.versions.v8}`;
    document.getElementById("version").innerHTML = info;
    console.log(info);

    const addon = require('./build/Release/addon.node');
    info = addon.hello();
    document.getElementById("napi").innerHTML = info;
    console.log(info);
  </script>
</body>

</html>

index.js

复制代码
const { app, BrowserWindow } = require('electron/main');
// app.commandLine.appendSwitch('remote-debugging-port', '9222');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  win.loadFile('index.html');
}

app.whenReady().then(() => {
    createWindow();
})

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.0

hello world from napi

禁用 contextIsolation 和启用 nodeIntegration,会降低应用的安全性。务必谨慎使用,并确保你信任加载的所有代码和资源。

相关推荐
5008424 分钟前
HCCL 集合通信编程:多卡协同的正确姿势
java·flutter·性能优化·electron·wpf
蜡笔小电芯1 小时前
【Electron】第2章—BrowserWindow 与 Electron 窗口机制
前端·javascript·electron
蜡笔小电芯3 小时前
【Electron】第3章—HTML 页面与基础 UI 开发
ui·electron·html
蜡笔小电芯3 小时前
【Electron】第1章—新建工程(基于 Electron + Vite + JavaScript)
前端·javascript·electron
蜡笔小电芯5 小时前
【Electron】第4章—renderer.js 与页面交互逻辑
javascript·electron·交互
lqj_本人16 小时前
鸿蒙electron跨端框架PC导出管家实战:把交付前的检查、复制和导出做成一个工坊
华为·electron·harmonyos
ai安歌19 小时前
鸿蒙PC:鸿蒙electron跨端框架PC归档流水线实战:把散落文件整理成可追踪的桌面归档流程
华为·electron·harmonyos
lqj_本人20 小时前
鸿蒙electron跨端框架PC课业板实战:课程、截止时间、提交物和风险都放到桌面上
服务器·electron·harmonyos
lqj_本人1 天前
鸿蒙electron跨端框架PC剪贴台实战:把高频短文本整理成一键可取的桌面片段库
华为·electron·harmonyos
ai安歌1 天前
鸿蒙PC:鸿蒙electron跨端框架PC素材情绪板实战:把灵感、配色和参考资料收进桌面创作面板
华为·electron·harmonyos