
2025/12/17 5:42
Show HN: Stop AI scrapers from hammering your self-hosted blog (using porn)
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
(欠落している具体的な情報を補完)**
Summary
Fuzzy Canary は、AI 主導のスクレイパーからウェブページを保護する軽量ライブラリです。秘密裏に「カナリア」リンク(通常は無関係なサイトへのリンク)を埋め込み、これらはスクレイパーだけが閲覧できます。この仕組みは 2 通りのモードで動作します。
-
サーバー側(推奨)
- npm でインストール:
、または pnpm で:npm i @fuzzycanary/core
。pnpm add @fuzzycanary/core - Next.js や Remix といった React ベースのフレームワークでは、ルートレイアウトに
コンポーネントを配置します。<Canary />- Next.js App Router の場合は
に追加。app/layout.tsx - Remix ではローダーから取得した user agent を
に渡します。<Canary userAgent={userAgent} />
- Next.js App Router の場合は
- サーバー側でリクエストの User‑Agent を確認し、Google, Bing, DuckDuckGo 等既知の検索エンジンボットは除外されるため、彼らにはクリーンな HTML が返却されます。一方、スクレイパーはカナリアリンクを閲覧できます。
- npm でインストール:
-
クライアント側
- メインエントリファイル(
,main.ts
, またはindex.ts
)でApp.tsx
をインポートし、@fuzzycanary/core/auto
に基づくランタイム注入を有効化します。navigator.userAgent - React 以外のサイトでは
を呼び出して、その出力をgetCanaryHtml()
タグの最初に挿入することができます。<body>
- メインエントリファイル(
SEOへの影響:
- サーバーサイドでレンダリングされたページは、ボットがフィルタリングされるため SEO に優しいままです。
- 静的サイトジェネレーターはビルド時にカナリアを埋め込むため、クローラーに露出し検索可視性が低下する可能性があります。クライアント側で初期化すれば、ランタイムでボットを検知できるためこの問題を回避できます。
Fuzzy Canary を利用すると、サーバーサイドレンダリングされたサイトでは SEO を損なわずに AI スクレイピングを抑制できます。静的サイトは適切な注入戦略を選択する必要があります。
本文
ファジーキャナリー
AI 企業はトレーニングデータとして、誰もが運営するサイトをスクレイピングしています。
自分でブログをホスティングしている場合、対策できることはほとんどありません。ただし、サイトに「欲しくない」コンテンツがあると思わせるような手段はあります。ファジーキャナリー は、HTML に目に見えないリンク(ポルノサイトなど)を埋め込み、スクレイパーのコンテンツ保護機能をトリガーします。
使い始め
インストール
npm i @fuzzycanary/core # または pnpm add @fuzzycanary/core
使用方法
クライアント側とサーバー側の 2 通りがあります。
可能ならサーバー側を使うことをおすすめします。サーバー側では、最初から HTML にキャナリーが埋め込まれているため、JavaScript を実行しないスクレイパーでも検知できます。
サーバー側(推奨)
React ベースのフレームワーク(Next.js, Remix など)を使っている場合は、ルートレイアウトに
<Canary /> コンポーネントを追加します:
// Next.js App Router: app/layout.tsx // Remix: app/root.tsx // その他の React フレームワーク: ルートレイアウトファイル import { Canary } from '@fuzzycanary/core/react' export default function RootLayout({ children }) { return ( <html> <body> <Canary /> {children} </body> </html> ) }
Next.js の場合はこれだけで完了。
他のフレームワーク(例:Remix)では、ロード時にユーザーエージェントを渡す必要があります:
// Remix の例 export async function loader({ request }) { const userAgent = request.headers.get('user-agent') || '' return { userAgent } } export default function App() { const { userAgent } = useLoaderData() return ( <html> <body> <Canary userAgent={userAgent} /> {children} </body> </html> ) }
React 以外のフレームワークを使っている場合は、
ユーティリティを利用し、 getCanaryHtml()
タグの先頭に挿入してください。<body>
クライアント側
静的サイトを構築しているか、クライアント側で注入したい場合は、エントリーファイルに自動初期化モジュールをインポートします:
// エントリーファイル(例:main.ts, index.ts, App.tsx) import '@fuzzycanary/core/auto'
これだけで、ページロード時に自動的にキャナリーが注入されます。
SEO に関する注意点
ファジーキャナリーは正規の検索エンジンには表示されないように設計されています。
Google, Bing, DuckDuckGo など既知のボットリストを保持し、検出した場合はリンク注入をスキップします。
- サーバーサイドレンダリングの場合はうまく機能します。サーバーが受信リクエストのユーザーエージェントを確認してから HTML にキャナリーを含めるか決定できるため、Google のクローラーにはきれいな HTML が渡り、AI スクレイパーだけがキャナリーを見ることになります。
- 静的サイトの場合は問題があります。HTML はビルド時に生成され、単なるファイルとして配信されるためユーザーエージェントを確認できません。その結果、キャナリーはすべての閲覧者(Google も含む)に埋め込まれ、SEO に悪影響を与える可能性があります。
- 静的サイトジェネレーターを使っている場合は、クライアント側初期化を採用する方が良いでしょう。JavaScript が実行時に
を確認し、検索ボットには注入をスキップします。完全ではありません(JavaScript を実行しないボットには効きません)が、何もしないよりはずっと効果的です。navigator.userAgent