开源方案：高效阻止 AI 爬虫骚扰

开源方案：高效阻止 AI 爬虫骚扰 | 前端进阶之旅

Full translation

完整中文译文

AI 公司正在爬取所有人的网站来训练模型。如果你在自托管博客，你几乎无法阻止这一切，除非让爬虫们认为你的网站包含他们不想要的内容。Fuzzy Canary 在你的 HTML 中植入不可见的链接（指向成人网站...），这会触发爬虫的内容安全防护。

npm i @fuzzycanary/core
# or
pnpm add @fuzzycanary/core

有两种使用方式：客户端或服务器端。如果可以的话，使用服务器端——这样效果更好，因为金丝雀从一开始就在 HTML 中，所以不运行 JavaScript 的爬虫仍然会看到它。

服务器端（推荐）

如果你使用基于 React 的框架（Next.js、Remix 等），请在根布局中添加 <Canary /> 组件：

// Next.js App Router: app/layout.tsx
// Other React frameworks: your root layout file
import { Canary } from '@fuzzycanary/core/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Canary />
        {children}
      </body>
    </html>
  )
}

对于非 React 框架，使用 getCanaryHtml() 工具函数，并将其插入到 <body> 标签的开始处。

客户端注入

如果你在构建静态网站或更喜欢客户端注入，请在你的入口文件中导入自动初始化模块：

// Your main entry file (e.g., main.ts, index.ts, App.tsx)
import '@fuzzycanary/core/auto'

就是这样。它会在页面加载时自动注入金丝雀。

Fuzzy Canary 现在会为每个访问者注入，包括爬虫。如果你担心这会如何影响索引或排名，可以考虑在测试环境中进行测试，然后再部署到生产环境。