标签： electron

发布于

JavaScript内核与高级编程之：`JavaScript` 的 `Electron`：其在桌面应用中的 `Node.js` 和 `Chromium` 架构。

各位朋友们，早上好！今天咱们来聊聊一个挺有意思的话题：Electron。这玩意儿啊，就像是给 JavaScript 穿上了一件铠甲，让它能横行桌面世界。 Electron：JavaScript 的桌面梦工厂 Electron 简单来说，它就是一个框架，允许你使用 Web 技术（HTML, CSS, JavaScript）来构建跨平台的桌面应用程序。你可能觉得奇怪，Web 技术不是跑在浏览器里的吗？怎么跑到桌面上了？这就是 Electron 的巧妙之处。它把 Node.js 和 Chromium 两个强大的引擎打包在一起，让你的 Web 应用摇身一变，成为一个独立的桌面应用。 Node.js 和 Chromium：Electron 的左右护法 要理解 Electron，就必须先了解 Node.js 和 Chromium 这两个核心组件。 Node.js：JavaScript 的后端大脑 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。它允许你在服务器端运行 JavaScript 代码。在 Electron 中，Node.js 负责处理文件系统操作 …

继续阅读“JavaScript内核与高级编程之：`JavaScript` 的 `Electron`：其在桌面应用中的 `Node.js` 和 `Chromium` 架构。”

发布于

如何利用 `Tauri` 或 `Electron`，将 Vue 应用打包为功能强大的桌面应用，并与原生系统 API 交互？

各位观众，各位朋友，晚上好！我是你们的老朋友，代码界的段子手。今天咱们不讲段子，讲点实在的，聊聊如何把Vue这匹小野马，驯服成一个桌面端的可靠座驾，也就是如何用Tauri或Electron把Vue应用打包成桌面应用，并且让它能和咱们电脑的原生系统API眉来眼去。 咱们这次的讲座，分成三个部分： 选妃记：Tauri vs. Electron，谁更适合你？ Vue的华丽变身：从网页到桌面，这中间发生了什么？ 勾搭原生API：让你的桌面应用更懂你。 一、 选妃记：Tauri vs. Electron，谁更适合你？ 话说这后宫佳丽三千，各有千秋。Tauri和Electron，都是打包Vue应用的利器，但脾气秉性大不相同。咱们先来了解一下她们的背景： Electron: 这位是老牌贵族，出身名门，基于Chromium和Node.js。简单粗暴，直接把整个浏览器内核塞到你的应用里，优点是兼容性好，社区庞大，啥问题都能找到人问。缺点是体积庞大，吃内存像个无底洞。 Tauri: 这是后起之秀，血统纯正，基于Rust和WebView (比如Windows上的WebView2, MacOS上的WKWebV …

继续阅读“如何利用 `Tauri` 或 `Electron`，将 Vue 应用打包为功能强大的桌面应用，并与原生系统 API 交互？”

发布于

如何利用 `Tauri` 或 `Electron`，将 Vue 应用打包为功能强大的桌面应用，并与原生系统 API 交互？

各位观众，欢迎来到今天的 "Vue 应用变身桌面侠" 讲座现场！ 今天咱们不聊虚的，直接上手，把 Vue 写的网页应用，摇身一变，变成能在电脑上跑的桌面程序，还能跟系统玩点“亲密互动”。 咱们就拿 Tauri 和 Electron 这俩“神器”开刀，手把手教你把 Vue 应用打包成桌面应用，还能调用原生 API，让你的应用“上天入地，无所不能”。 第一节：热身运动：Tauri vs Electron，谁才是你的菜？ 先来个小小的“选秀”环节，Tauri 和 Electron 都是桌面应用开发的利器，但风格不太一样。 特性 Tauri Electron 技术栈 Rust + WebView (系统自带) JavaScript + Chromium 体积 小巧玲珑 (几 MB) 略显臃肿 (几十 MB 起步) 性能 优秀 (Rust 扛把子) 还可以 (毕竟 JS) 资源占用 低 (省电小能手) 较高 (吃内存小能手) 安全性 高 (Rust 的优势) 相对较低 (JS 的锅) 跨平台 支持 (主流平台) 支持 (主流平台) 学习曲线 稍高 (Rust 需要啃一下) 较 …

继续阅读“如何利用 `Tauri` 或 `Electron`，将 Vue 应用打包为功能强大的桌面应用，并与原生系统 API 交互？”

发布于

如何利用 `Tauri` 或 `Electron`，将 Vue 应用打包为功能强大的桌面应用，并与原生系统 API 交互？

各位观众老爷们，大家好！今天咱们开个小讲座，主题是“Vue 应用变身记：Tauri 和 Electron 助你打造桌面超能力”。 咱们要让 Vue 应用从网页小清新，摇身一变，成为功能强大的桌面应用，还能跟系统 API 亲密互动，想想是不是有点小激动？ 开场白：网页到桌面，不止是换个壳 咱们都知道 Vue 是个前端框架，擅长构建用户界面。但浏览器毕竟有它的局限性，有些系统级别的操作，比如访问摄像头、操作文件系统、监听硬件事件，浏览器出于安全考虑，一般是不允许的。这时候，我们就需要 Tauri 和 Electron 这两个神器来帮忙了。 它们俩的作用，简单来说，就是给你的 Vue 应用套上一层“桌面外壳”，让它可以像普通的桌面应用一样运行，并且可以通过特定的 API，调用操作系统的功能。 第一幕：主角登场，Tauri vs. Electron 在开始“变身”之前，我们先来认识一下今天的主角：Tauri 和 Electron。 特性 Tauri Electron 底层技术 Rust + 系统 WebView Chromium + Node.js 包大小 非常小 (几 MB) 较大 (几十 …

继续阅读“如何利用 `Tauri` 或 `Electron`，将 Vue 应用打包为功能强大的桌面应用，并与原生系统 API 交互？”

发布于

解释 Vue 在桌面应用开发中的应用，例如 Electron 或 Tauri。

各位观众老爷，晚上好！我是你们的老朋友，今天咱们聊聊Vue在桌面应用开发中的那些事儿，尤其是结合Electron和Tauri这两个当红炸子鸡。 开场白：Web技术，不止于Web！ 话说当年，咱们写Web页面，浏览器就是我们的舞台。可是时代变了，Web技术就像孙悟空，七十二变，不仅能在浏览器里耍，还能跳出浏览器，在桌面应用领域大显身手。这都得益于像Electron和Tauri这样的框架，它们把Web技术和系统能力巧妙地结合起来，让咱们用熟悉的HTML、CSS和JavaScript，也能开发出媲美原生应用的桌面程序。而Vue，作为前端界的扛把子之一，自然也成了桌面应用开发中的香饽饽。 第一部分：Vue + Electron：老牌劲旅，功能强大 Electron，本质上就是一个用Chromium和Node.js构建桌面应用的框架。它允许你使用Web技术创建跨平台的桌面应用程序。简单来说，它就像一个浏览器内核（Chromium）和一个后端服务器（Node.js）的结合体，让你可以在里面跑你的Web应用，同时还能访问操作系统的底层API。 Electron的工作原理 Electron应用主要由三 …

继续阅读“解释 Vue 在桌面应用开发中的应用，例如 Electron 或 Tauri。”

发布于

阐述 Electron/Tauri 等框架如何利用 JavaScript 开发桌面应用，并比较它们在性能、安全和打包体积上的异同。

好的，各位观众老爷们，准备好你们的咖啡和键盘，今天咱们来聊聊如何用 JavaScript 这门“前端一哥”语言，来“降维打击”桌面应用开发。 别怕，这不是科幻片，而是 Electron 和 Tauri 这些框架的拿手好戏。 JavaScript “入侵”桌面：Electron 与 Tauri 的双雄会 你可能听说过，用 JavaScript 开发桌面应用，听起来有点像用勺子挖隧道，但 Electron 和 Tauri 证明了这是可行的，而且在某些场景下还相当高效。 Electron：老牌劲旅，拥抱 Web 的桌面战士 Electron 的核心思想很简单：把一个 Web 浏览器（Chromium 内核）和一个 Node.js 运行时环境塞进一个“壳”里，然后你的 JavaScript、HTML 和 CSS 代码就在这个“壳”里跑起来了。 就像把你的网页打包成了一个独立的 App，用户安装后就像安装普通桌面应用一样。 工作原理图解： +—————————————————–+ | Electron App | +—– …

继续阅读“阐述 Electron/Tauri 等框架如何利用 JavaScript 开发桌面应用，并比较它们在性能、安全和打包体积上的异同。”

发布于

Electron 应用的 Node.js Integration 漏洞如何导致 RCE (远程代码执行)？请分析其上下文隔离 (Context Isolation) 的绕过方法。

各位观众老爷们，晚上好！今天咱们聊聊Electron应用里头那些让人头疼的Node.js Integration漏洞，以及怎么绕过Context Isolation这道看似坚固的防线，最终实现RCE（远程代码执行）的梦想（噩梦）。 一、什么是Electron？为啥它会出问题？ 简单来说，Electron就是一个用Web技术（HTML, CSS, JavaScript）开发桌面应用的框架。你可以把它想象成一个打包了Chromium浏览器内核和Node.js运行时的容器。这样，前端工程师也能轻松开发出跨平台的桌面应用了，岂不美哉？ 但问题也来了：Node.js拥有强大的系统权限，可以读写文件、执行命令，甚至控制你的电脑。如果Electron应用允许网页代码直接访问Node.js API，那就相当于给黑客开了一扇通往你电脑的后门。 二、Node.js Integration：一把双刃剑 Electron应用默认情况下是开启Node.js Integration的，这意味着网页代码可以直接通过require函数访问Node.js模块。比如： // 在渲染进程中（也就是你的网页代码里） cons …

继续阅读“Electron 应用的 Node.js Integration 漏洞如何导致 RCE (远程代码执行)？请分析其上下文隔离 (Context Isolation) 的绕过方法。”

发布于

JS `Electron` 应用的 `asar` 档案解包与代码提取

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊Electron应用的“扒皮”大法——asar档案的解包与代码提取。 别害怕，“扒皮”只是个玩笑，目的是帮助大家更好地理解和利用Electron应用中的代码。 一、啥是Asar？为啥要扒它？ 想象一下，你把一堆文件（HTML、CSS、JavaScript等等）一股脑儿塞进一个压缩包里，但这个压缩包又不是普通的zip或rar，它有自己的格式，这就是Asar。Electron应用通常会将所有源代码、资源文件打包成一个或多个asar文件，目的是： 提升性能： 读取单个asar文件比读取成百上千个小文件快得多。 代码保护： 稍微增加一些代码被直接查看的难度 (只是稍微而已)。 简化部署： 方便地将应用打包成单个可执行文件。 那么，为啥我们要“扒”它呢？原因有很多： 学习研究： 看看别人家的优秀代码，学习一下设计思路。 定制修改： 在某些情况下，你可能需要修改Electron应用的某些功能。 安全分析： 检查应用是否存在安全漏洞。 二、准备工作：磨刀不误砍柴工 开始之前，我们需要准备一些工具： Node.js 和 npm： 这是JavaScr …

继续阅读“JS `Electron` 应用的 `asar` 档案解包与代码提取”

发布于

JS `Electron` 应用的 `Node.js Integration` 漏洞与 `RCE` (远程代码执行)

各位观众老爷们，晚上好！我是你们的老朋友，今天咱们来聊聊 Electron 应用里一个让人头疼但又充满了geek味道的话题：Node.js 集成漏洞与 RCE (Remote Code Execution)。保证让你们听得明白，看得有趣，还能学到真本事。 一、Electron 与 Node.js 集成：甜蜜的负担 Electron 这玩意儿，说白了就是个壳，它把 Chromium 浏览器内核和 Node.js 运行时环境打包在一起，让我们可以用前端技术（HTML, CSS, JavaScript）开发桌面应用。Node.js 集成呢，就是让你的 Electron 应用可以访问 Node.js 的 API，比如文件系统、网络、进程等等。 这听起来很美好，对吧？前端工程师也能轻松搞桌面应用了。但是，就像所有美好的事物一样，它也带来了风险。Node.js 的强大能力，如果被恶意利用，就会变成 RCE 的温床。 二、Node.js 集成漏洞：RCE 的前奏 Node.js 集成漏洞，简单来说，就是攻击者能够通过某种方式，让你的 Electron 应用执行他们想执行的 Node.js 代码。这就 …

继续阅读“JS `Electron` 应用的 `Node.js Integration` 漏洞与 `RCE` (远程代码执行)”

发布于

JS `Electron` `Native` `Addons`：用 C++ 扩展 Electron 功能

各位同学，今天咱们聊聊Electron的“野路子”玩法——Native Addons。简单来说，就是用C++给Electron插上翅膀，让你的应用飞起来！ 开场白：为什么需要 Native Addons？ Electron本身基于JavaScript和Node.js，很多时候已经足够强大了。但有些场景，JS就显得力不从心了： 性能瓶颈： 大量计算密集型任务，例如图像处理、音视频编解码、加密解密等，JS的效率可能会拖后腿。 硬件交互： 直接操作底层硬件，例如访问USB设备、串口通信等，JS原生API可能不足。 复用现有代码： 已经有成熟的C/C++库，不想用JS重写一遍。 保密性： 一些核心算法不想暴露源码，C++编译后的二进制文件更难被逆向。 这时候，Native Addons就派上用场了。它可以让你用C++编写高性能模块，然后在Electron应用中像普通JS模块一样调用。 第一部分：Native Addons 的基本概念 Native Addons本质上是Node.js的插件，Electron应用可以像使用Node.js模块一样使用它们。其核心在于将C++代码编译成特定格式的动态链 …

继续阅读“JS `Electron` `Native` `Addons`：用 C++ 扩展 Electron 功能”