网络安全应用安全后端【免费下载链接】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 的客户端组件cap-widget负责从前端请求、求解并展示 proof-of-work 挑战它以原生 Web Component Rust 编译的 WASM 为核心并内置了无界面编程模式programmatic mode。读完本文你将掌握如何通过 npm/CDN 安装组件、在 Vanilla/React/Vue/Svelte/SolidJS/Astro/Preact/Qwik 等主流框架中完成接入理解其事件体系、全局配置项、i18n 与 CSS 变量定制并深入了解底层 worker 求解与表单自动注入的源码级实现。组件概述请求、求解、展示一体化的客户端cap-widget是一个浏览器端的自定义元素custom element它把向 Cap 后端请求挑战 → 在本地求解 proof-of-work → 把 token 写回表单这一整套流程封装在组件内部。在源码中它通过customElements.define(cap-widget, CapWidget)注册见 widget/src/src/cap.js组件类同时具备formAssociated能力能深度参与原生表单的校验与提交无需任何额外 JavaScript。其求解核心默认由 Rust 编写的 WASM 模块加速当 WebAssembly 不可用时组件会降级到纯 JS 的 SHA-256 求解器见 widget/src/src/worker.js并会在界面上提示 Enable WASM for significantly faster solving。从源码看求解逻辑运行在 Web Worker 线程池WorkerPool见 widget/src/src/cap.js中避免阻塞主线程 UI。安装在项目中使用cap-widget可用任意主流包管理器pnpm add cap-widgetnpm i cap-widgetbun add cap-widget也可以直接用 CDN 在页面中以模块脚本方式引入!-- * 生产环境建议固定具体版本号避免上游破坏性变更引入未知问题也可以改用 Standalone 自带的静态资源服务 * cdn.jsdelivr.net 在部分地区如中国部分区域可能被屏蔽。如果你的站点需要覆盖这些地区推荐改用 npm 安装 -- script typemodule srchttps://cdn.jsdelivr.net/npm/cap-widget/scriptCDN 方式适合原型验证与静态站点一旦需要稳定的生产交付官方文档建议通过 npm 引入并把依赖锁定在具体版本。当前仓库的包发布目录位于 widget/src/package.json包名为cap-widget仓库内构建产物含cap.min.js、cap.compat.min.js与cap-floating.min.js等多个变体见 widget/src 目录。快速开始原生 HTML 集成cap-widget是标准 HTML 自定义元素原生环境下零框架即可使用。组件要求配置data-cap-api-endpoint指向你的 Cap 部署对于 Standalone 实例该地址形如https://your-instance/site-key/一个完整的原生示例form cap-widget idcap required>import cap-widget; export default function ContactForm() { return ( form cap-widget >script setup import cap-widget; /script template form cap-widget >export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) tag.startsWith(cap-) }, }, }), ], });Svelte 5script import cap-widget; /script form cap-widget >import cap-widget; export default function ContactForm() { return ( form cap-widget >--- // ContactForm.astro --- form cap-widget idcap>import cap-widget; export default function ContactForm() { return ( form cap-widget >import { component$ } from builder.io/qwik; import cap-widget; export default component$(() { return ( form cap-widget >import Cap from cap-widget; const cap new Cap({ apiEndpoint: https://your-instance/site-key/, }); const { token } await cap.solve();从源码结构看new Cap(config)会在内存中创建一个隐藏的cap-widget元素并挂到document.documentElement下display: none然后复用组件的solve()/reset()/addEventListener()接口见 widget/src/src/cap.js如果传入第二个参数已有的元素则直接绑定到该元素。编程模式会自动带上data-cap-disable-haptics因为此时没有可见组件供用户交互见 widget/src/src/cap.js。编程模式支持的能力包括new Cap({ apiEndpoint, workers })创建实例workers默认取navigator.hardwareConcurrency || 8cap.solve()请求并求解挑战返回{ token }cap.token读取最近一次求解得到的 tokencap.reset()清空cap.token并复位组件状态cap.addEventListener(type, handler)为内部 widget 绑定事件可用事件见下文。事件系统所有事件都以CustomEvent形式派发并携带bubbles与composed标志见 widget/src/src/cap.js因此可以穿过 Shadow DOM 边界被外层监听事件触发时机事件详情e.detailsolve挑战求解成功{ token: string }progress求解过程中的进度更新{ progress: number }error发生错误{ message: string }reset组件复位到初始状态{}error事件的 detail 在类型定义中还包含isCap: boolean与code字段见 widget/src/cap.d.tscode的取值包括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见 widget/src/cap.d.ts。其中instr_blocked表示浏览器指纹/自动化检测被拦截此时组件会显示可配置的 Troubleshooting 链接。另外progress进度从源码实现看会被映射到可视百分比求解中0~98、redeem 阶段固定99、完成后100见 widget/src/src/cap.js驱动组件内置的 SVG 进度环handleProgress见 widget/src/src/cap.js。全局配置选项通过window上的全局变量可以定制组件行为。完整类型声明见 widget/src/cap.d.ts。自定义 fetch可以指定自定义 fetch 函数例如用于附加鉴权头或改写请求window.CAP_CUSTOM_FETCH (url, params) fetch(url, params);源码中capFetch会优先调用该函数见 widget/src/src/cap.js。当只提供CAP_CUSTOM_FETCH而未设置data-cap-api-endpoint时组件会默认向/challenge、/redeem发起请求见 widget/src/src/cap.js。Content-Security-Policy 与 nonce如果站点启用了严格的 CSP可以给组件注入的style与script提供 nonce避免被策略拦截window.CAP_CSS_NONCE— 应用到组件注入的style标签若CAP_SCRIPT_NONCE未设置也作为注入脚本的兜底 noncewindow.CAP_SCRIPT_NONCE— 应用到组件注入的脚本pako 解压回退脚本与 instrumentation 挑战 iframe。这两处 nonce 的消费点在 widget/src/src/cap.jspako 脚本与 widget/src/src/cap.jsiframe srcdoc。pako 回退脚本的地址本身也可通过window.CAP_PAKO_URL覆盖见 widget/src/src/cap.js。自定义 WASM 地址cap-widget默认从 CDN 拉取两个 WASM 模块均可用全局变量覆盖例如改为指向 Standalone 自带的静态资源服务window.CAP_CUSTOM_WASM_URL /wasm/cap_wasm_bg.wasm; // 主 PoW 求解器 window.CAP_CUSTOM_HASHWX_URL /wasm/hashwx.wasm; // HashWX 挑战求解器源码中这两个模块的加载分别由getWasmModule见 widget/src/src/cap.js与getHashwxModule见 widget/src/src/cap.js完成均采用fetch → WebAssembly.compile的惰性加载方式并缓存结果避免重复拉取。触觉反馈振动移动端默认会有触觉反馈振动。如需全局关闭可设置window.CAP_DISABLE_HAPTICS true;或者只针对某个组件关闭cap-widget>cap-widget >cap-widget { --cap-background: #fdfdfd; --cap-border-color: #dddddd8f; --cap-border-radius: 14px; --cap-widget-height: 30px; --cap-widget-width: 230px; --cap-widget-padding: 14px; --cap-gap: 15px; --cap-color: #212121; --cap-checkbox-size: 25px; --cap-checkbox-border: 1px solid #aaaaaad1; --cap-checkbox-border-radius: 6px; --cap-checkbox-background: #fafafa91; --cap-checkbox-margin: 2px; --cap-font: system-ui, -apple-system, sans-serif; --cap-spinner-color: #000; --cap-spinner-background-color: #eee; --cap-spinner-thickness: 5px; }组件内部样式注入在 Shadow DOM 中%%capCSS%%模板见 widget/src/src/cap.js因此外部普通 CSS 无法穿透同时组件通过part暴露了trigger、checkbox、label、troubleshoot等可样式化部件见 widget/src/src/cap.js高级用户也可以利用::part()选择器做细粒度定制。底层原理从源码看一次求解的完整链路结合 widget/src/src/cap.js 与 widget/src/src/worker.js可以还原组件一次完整求解的内部流程投机式预求解speculative solving组件挂载后监听页面首次交互mousemove/touchstart/keydown延迟 2.5 秒后预取POST {apiEndpoint}challenge并在单个 worker 中预求解见 widget/src/src/cap.js。用户真正点击时如果预求解已完成直接复用缓存 token#commitSpeculativeToken大幅缩短可见等待时间否则立即扩容 worker 池到data-cap-worker-count见 widget/src/src/cap.js。求解分发WorkerPool维护 worker 队列与空闲池支持按批次分发 sha256-pow、rsw、hashwx 三种协议挑战见 widget/src/src/cap.js。worker 端 JS 回退求解器以 50000 次为一组批量计算SHA-256(salt nonce)并与 target 比较见 widget/src/src/worker.js。instrumentation 挑战若服务端下发instrumentation载荷组件会把解压后的脚本放入一个 1×1 像素、sandboxallow-scripts的隐藏 iframe 中执行通过postMessage回传结果见 widget/src/src/cap.js该脚本默认经 deflate-raw 压缩优先使用浏览器原生DecompressionStream不可用时回退到 pako。redeem 兑换求解完成后POST {apiEndpoint}redeem提交{ token, solutions, instr }成功后把服务端下发的最终 token 写入隐藏输入框并派发solve事件token 会在过期时自动触发reset见 widget/src/src/cap.js。测试与验证仓库为 widget 提供了完整的单元与端到端测试覆盖组件求解、instrumentation、worker、回归与 HashWX 场景测试命令定义在 widget/package.jsonbun test test/unit.test.js— 单元测试bun test test/e2e.test.js test/e2e-instrumentation.test.js test/e2e-regression.test.js test/e2e-worker.test.js test/e2e-hashwx.test.js— 基于 Playwright 的端到端测试。相关测试文件位于 widget/test 目录例如 widget/test/e2e.test.js 与 widget/test/e2e-worker.test.js可作为接入前后端联调时的参考用例。关于服务端如何签发与校验挑战可继续阅读 docs/guide/server.md 与 docs/guide/standalone.md。赞分享网络安全应用安全后端【免费下载链接】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 客户端 Widget 集成指南基于原生 Web Component 与 WASM 的自托管 CAPTCHA 接入实战Cap 客户端 Widget 集成指南基于原生 Web Component 与 WASM 的自托管 CAPTCHA 接入实战 Cap 是一个免费、开源、可自托网络安全应用安全后端Hypothesis 客户端安装与配置指南Hypothesis 客户端安装与配置指南 1. 项目基础介绍 Hypothesis 客户端是一个基于浏览器的工具用于在网页上制作注释。它是 HypothesYaak API 客户端安装与配置指南Yaak API 客户端安装与配置指南 1. 项目基础介绍 Yaak 是一个功能强大的桌面 API 客户端它允许用户与 REST、GraphQL、Server开发工具接口测试桌面应用上一篇Marp for VS Code Web扩展使用指南在浏览器中编辑幻灯片的方法下一篇3个简单步骤掌握Balena Etcher跨平台镜像烧录终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考