お問い合わせフォームにreCAPTCHAを入れた話

ボットが送ってきたスパムメール

サイトのお問い合わせフォームに、海外業者からの営業スパムが届くようになりました。 件名は「Reach Real Customers in One Day」。 もっともらしい英文だけど、明らかにボットが送ってきているものです。

もともとハニーポット(見えない欄にボットだけが入力してしまう仕掛け)は入れていたけど、それだけではすり抜けてくる。というわけで reCAPTCHA v3 を追加することにしました。 https://www.google.com/recaptcha/admin/create

やったことは大きく3つ。

• Google reCAPTCHAの管理画面でサイトキーとシークレットキーを取得
• フォーム側にスクリプトを読み込んで、送信時にトークンを付与
• サーバー側（Astroのお問い合わせAPI）でそのトークンを検証する処理を追加

作業自体はそこまで難しくなかったけど、地味に手間取ったのが見た目の問題。reCAPTCHAを入れると右下に青いバッジが出てくる。これを消そうとCSSでvisibility: hiddenを書いたのに、なぜか消えない。

原因は、Astroのコンポーネントのstyleは基本的に「そのコンポーネントの中の要素にしか効かない」仕組みになっていて、Googleのスクリプトが後から追加する要素はその対象外だったから。<style is:global>という書き方に変えることで解決しました。

ひとつ機能を足すだけでも、こういう「知らないと気づけない仕様」にぶつかる。地味だけど、こういうのを潰していく作業が重要だなあと思います。