替换评论人机验证到 Cap

起因

之前我的博客一直使用的是 Cloudflare 的 Turnstile 作为评论的人机验证来使用的，这没什么不好，唯一的问题就是有点慢，并且在大陆的可用性一般

在偶然间我看到了这个项目 https://github.com/tiagorangel1/cap

关于 Cap

Cap 是一个非常轻量的 CAPTCHA 解决方案，使用基于 SHA-256 算法的 PoW（工作量证明）机制来区分人类用户和机器人

Cap 的 @cap.js/widget 只有 12kb 大小，比起其他的商业 CAPTCHA 方案来说是非常轻量了

并且 Cap 几乎不会收集任何隐私信息，也不会使用 Cookie，对个人隐私也是非常友好的

大家可以通过 https://capjs.js.org/guide/demo.html，尝试一下

部署

Cap 的文档里提供了多种部署方式，我这里使用了 Docker 部署，这是我的 Compose 文件

services:
    cap:
        network_mode: host
        volumes:
            - cap-data:/usr/src/app/.data
        environment:
            - ADMIN_KEY=xxxxxxxxxxxxxxxxxxxxxxxx
            - ENABLE_ASSETS_SERVER=true
            - HIDE_RATELIMIT_IP_WARNING=true
        container_name: cap-standalone
        image: tiago2/cap:latest
volumes:
    cap-data:
        name: cap-data

我这里开启了本地的静态文件服务器，开启本地静态文件服务器需要注意在配置 Nginx 的时候要设置 CORS 响应头，下面是我的 Nginx 配置，可以参考一下

server {
    listen              443 ssl;
    listen              [::]:443 ssl;
    http2 on;
    server_name         cap.server.domain;

    root /dev/null;

    # SSL
    ssl_early_data on;
    ssl_certificate     /etc/nginx/ssl/cap.server.domain/nginx.crt;
    ssl_certificate_key /etc/nginx/ssl/cap.server.domain/nginx.key;

    # 处理 /assets 下的所有静态资源
    location /assets {
        # CORS - 允许所有来源
        add_header Access-Control-Allow-Origin * always;
        add_header Access-Control-Allow-Methods "GET, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Content-Type" always;
        
        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Content-Type";
            add_header Content-Length 0;
            return 204;
        }
        
        # 代理到后端
        proxy_pass            http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_http_version    1.1;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 其他所有请求
    location / {
        proxy_pass            http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_http_version    1.1;

        # WebSocket support
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # Proxy headers
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# HTTP redirect
server {
    listen      80;
    listen      [::]:80;
    server_name cap.server.domain;
    return      301 https://cap.server.domain$request_uri;
}

这个配置允许来自任何域名的网页请求这些资源，如果你想限制来源域名的话可以修改一下

另外，因为我没有使用任何 CDN，所以开启了 HIDE_RATELIMIT_IP_WARNING=true，如果你需要使用 Rate Limit 功能，并且使用的 CDN 的话，你可能需要配置 RATELIMIT_IP_HEADER，具体可以参考 https://capjs.js.org/guide/standalone/options.html#rate-limiting

应用到 Typecho

我之前一直使用的是 CaptchaPlus 这个插件来作为评论人机验证插件，不过插件作者已经不再更新了，因此我 Fork 了一个，并且在 Claude 的帮助下完成了对于 Cap 的支持

需要的可以在 Github 下载使用 https://github.com/9bingyin/typecho-plugins/tree/main/CaptchaPlus

其他

Cap 还提供了类似 Cloudflare 的 Checkpoint 中间件，可以用于 Elysia 等框架，可以查看 https://capjs.js.org/guide/middleware/