Label Studio Interface 外部库与 API 接入指南API origins、外部脚本与本地打包三条路径详解【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio导读Label Studio 的 Interface自定义标注界面以沙箱化模块的形式运行在编辑器中默认无出站网络、无法加载第三方代码这是一道刻意设计的安全边界。本文围绕官方指南梳理的三条接入路径——API origins调用外部 HTTP 服务、Advanced external scripts从 CDN 加载第三方包、本地打包Bundle 本地依赖——讲解各自的适用场景、配置步骤、规则约束与安全边界并给出点云渲染等实战示例与常见问题排查表。读完本文你将能根据安全要求与网络环境为 Interface 正确、安全地引入外部库与网络服务并避免“把主机白名单加错位置导致静默失效”这一最常见误区。核心提示调用外部 API与使用外部包在配置位置上完全不同。在错误的配置区添加主机白名单会静默失效下文将逐一说明两者的区别。一、三条路径总览先选路径再谈配置Interface 作为沙箱模块默认不具备出站网络与第三方代码加载能力。当界面需要外部 API 或第三方库时按需在下列三个位置之一启用能力即可你的需求典型示例启用位置调用外部 HTTP 服务用fetch()请求你的 ML 后端、地理编码服务、内部微服务、瓦片服务Organization Settings Interfaces → API origins运行时从 CDN 加载第三方包通过script标签从cdn.jsdelivr.net拉取three.js或d3Organization Settings Interfaces → Advanced: external scripts使用无外部网络的第三方包将three.js打进Interface 内部并发布无需任何配置代码完全自包含如何选择需要通过 HTTP 调用服务→API origins路径 1。需要使用第三方库且接受信任 CDN→Advanced: external scripts路径 2。需要使用第三方库但要求无外部依赖 / 离线部署 / 严格安全→本地打包路径 3。这是推荐的默认路径。三条路径可以组合使用。例如一个点云 Interface 可以本地打包three.js路径 3同时在API origins路径 1中白名单你的瓦片/资产服务器以便获取需要渲染的数据。我能用第三方库吗可以。Interface 源码不能使用import/require因为每个 Interface 是一个自包含模块而非 ES 模块——这是对模块语法的限制第三方代码本身没有问题。可通过白名单 CDN 加载路径 2或打包进 Interface路径 3来引入库。二、路径 1调用外部 API / 服务API origins当 Interface 需要通过fetch、XHR或WebSocket与 HTTP 服务通信时使用本路径。典型场景把选中的区域发送给 ML 后端做推理、对地址做地理编码、拉取地图瓦片。配置步骤进入Organization Settings Interfaces → API origins。添加精确的 originscheme 和 host 都要完整例如https://api.example.com每条记录一个 host。保存。之后 Interface 中对该 origin 的fetch()调用即可成功。规则明细规则详情格式完整 origin必须包含 schemehttps://host通配符不允许不支持*或*.example.com每个 host 需显式列出你的 LS 服务器始终自动允许。不要添加它只列出第三方 host空列表无出站网络Interface 只能访问你的 Label Studio 服务器重要边界API origins 只管数据请求。它不能让你从该 host 加载script。如果你在这里添加包 CDN 期望加载库不会发生任何事这种情况请走路径 2。示例要把自定义 ML 后端接入 Interface就在此处白名单后端的 origin。这样 Interface 才能把区域数据负载发送给它并渲染预测结果。这里并没有安装任何包只是 API 调用。三、路径 2从 CDN 加载包Advanced: external scripts当你希望运行时直接从 CDN 拉取库、并且完全信任该 host时使用本路径。配置步骤进入Organization Settings Interfaces → Advanced: external scripts。打开Allow external scripts / stylesheets开关。添加一个或多个脚本 origin例如https://cdn.jsdelivr.net。在 Interface 中从该 origin 加载库例如注入script并使用其全局变量。规则明细规则详情scheme必须是https://HTTP origin 会被拒绝格式仅 origin不允许路径、查询字符串、凭据或 fragment通配符不允许开关复选框未勾选时 origin 被忽略关闭开关会在保存时清空列表与 API origins 的区别这是一个完全不同的设置。此处列出的 host 可以向你的 Interface 提供可执行代码而列在API origins下的 host 不能反之亦然。⚠️ 安全警告从这些 origin 加载的脚本以 Interface 的完整权限运行可以读取 Interface 正在渲染的任何任务数据。只添加你完全信任的 host。大多数组织应保持此区块禁用优先选择路径 3。四、路径 3本地打包包无需白名单、无网络推荐用于锁定环境、本地部署或 air-gapped离线部署也适合任何不想开放出站 origin 或信任 CDN 的团队。因为 Interface 是单一自包含模块第三方库可以住在你的 Interface 代码内部。库成为你发布内容的一部分无 CDN、无script标签、无白名单条目标注时也无出站网络。具体做法获取一个挂载到变量的浏览器构建预先构建好的单文件dist或用打包器生成例如esbuild --bundle --formatiife --global-nameMyLib。Interface 源码会被编译但不会替你打包所以需要先把依赖解析进这一个文件。避免使用ES-module构建不支持import/export语句。将该代码包含进 Interface 源码并通过它定义的变量/全局对象引用库。你自己的代码中不要使用import/require。照常验证、预览、发布通过 Interfaces 编辑器或label-studio-sdk interface validate/preview/sync命令。库随已发布的 Interface 一起分发。这种方式最适合什么纯计算与渲染类库日期/数字工具、校验库如zod、图表/几何库、浏览器内渲染器。标准浏览器渲染 API沙箱内可用 Canvas 和 WebGL因此像three.js这样的库可以在 Interface 内部渲染。iframe capabilities列表约束的是摄像头、麦克风等设备功能不影响 2D/3D 渲染。需要牢记的约束使用 IIFE / global 构建。不支持import/export语句依赖顶层module.exports或require(...)的构建可能无法通过校验。标注时也无法require()某个 npm 包请把依赖打包进文件而不是运行时 require并通过它定义的变量/全局对象引用。库必须能在沙箱内的浏览器中运行不能有 Node.js API、不能访问父页面的window/document、不能有持久化localStorage/sessionStorage库自身发起的任何网络请求仍受API origins路径 1约束。打包后的代码成为 Interface 存储主体的一部分。虽然没有固定大小限制但超大 bundle 会增加加载与解析时间需要注意控制体积。代码级佐证沙箱化模块的边界与存储机制在仓库后端有对应实现。例如 label_studio/io_storages/react_code_proxy.py 中的generate_react_code_token为 ReactCode iframe 生成作用域受限的 JWT绑定当前用户、项目与组织aud限定为react-code-resolveTTL 默认 3600 秒、可配置范围 60–86400 秒iframe 在沙箱内用该 token 代替会话 Cookie 来解析存储 URI——这正是Interface 只能通过受控渠道访问 Label Studio 自身能力这一安全设计的后端落地。从源码结构可以推断Interface 的一切外部能力扩展都需要经过服务端的显式授权机制而非界面代码自行突破沙箱。五、实战示例渲染大型点云假设需要审查 LiDAR 点云数据并打算用three.js渲染它们离线 / 严格安全场景本地打包three.js路径 3。无需任何白名单渲染器随 Interface 一起分发。如果点云数据来自某个服务把该数据 host 加到API origins路径 1。可接受 CDN 场景在Advanced: external scripts路径 2下白名单 CDN并从那里加载three.js。点云渲染之所以可行是因为沙箱中可用 WebGL。真正的限制在于数据规模与性能无论库如何打包超大点云都会压榨浏览器/WebGL 内存因此请用有代表性的数据测试必要时降采样或切片。既有先例一个重型第三方渲染器已经内置在标准 Interface 中Document AI模板用PDF.js从其打包代码中渲染 PDF。这是大型库可以在 Interface 内运行的现成证明——包括内部编译或把工作卸载到 web worker 的库。仓库中的 html_pdf/config.xml 展示了与之对应的 PDF 标注模板HyperText namepdf value$pdf/配合Rating/Choices可见 PDF 内容作为任务数据进入界面、由内置渲染器处理的完整链路。六、故障排查速查表症状可能原因修复fetch()我的服务被阻止host 不在API origins或被错误地列在external scripts下在API origins下添加精确 origin路径 1CDN 的script加载不出来但我已把 host 加到了API originsAPI origins只管理数据请求不管脚本加载把 host 加到Advanced: external scripts并打开开关路径 2提示 Interfaces cant use packages误把不能用import理解成禁止所有第三方代码你不能importnpm 包但可以打包进来路径 3或从白名单 CDN 加载路径 2打包的库在应用里正常但本地校验失败构建依赖顶层module.exports/require使用IIFE / global构建如esbuild --formatiife --global-name…并引用它定义的变量库需要 Node API 或父级window它不兼容浏览器/沙箱环境使用浏览器构建任何网络调用都保持在API origins之后七、要点回顾Interface 运行在无网络、无第三方代码的沙箱中这是默认安全姿态可按需放宽。调用服务用API origins加载脚本用Advanced: external scripts两者不可混用、不可互相替代。本地打包路径 3是严格安全环境下的推荐默认无白名单、无 CDN、无出站网络Canvas 与 WebGL 均可用。沙箱是模块语法限制不支持import/require不是禁止第三方库——IIFE/global 构建与 CDN 加载都是合法途径。所有外部能力扩展均受服务端授权约束如 ReactCode 的受限 JWT 代理机制切勿在界面代码中尝试绕过沙箱。本文基于仓库文档 docs/source/guide/interfaces-libraries.md 撰写并辅以仓库后端实现react_code_proxy.py与标注模板示例html_pdf/config.xml作为佐证读者可循路径深入阅读。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Label Studio Interface 外部库与 API 接入指南：API origins、外部脚本与本地打包三条路径详解
Label Studio Interface 外部库与 API 接入指南API origins、外部脚本与本地打包三条路径详解【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio导读Label Studio 的 Interface自定义标注界面以沙箱化模块的形式运行在编辑器中默认无出站网络、无法加载第三方代码这是一道刻意设计的安全边界。本文围绕官方指南梳理的三条接入路径——API origins调用外部 HTTP 服务、Advanced external scripts从 CDN 加载第三方包、本地打包Bundle 本地依赖——讲解各自的适用场景、配置步骤、规则约束与安全边界并给出点云渲染等实战示例与常见问题排查表。读完本文你将能根据安全要求与网络环境为 Interface 正确、安全地引入外部库与网络服务并避免“把主机白名单加错位置导致静默失效”这一最常见误区。核心提示调用外部 API与使用外部包在配置位置上完全不同。在错误的配置区添加主机白名单会静默失效下文将逐一说明两者的区别。一、三条路径总览先选路径再谈配置Interface 作为沙箱模块默认不具备出站网络与第三方代码加载能力。当界面需要外部 API 或第三方库时按需在下列三个位置之一启用能力即可你的需求典型示例启用位置调用外部 HTTP 服务用fetch()请求你的 ML 后端、地理编码服务、内部微服务、瓦片服务Organization Settings Interfaces → API origins运行时从 CDN 加载第三方包通过script标签从cdn.jsdelivr.net拉取three.js或d3Organization Settings Interfaces → Advanced: external scripts使用无外部网络的第三方包将three.js打进Interface 内部并发布无需任何配置代码完全自包含如何选择需要通过 HTTP 调用服务→API origins路径 1。需要使用第三方库且接受信任 CDN→Advanced: external scripts路径 2。需要使用第三方库但要求无外部依赖 / 离线部署 / 严格安全→本地打包路径 3。这是推荐的默认路径。三条路径可以组合使用。例如一个点云 Interface 可以本地打包three.js路径 3同时在API origins路径 1中白名单你的瓦片/资产服务器以便获取需要渲染的数据。我能用第三方库吗可以。Interface 源码不能使用import/require因为每个 Interface 是一个自包含模块而非 ES 模块——这是对模块语法的限制第三方代码本身没有问题。可通过白名单 CDN 加载路径 2或打包进 Interface路径 3来引入库。二、路径 1调用外部 API / 服务API origins当 Interface 需要通过fetch、XHR或WebSocket与 HTTP 服务通信时使用本路径。典型场景把选中的区域发送给 ML 后端做推理、对地址做地理编码、拉取地图瓦片。配置步骤进入Organization Settings Interfaces → API origins。添加精确的 originscheme 和 host 都要完整例如https://api.example.com每条记录一个 host。保存。之后 Interface 中对该 origin 的fetch()调用即可成功。规则明细规则详情格式完整 origin必须包含 schemehttps://host通配符不允许不支持*或*.example.com每个 host 需显式列出你的 LS 服务器始终自动允许。不要添加它只列出第三方 host空列表无出站网络Interface 只能访问你的 Label Studio 服务器重要边界API origins 只管数据请求。它不能让你从该 host 加载script。如果你在这里添加包 CDN 期望加载库不会发生任何事这种情况请走路径 2。示例要把自定义 ML 后端接入 Interface就在此处白名单后端的 origin。这样 Interface 才能把区域数据负载发送给它并渲染预测结果。这里并没有安装任何包只是 API 调用。三、路径 2从 CDN 加载包Advanced: external scripts当你希望运行时直接从 CDN 拉取库、并且完全信任该 host时使用本路径。配置步骤进入Organization Settings Interfaces → Advanced: external scripts。打开Allow external scripts / stylesheets开关。添加一个或多个脚本 origin例如https://cdn.jsdelivr.net。在 Interface 中从该 origin 加载库例如注入script并使用其全局变量。规则明细规则详情scheme必须是https://HTTP origin 会被拒绝格式仅 origin不允许路径、查询字符串、凭据或 fragment通配符不允许开关复选框未勾选时 origin 被忽略关闭开关会在保存时清空列表与 API origins 的区别这是一个完全不同的设置。此处列出的 host 可以向你的 Interface 提供可执行代码而列在API origins下的 host 不能反之亦然。⚠️ 安全警告从这些 origin 加载的脚本以 Interface 的完整权限运行可以读取 Interface 正在渲染的任何任务数据。只添加你完全信任的 host。大多数组织应保持此区块禁用优先选择路径 3。四、路径 3本地打包包无需白名单、无网络推荐用于锁定环境、本地部署或 air-gapped离线部署也适合任何不想开放出站 origin 或信任 CDN 的团队。因为 Interface 是单一自包含模块第三方库可以住在你的 Interface 代码内部。库成为你发布内容的一部分无 CDN、无script标签、无白名单条目标注时也无出站网络。具体做法获取一个挂载到变量的浏览器构建预先构建好的单文件dist或用打包器生成例如esbuild --bundle --formatiife --global-nameMyLib。Interface 源码会被编译但不会替你打包所以需要先把依赖解析进这一个文件。避免使用ES-module构建不支持import/export语句。将该代码包含进 Interface 源码并通过它定义的变量/全局对象引用库。你自己的代码中不要使用import/require。照常验证、预览、发布通过 Interfaces 编辑器或label-studio-sdk interface validate/preview/sync命令。库随已发布的 Interface 一起分发。这种方式最适合什么纯计算与渲染类库日期/数字工具、校验库如zod、图表/几何库、浏览器内渲染器。标准浏览器渲染 API沙箱内可用 Canvas 和 WebGL因此像three.js这样的库可以在 Interface 内部渲染。iframe capabilities列表约束的是摄像头、麦克风等设备功能不影响 2D/3D 渲染。需要牢记的约束使用 IIFE / global 构建。不支持import/export语句依赖顶层module.exports或require(...)的构建可能无法通过校验。标注时也无法require()某个 npm 包请把依赖打包进文件而不是运行时 require并通过它定义的变量/全局对象引用。库必须能在沙箱内的浏览器中运行不能有 Node.js API、不能访问父页面的window/document、不能有持久化localStorage/sessionStorage库自身发起的任何网络请求仍受API origins路径 1约束。打包后的代码成为 Interface 存储主体的一部分。虽然没有固定大小限制但超大 bundle 会增加加载与解析时间需要注意控制体积。代码级佐证沙箱化模块的边界与存储机制在仓库后端有对应实现。例如 label_studio/io_storages/react_code_proxy.py 中的generate_react_code_token为 ReactCode iframe 生成作用域受限的 JWT绑定当前用户、项目与组织aud限定为react-code-resolveTTL 默认 3600 秒、可配置范围 60–86400 秒iframe 在沙箱内用该 token 代替会话 Cookie 来解析存储 URI——这正是Interface 只能通过受控渠道访问 Label Studio 自身能力这一安全设计的后端落地。从源码结构可以推断Interface 的一切外部能力扩展都需要经过服务端的显式授权机制而非界面代码自行突破沙箱。五、实战示例渲染大型点云假设需要审查 LiDAR 点云数据并打算用three.js渲染它们离线 / 严格安全场景本地打包three.js路径 3。无需任何白名单渲染器随 Interface 一起分发。如果点云数据来自某个服务把该数据 host 加到API origins路径 1。可接受 CDN 场景在Advanced: external scripts路径 2下白名单 CDN并从那里加载three.js。点云渲染之所以可行是因为沙箱中可用 WebGL。真正的限制在于数据规模与性能无论库如何打包超大点云都会压榨浏览器/WebGL 内存因此请用有代表性的数据测试必要时降采样或切片。既有先例一个重型第三方渲染器已经内置在标准 Interface 中Document AI模板用PDF.js从其打包代码中渲染 PDF。这是大型库可以在 Interface 内运行的现成证明——包括内部编译或把工作卸载到 web worker 的库。仓库中的 html_pdf/config.xml 展示了与之对应的 PDF 标注模板HyperText namepdf value$pdf/配合Rating/Choices可见 PDF 内容作为任务数据进入界面、由内置渲染器处理的完整链路。六、故障排查速查表症状可能原因修复fetch()我的服务被阻止host 不在API origins或被错误地列在external scripts下在API origins下添加精确 origin路径 1CDN 的script加载不出来但我已把 host 加到了API originsAPI origins只管理数据请求不管脚本加载把 host 加到Advanced: external scripts并打开开关路径 2提示 Interfaces cant use packages误把不能用import理解成禁止所有第三方代码你不能importnpm 包但可以打包进来路径 3或从白名单 CDN 加载路径 2打包的库在应用里正常但本地校验失败构建依赖顶层module.exports/require使用IIFE / global构建如esbuild --formatiife --global-name…并引用它定义的变量库需要 Node API 或父级window它不兼容浏览器/沙箱环境使用浏览器构建任何网络调用都保持在API origins之后七、要点回顾Interface 运行在无网络、无第三方代码的沙箱中这是默认安全姿态可按需放宽。调用服务用API origins加载脚本用Advanced: external scripts两者不可混用、不可互相替代。本地打包路径 3是严格安全环境下的推荐默认无白名单、无 CDN、无出站网络Canvas 与 WebGL 均可用。沙箱是模块语法限制不支持import/require不是禁止第三方库——IIFE/global 构建与 CDN 加载都是合法途径。所有外部能力扩展均受服务端授权约束如 ReactCode 的受限 JWT 代理机制切勿在界面代码中尝试绕过沙箱。本文基于仓库文档 docs/source/guide/interfaces-libraries.md 撰写并辅以仓库后端实现react_code_proxy.py与标注模板示例html_pdf/config.xml作为佐证读者可循路径深入阅读。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考