网络安全应用安全后端【免费下载链接】capFree, open-source and self-hosted CAPTCHA alternative to reCAPTCHA. Privacy-first and powered by proof-of-work and instrumentation challenges.项目地址https://gitcode.com/gh_mirrors/cap13/cap点击查看免费下载Cap 是一款免费、开源、可自托管的 CAPTCHA 替代方案基于工作量证明Proof-of-Work与 instrumentation 行为检测构建。本文围绕其编程模式展开讲解如何在客户端 JavaScript 中通过new Cap({ ... })创建实例、调用solve()求解质询从而在不渲染任何可见验证组件的情况下完成人机验证并深入剖析其底层调用链、事件模型与令牌生命周期同时给出可直接落地的表单集成与服务端校验方案。什么是编程模式无可见组件的验证常规的 Cap 集成方式是在页面中放置cap-widget自定义元素用户点击后弹出验证流程而编程模式Programmatic Mode面向不希望出现任何可见 UI的场景例如保护发帖、评论、投票等后台操作在 SPA 应用提交表单前静默完成验证作为全局请求拦截器的一部分在 AJAX 请求前获取令牌。其核心思路很简单Cap 会在内部创建一个隐藏的cap-widget元素用它去请求、求解质询再通过 JS API 把令牌交给你。这段逻辑可以直接在 widget/src/src/cap.js 的Cap类实现中看到——new Cap(config)内部执行document.createElement(cap-widget)随后widget.style.display none并挂载到document.documentElement下把solve、reset、addEventListener绑定到该隐藏组件上从而实现无界面求解。快速开始最小可用示例安装并引入组件npm 包名为cap.js/widgetUMD/CJS 入口为cap.min.js类型定义在 widget/src/cap.d.ts# npm npm i cap.js/widget # 或 pnpm pnpm add cap.js/widget # 或 bun bun add cap.js/widget!-- CDN 方式生产环境建议锁定具体版本 -- script typemodule srchttps://cdn.jsdelivr.net/npm/cap.js/widget/script随后在客户端 JavaScript 中创建实例并求解const cap new Cap({ apiEndpoint: https://your-instance/site-key/, // 或者使用代理路径apiEndpoint: /api/, }); const solution await cap.solve(); console.log(solution.token); // 把令牌随表单或请求一起提交apiEndpoint是必填项指向你的 Cap 部署端点。对 Standalone 实例而言其格式为https://your-instance/site-key/末尾必须带/源码会在缺失时自动补上见 widget/src/src/cap.js。如果既没有提供apiEndpoint、也没有设置window.CAP_CUSTOM_FETCH构造函数会直接抛出Missing API endpoint. Either custom fetch or an API endpoint must be provided.见 widget/src/src/cap.js。监听事件progress进度与求解状态编程模式同样支持事件监听。所有事件均以CustomEvent形式派发detail携带载荷const cap new Cap({ apiEndpoint: https://your-instance/site-key/, // 或apiEndpoint: /api/, }); cap.addEventListener(progress, (event) { console.log(求解中… 已完成 ${event.detail.progress}%); }); cap.addEventListener(solve, (event) { console.log(已获取令牌:, event.detail.token); }); cap.addEventListener(error, (event) { console.error(验证失败:, event.detail.message, event.detail.code); });Cap 组件支持的事件见 docs/zh/guide/widget.md列表如下事件触发时机Detailsolve质询求解成功{ token: string }progress求解过程中的进度更新{ progress: number }0100error发生错误{ isCap, code, message }reset组件重置回初始状态{}其中error事件的detail.code是机器可读的错误码完整枚举定义在 widget/src/cap.d.ts 的CapErrorCode中包括missing_endpoint、network_error、challenge_parse_error、challenge_unsupported、solve_failed、instr_timeout、instr_blocked、redeem_failed、invalid_solution、invalid_expires、wasm_load_failed、worker_spawn_failed、unknown。据此你可以在前端针对性地给出用户提示或触发重试。支持的方法与参数详解new Cap({ ... }, el?)创建一个新的 Cap 实例。核心配置与对应的组件属性如下{ apiEndpoint: ..., // API 端点等价于验证组件的>form idpost-form textarea namecontent required/textarea button typesubmit发布/button /form script typemodule import https://cdn.jsdelivr.net/npm/cap.js/widget; const cap new Cap({ apiEndpoint: https://your-instance/site-key/, }); document.getElementById(post-form).addEventListener(submit, async (e) { e.preventDefault(); try { const { token } await cap.solve(); // 静默求解无可见组件 const formData new FormData(e.target); formData.append(cap-token, token); // 默认隐藏字段名即为 cap-token const res await fetch(/api/posts, { method: POST, body: formData }); if (res.ok) cap.reset(); // 令牌已消费重置以便下次重新求解 } catch (err) { console.error(验证未通过:, err); } }); /script服务端Bun Elysia 示例参见 demo/index.js在业务接口中校验令牌import { validateChallenge } from capjs-core; app.post(/api/posts, async ({ body, set }) { // 1. 校验令牌 const result await validateChallenge(SECRET, { token: body[cap-token] }, { consumeNonce }); if (!result.success) { set.status 400; return { success: false, reason: invalid_captcha }; } // 2. 校验通过继续业务逻辑 return { success: true }; });注意validateChallenge配合consumeNonce可以保证同一令牌只能被消费一次防重放令牌哈希与非一次性逻辑见 demo/index.js。关于服务端质询生成与验证的完整 API 说明可进一步阅读 docs/zh/guide/capjs-core.md。底层原理编程模式背后发生了什么从源码可以还原编程模式下一次完整solve()的调用链见 widget/src/src/cap.js请求质询向${apiEndpoint}challenge发起POST服务端返回质询参数含token、挑战数组、难度等同时组件会根据navigator.hardwareConcurrency初始化WorkerPoolworker 脚本由worker.js内联注入见 widget/src/src/worker.js。求解质询质询在 Web Worker 中求解优先使用 Rust 编译的 WASM 加速cap_wasm_bg.wasm求解进度通过progress事件回传0100%。提交答案兑换令牌把求解结果solutions以及 instrumentation 检测输出instrPOST 到${apiEndpoint}redeem服务端校验通过后返回正式的token与expires。令牌注入与过期回收组件把令牌写入隐藏输入框、缓存到token属性并依据expires设置自动reset()定时器。值得注意的实现细节触感反馈自动禁用编程模式下组件对用户不可见因此构造函数会为隐藏组件自动加上data-cap-disable-haptics属性避免产生无意义的振动见 widget/src/src/cap.js。隐藏字段名可配置隐藏输入框默认名为cap-token可通过data-cap-hidden-field-name覆盖见 widget/src/src/cap.js便于服务端按需解析。自定义 fetch 与严格 CSP可通过window.CAP_CUSTOM_FETCH接管组件的一切网络请求见 widget/src/src/cap.js在启用严格 Content-Security-Policy 的页面中可通过window.CAP_CSS_NONCE与window.CAP_SCRIPT_NONCE放行组件注入的style/scriptpako 回退与 instrumentation iframe。失败兜底单次solve()失败会抛出带code的错误如solve_failed提示自托管实例不可用见 widget/src/src/cap.js建议在业务代码中捕获并给予用户重试入口。编程模式 vs 验证组件模式如何选择对比维度验证组件模式cap-widget编程模式new Cap()可见 UI有用户点击/等待验证无静默在后台求解适用场景登录、注册、表单提交等面向用户的验证发帖、投票、AJAX 前置校验等后台操作集成方式HTML 标签 data-cap-api-endpoint属性JSnew Cap({ apiEndpoint })solve()令牌获取表单自动注入隐藏cap-token也可监听solveawait cap.solve()返回{ token }触感反馈默认开启可用属性关闭自动禁用表单校验联动支持required属性 原生表单校验需自行处理令牌缺失/过期时的业务逻辑两种模式共用同一个cap-widget自定义元素与同一套求解管线编程模式只是隐藏了组件外壳——这也意味着它在功能上天然继承验证组件的全部能力多 worker 并行求解、WASM 加速、instrumentation 检测等同时把控制权完全交还给你的代码。小结编程模式让 Cap 从可见的验证控件变成了可嵌入任意 JS 逻辑的人机验证函数new Cap({ apiEndpoint })创建隐藏组件solve()静默完成工作量证明质询并返回令牌token/reset()/事件监听则覆盖了令牌读取、过期回收与状态追踪的完整生命周期。配合服务端validateChallenge的一次性校验即可在不打扰用户的前提下为后台操作与 API 请求提供与 reCAPTCHA 类产品同思路、却完全自托管的工作量证明反滥用防线。赞分享网络安全应用安全后端【免费下载链接】capFree, open-source and self-hosted CAPTCHA alternative to reCAPTCHA. Privacy-first and powered by proof-of-work and instrumentation challenges.项目地址https://gitcode.com/gh_mirrors/cap13/cap点击查看免费下载相关推荐Cap 编程模式Programmatic Mode实战指南用 new Cap() solve() 无界面调用开源 CAPTCHACap 编程模式Programmatic Mode实战指南用 new Cap solve 无界面调用开源 CAPTCHA Cap 是一套免费、开源、可网络安全应用安全后端Cap 无头验证Programmatic Mode实战指南用 new Cap() 与 solve() 在自托管 CAPTCHA 中实现无界面 proof-of-work 验证Cap 无头验证Programmatic Mode实战指南用 new Cap 与 solve 在自托管 CAPTCHA 中实现无界面 proof of w网络安全应用安全后端Cap 程序化模式Programmatic Mode实战指南用 new Cap() 与 solve() 在无界面场景中完成 Proof-of-Work 验证Cap 程序化模式Programmatic Mode实战指南用 new Cap 与 solve 在无界面场景中完成 Proof of Work 验证 Ca网络安全应用安全后端上一篇解决Hoppscotch桌面应用文件上传性能瓶颈从诊断到优化的全流程指南下一篇终极指南vue-pure-admin中5种高效组件通信方案告别组件孤岛创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考