选择的主题: 选项A – 纯技术: "为浏览器工具构建安全 AI 代理工具

2026年8月9日2 次浏览来源:Dev.to阅读原文

这是最强的选择。

它教导一种有形的,高度要求的技巧(API密钥安全),带有实际的代码,使AfriWidget的回路感觉像一个自然的,中性的引用而不是销售投出.

以下是这篇文章, 改写为严格技术性,客观, 停止曝光您的 AI API 密钥: 与 Cloudflare 工人建立安全的代理 我们都看到了。

您打开浏览器的 DevTools 在“ 切换” AI 启动的登陆页上, 检查 Network 标签, 并找到一个直接 POST 请求 api. openai.com 在信头中包含一个 plaintext API 密钥 。

这是现代网络发展中最常见的、最危险的错误之一。

曝光您的 LLM API 关键客户端 是公开邀请滥用,导致被窃入的信用,高额的账单, 和潜在的账户暂停。

标准解决方案是后端为Frontend(BFF)代理模式.

但是,你如何实际地,廉价地,安全地执行它而不旋转一个沉重的快递服务器?

在此指南中,我将用 Cloudflare Workers 建造一个轻量级,无服务器的 AI 代理, 安全地从您的浏览器计算器和工具中调用 Groq(或 OpenAI) API 。

The Architecture: How It Works 与其直接与AI提供者交谈,我们引入一个无国籍的中件层: 工人的责任:从前端接收已消毒的计算上下文(数字,不是PII).

通过环境变量附加密钥 API 。

将请求转发给 LLM 提供者 。

把生成的洞察力流回客户端 第1步: 脚手架上云旗工人 我们将使用新的创建-云层CLI。

确保安装了节点.js.

选择"Hello World"工作者和TypeScript.

一旦进入目录,就安装"Groq SDK:步骤2:保证API密钥永不硬码密钥".

Cloudflare工人安全地暴露了环境变量。

更新您的 wrangler.toml: 对于制作,设定为从仪表板上隐藏它的实际秘密: 第3步:写工人逻辑 我们需要一个接受 POST 请求,验证输入,给 Groq 打电话,并返回结果的结束点.

以下是完整的 src/index.ts 执行: 步骤 4: 从您的前端调用代理服务器, 现在, 回到基于浏览器的计算器中( Vanilla JS, React, 或 Vue), 您只是调用您的已部署的工人 URL 。

这里有一个最小的前端获取示例: Crucially:注意前端永远不会知道API密钥.

即使攻击者检查了这个网络请求,他们也只看到给你的工人打电话,而不是给格罗克/OpenAI.

权衡和考虑 虽然这种模式非常有效,但不是魔法。

注意以下内容: 添加代理的“ 考虑延迟” 引入一个额外的网络 hop 。

与Cloudflare的全球网络相通,这通常 < 50ms,但值得测量.

Cost Cloudflare工人拥有宽大的免费等级(100k要求/天).

但是,你仍然在支付 LLM 标志。

执行严格的最大值限制。

没有账户的利率限制,你如何停止虐待?

你可以使用Workers KV执行一个简单的基于IP的限速器来防止单个IP耗尽你的信用. (简体中文) 如果您的前端是在特定域上, 请将 Access- Control- Allow- Origin 限制在该域上, 而不是在生产中使用 * 。

现实世界的执行 这个精确的架构目前正在AfriWidget.com上运行.

他们使用Groq代用来为人工智能解释他们的复合利息和GPA计算器.

前端只发送数字上下文——如:{主:5000,率:7,年:20}到代理.

工人附加系统即时,称格罗克的"Llama 3"模型,并流回对财务预测的平英语解释.

值得注意的是,它们不会在代理日志的任何地方存储用户输入或名称,即使工人日志被泄露,也不会泄露任何个人可识别的信息(PII)。

最终想法 :

分享