低代码后端前端开发工具【免费下载链接】openblocks The Open Source Retool Alternative项目地址https://gitcode.com/gh_mirrors/op/openblocks点击查看免费下载Openblocks 内置了 lodash、moment、uuid、numbro、papaparse 等常用 JavaScript 库开发者可直接在查询与组件属性表达式中使用对于内置库未覆盖的场景Openblocks 支持通过 URL 手动引入任意第三方库加载范围可精确控制到单个应用应用级或整个工作区工作区级。本文将以 cowsay 为例完整演示两种引入方式并结合client前端与server/api-service后端的源码深入讲解外部库从输入 URL到沙箱执行的完整链路与安全边界帮助你在自建应用中安全、高效地复用社区生态。内置 JavaScript 库开箱即用Openblocks 为常见场景预置了一批 JS 库无需任何配置即可在 JS 查询、代码编辑器以及组件属性表达式中直接调用。根据官方文档内置库清单及版本如下库官方文档版本lodashlodash 官方文档4.17.21momentmoment 官方文档2.29.3uuiduuidjs/uuid8.3.2支持 v1/v3/v4/v5numbronumbro 格式化文档2.3.6papaparsePapa Parse 文档5.3.2对应前端文案en.ts也明确提示lodash, moment, uuid, numbro 内置在系统中可直接使用。这五类库基本覆盖了日常低代码开发中的高频诉求lodash数组/对象/字符串处理、深拷贝、节流防抖等工具函数moment日期时间解析、格式化与计算uuid按 v1/v3/v4/v5 算法生成唯一标识numbro数字格式化货币、百分比、千分位等papaparseCSV 的解析与序列化适合在应用中处理表格数据的导入导出。需要留意的是这些内置库与手动引入的外部库一样都是在应用初始化之前加载的见 preLoadComp.tsx 的预加载机制因此库的数量和体积会影响应用启动性能应按需引入而非盲目堆叠。手动引入第三方库两种作用域当内置库无法满足需求时Openblocks 支持配置预加载preloadJavaScript 库作用域分为应用级与工作区级两种应用级App-level库只在该应用内加载生效。应用 A 配置的库应用 B 无法使用隔离性最强适合仅在单个应用内使用的专用库。工作区级Workspace-level打开工作区内任意应用时都会加载这些库所有应用均可访问。由于每个应用打开时都要加载并执行若其中包含复杂且并非每个应用都用到的 JS 函数会对应用性能产生一定影响因此建议只把全局通用的库提升到工作区级。从源码角度看这两级配置最终都会汇聚到同一条加载链路上工作区级配置保存在orgCommonSettings组织公共设置中应用级配置保存在应用自身的libs组件状态中。执行时由 PreloadComp.run() 统一处理async run(id: string) { const { orgCommonSettings {} } getGlobalSettings(); const { preloadCSS, preloadJavaScript, preloadLibs, runJavaScriptInHost } orgCommonSettings; await this.children.css.run(id, preloadCSS || ); await this.children.libs.run(id, preloadLibs || [], !!runJavaScriptInHost); await this.children.script.run(id, preloadJavaScript || , !!runJavaScriptInHost); }其中preloadLibs就是工作区级的库 URL 列表而应用级列表由libs组件维护runJavaScriptInHost是工作区高级设置决定外部库运行在沙箱中还是宿主环境中详见下文沙箱与受限全局变量。引入第三方库前必须了解的约束在动手添加 URL 之前有几个官方强调的前提条件必须先确认否则很可能添加成功但用不了外部库在浏览器中加载和执行NodeJS 专属库依赖fs、path、process等 Node 内置模块当前不支持。外部库的 URL 必须支持跨域CORS。加载过程本质是fetch(url)拉取脚本文本见 jsLibraryUtils.ts因此 CDN 或自建静态资源服务必须允许跨域访问。库的导出必须直接挂在window对象上例如window.cowsay ...仅声明var xxx xxx之类的全局变量不会生效。源码层面preLoadComp.tsx 在执行脚本时会通过onSetGlobalVars回调记录写入沙箱 window 的全局变量名用于在界面中展示Exported as信息这也印证了导出必须写入 window 才能被识别与使用。外部库运行在受限沙箱环境中以下全局变量不可用parent、document、location、chrome、setTimeout、fetch、setInterval、clearInterval、setImmediate、XMLHttpRequest、importScripts、Navigator、MutationObserver这些限制在核心沙箱实现 evalScript.tsx 中有直接对应functionBlacklist包含top、parent、document、location、chrome、fetch、XMLHttpRequest、importScripts、Navigator、MutationObserver表达式作用域expressionBlacklist还会额外拦截setTimeout、setInterval、setImmediate。当脚本访问这些黑名单变量时代理Proxy会返回createBlackHole()构造的黑洞对象从而阻断对真实浏览器的访问。这意味着依赖 DOM 操作或网络请求的传统库如直接操作document的 UI 类库在沙箱中无法正常工作。URL 输入有前端校验。在 JSLibraryModal.tsx 中输入的 URL 必须匹配/^https?./才被接受否则提示Invalid URL若库已存在会提示JavaScript library already exists。官方推荐使用 unpkg.com 或 jsdelivr.net 提供的 CDN 地址见 en.ts 的输入提示。实战一应用级引入以 cowsay 为例官方文档以 cowsay 为例演示应用级引入这里完整还原操作步骤。前置素材cowsay GitHub 仓库piuccio/cowsay库的 UMD 构建地址https://unpkg.com/cowsay1.5.0/build/cowsay.umd.js操作步骤打开应用进入编辑器导航到设置Settings页面在JavaScript library标签页下点击加号。将 cowsay 的链接粘贴到输入框点击Add New完成添加。界面上还会展示推荐库列表点击下载图标即可快速安装推荐的 JS 库推荐库由服务端下发详见下文推荐库与元信息接口。创建一个JS 查询JS query插入如下代码调用 cowsay 生成 ASCII 奶牛图案return cowsay.say({ text: hello openblocks });也可以在文本组件的值value表达式中直接调用cowsay.say()获得相同效果{{ cowsay.say({ text: hello openblocks }) }}需要再次强调cowsay 是在应用级引入的因此工作区内其他应用无法使用它。若多个应用都需要该库应改用工作区级引入。实战二工作区级引入工作区级库对所有应用生效适合全站通用的工具库如 lodash 之外的自定义工具集。操作步骤进入 Openblocks 首页选择Settings设置 Advanced高级。在JavaScript library标签页下点击Add。粘贴第三方 JS 库的链接点击Add New将其添加到工作区同样也可以通过下载图标快速添加推荐库。添加完成后工作区内任意应用均可访问这些库。从源码看工作区级配置对应 AdvancedSetting.tsxpreloadLibs以 URL 字符串数组的形式保存通过setCommonSettings写回组织公共设置已添加的库以树形列表展示JSLibraryTree.tsx列表会自动从 URL 中解析出库名与版本parseJSLibraryURL并支持查看文档、删除等操作。相关字段定义见 commonSettingApi.tspreloadCSS、preloadJavaScript、preloadLibs、runJavaScriptInHost等。底层原理从输入 URL 到沙箱执行理解了操作步骤后再看一遍完整的技术链路有助于排查添加成功但调用失败类问题。1. 前端加载执行链核心实现在 preLoadComp.tsxfetchJSLibrary(url)jsLibraryUtils.ts直接fetch(url)并以纯文本方式拉取脚本源码这就是要求 URL 支持跨域的原因loadScript(url)preLoadComp.tsx#L51-L73通过evalFunc(code, {}, {}, { scope: function, disableLimit: this.runInHost, onSetGlobalVars })在沙箱中执行脚本。disableLimit为true即工作区开启了runJavaScriptInHost时沙箱限制被放开脚本可以访问真实浏览器全局否则按黑名单拦截。每个成功加载的 URL 会记录在success表中避免重复执行loadAllLibs()preLoadComp.tsx#L75-L87将应用级与工作区级全部 URL 并行执行Promise.all加载单个库失败只记录日志不会阻断其他库。2. 沙箱与黑名单核心沙箱位于 evalScript.tsx。脚本在with(this){ return (function(){ use strict; ... }).call(this); }形式下执行this是一个 Proxy 包装的 mock window读取黑名单变量时返回createBlackHole()黑洞对象避免脚本获得真实浏览器能力evalScript.tsx#L74-L77向沙箱 window 写入全局变量时触发onSetGlobalVars回调前端借此在树形列表中展示Exported as对受保护变量执行set/defineProperty/deleteProperty会被抛错拒绝setPrototypeOf同样被禁止disableLimittrue时走getPropertyFromNativeWindow直接读取真实 window 属性相当于脱离沙箱、在宿主中运行。3. URL 解析与元信息展示JSLibraryTree.tsx 通过parseJSLibraryURLjsLibraryUtils.ts从 URL 中解析库名与版本正则/(?:npm\/|gh\/|unpkg\.com\/)([^/])(?:([^/]))?/i支持cdn.jsdelivr.net/npm/jquery3.2.1、unpkg.com/jquery3.2.1等常见 CDN 形态未显式带版本时按latest处理对应测试见 jsLibraryUtils.test.ts。随后前端调用/misc/js-library/metas获取库的描述、主页与最新版本信息用于展示。4. 后端推荐库与元信息接口后端 JsLibraryController.java 提供两个接口GET /misc/js-library/metas?namea,b,c按库名查询元信息数据来自 npm registryhttps://registry.npmjs.com/name包含描述、主页回退到 repository URL与dist-tags.latest版本并带有一天的本地缓存GET /misc/js-library/recommendations返回推荐库列表推荐库名称与下载地址硬编码在 recommendedJsLibraries.json目前包含jspdf、jmespath、jsonpath、i18next四个库元信息同样通过 npm registry 抓取并缓存。前端 jsLibraryApi.ts 的fetchMetas/fetchRecommends即对应这两个接口。常见问题与排查建议现象可能原因与排查方向输入 URL 后提示Invalid URL前端校验要求 URL 以https?开头检查是否缺少协议头或包含非法字符提示JavaScript library already exists该 URL 已在应用级或工作区级列表中存在可先在列表中删除再重新添加添加成功但调用时报xxx is not defined库未通过window.xxx导出var xxx不生效或库依赖document等沙箱受限变量在沙箱中被黑洞拦截NodeJS 专属库同样无法运行安装失败提示installation failed云端环境下多为沙箱中不可用自托管环境可查看具体错误消息。若工作区开启了runJavaScriptInHost选项外部库将以宿主模式运行限制更少但安全性需自行评估页面加载变慢工作区级库会在每个应用初始化前加载执行检查是否把只在个别应用使用的复杂库提升到了工作区级参考源码路径前端预加载组件client/packages/openblocks/src/comps/comps/preLoadComp.tsxURL 解析与拉取工具client/packages/openblocks/src/util/jsLibraryUtils.ts 及测试 jsLibraryUtils.test.ts添加库弹窗client/packages/openblocks/src/components/JSLibraryModal.tsx库列表展示client/packages/openblocks/src/components/JSLibraryTree.tsx沙箱执行引擎client/packages/openblocks-core/src/eval/utils/evalScript.tsx工作区高级设置client/packages/openblocks/src/pages/setting/advanced/AdvancedSetting.tsx公共设置字段定义client/packages/openblocks/src/api/commonSettingApi.ts后端元信息与推荐接口server/api-service/openblocks-server/src/main/java/com/openblocks/api/misc/JsLibraryController.java推荐库清单server/api-service/openblocks-server/src/main/resources/recommendedJsLibraries.json官方文档原文docs/build-apps/use-third-party-libraries.md赞分享低代码后端前端开发工具【免费下载链接】openblocks The Open Source Retool Alternative项目地址https://gitcode.com/gh_mirrors/op/openblocks点击查看免费下载相关推荐Monty 内置标准库模块清单与沙箱导入边界解析Monty 内置标准库模块清单与沙箱导入边界解析 Monty一个以 Rust 编写、面向 AI 场景的最小化安全 Python 解释器不提供可扩展的模块搜索语言运行时编程语言Agent 沙箱人工智能ScriptCat 脚本执行架构解析三条执行路径与 with(){} 沙箱编译原理ScriptCat 脚本执行架构解析三条执行路径与 with {} 沙箱编译原理 ScriptCat脚本猫是一个可执行用户脚本的浏览器扩展。本文基于仓库中前端开发者工具插件系统AgentScope 怎么配置 Apple Container 沙箱工作区运行工具调用AgentScope 怎么配置 Apple Container 沙箱工作区运行工具调用 在 Apple silicon 的 Mac 上跑 AgentScope人工智能大模型AI Agent多智能体Agent 框架Agent 编排工具调用RAGMCP 服务语音创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考