Editing Openai/6925be13-ebbc-8008-b732-b451ffffc4fe (section)

==== 🧩① ブラウザ指紋を使って荒らしをブロックする仕組み（実践編） ====

===== 全体の流れ（概要） =====

<syntaxhighlight>[ユーザーのブラウザ]
    ↓ (JavaScriptで指紋生成)
[指紋IDをサーバーへ送信]
    ↓
[サーバーがDBに保存]
    ↓
[新しい書き込み時に照合]
    ↓
[過去に荒らし登録された指紋ならブロック]

</syntaxhighlight>

===== ステップごとの仕組み =====

====== ① ブラウザ指紋を生成 ======

前回紹介したライブラリ
@fingerprintjs/fingerprintjs などを使います。

<syntaxhighlight lang="js">import FingerprintJS from '@fingerprintjs/fingerprintjs';

const fpPromise = FingerprintJS.load();
fpPromise.then(fp => {
  fp.get().then(result => {
    const visitorId = result.visitorId;
    // 掲示板の投稿フォームと一緒に送信
    document.querySelector('#fingerprint').value = visitorId;
  });
});

</syntaxhighlight>

HTML側に隠しフォーム項目を作っておきます。

<syntaxhighlight lang="html"><form method="POST" action="/post">
  <textarea name="message"></textarea>
  <input type="hidden" id="fingerprint" name="fingerprint">
  <button type="submit">投稿</button>
</form>

</syntaxhighlight>

====== ② サーバーで指紋を受け取って保存 ======

Python（Flask）風の例で説明します：

<syntaxhighlight lang="python">from flask import Flask, request
import sqlite3, time

app = Flask(__name__)

@app.route("/post", methods=["POST"])
def post():
    msg = request.form["message"]
    fp  = request.form["fingerprint"]

    # 荒らし判定テーブルと照合
    if is_blocked(fp):
        return "この端末からの投稿は禁止されています。"

    save_post(msg, fp)
    return "投稿完了！"

def is_blocked(fp):
    conn = sqlite3.connect("bbs.db")
    c = conn.cursor()
    c.execute("SELECT * FROM blocklist WHERE fingerprint = ?", (fp,))
    return c.fetchone() is not None

def save_post(msg, fp):
    conn = sqlite3.connect("bbs.db")
    c = conn.cursor()
    c.execute("INSERT INTO posts (message, fingerprint, time) VALUES (?, ?, ?)",
              (msg, fp, time.time()))
    conn.commit()

</syntaxhighlight>

====== ③ 荒らしをブロック登録する ======

管理者が投稿を削除する際、同時に「このfingerprintをブロックリストに登録」すれば完了です。

<syntaxhighlight lang="python">def block_fingerprint(fp):
    conn = sqlite3.connect("bbs.db")
    c = conn.cursor()
    c.execute("INSERT INTO blocklist (fingerprint) VALUES (?)", (fp,))
    conn.commit()

</syntaxhighlight>

===== ✅ この方法のメリット =====
* IPが変わっても同じ端末ならブロック継続可能。
* VPN・モバイル回線の変更でも効果が続く。
* Cookie削除では解除できない（別ライブラリ利用で再生成しても類似指紋で検出可能）。

===== ⚠️ デメリット =====
* 指紋の一部は変動するため、'''「完全一致」より「類似検出（ハッシュの類似度）」'''を使う方が精度が上がる。
* 技術的にユーザー追跡にも転用できるため、プライバシーポリシーで明示が必要。