CAPTCHA / reCAPTCHA を独自実装した紹介スライド

1. 独自キャプチャ
木村 桂
@dotnsf

2. 「キャプチャ」？「リキャプチャ」？
• CAPTCHA / reCAPTCHA
問い合わせフォームなどを通したスパムなどのサイバー攻撃を防ぐためのサービス／仕組み
自動的に大量のデータを自動送信できないよう、
（人間でないとクリアできないような）チェックを入れて対応する仕組み
人間なら比較的簡単なクイズ
人間だとある程度は時間がか
かったり、マウスが直線的に
は移動しない
最近の生成 AI だと防げないかも？？

3. どういうキャプチャなら防げるか？
サンプルを自作してみました！
スライドパズル
https://simple-memory-bbs.yellowmix.net/?mode=slidepuzzle
マッチ棒パズル
https://simple-memory-bbs.yellowmix.net/
人間には解けて、生成 AI では解けないもの？？

4. 使い方
1. JavaScript と CSS をロード
<script src=“https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://dotnsf.github.io/captcha.nsf/captcha.nsf.js"></script>
<link href="https://dotnsf.github.io/captcha.nsf/captcha.nsf.css" rel="stylesheet"/>
2. 送信ボタンをラッピング
<button onClick=“submitMessage();”>送信</button>
↓
<div id=“main-submit-button-div”>
<button onClick=“submitMessage();”>送信</button>
</div>
3. JavaScript 追加
<script>
$(function(){
$('#main-submit-button-div').mycaptcha( { mode: 'matchbo' } );
// 'matchbo' を 'slidepuzzle' にするとスライドパズル});
});
</script>

5. 生成 AI に負けないキャプチャのアイデア募集中
作ります