JavaScriptインテグレーション

バニラJavaScriptを使用してSilentShieldをウェブサイトに統合するか、React、Vue、Angular向けのフレームワーク別ガイドをご利用ください。

1. スクリプトタグを追加する

このスクリプトタグをHTMLに追加してください。閉じタグ</body>の前に配置することを推奨します:

HTMLhtml
<script src="https://api.silentshield.io/client.js?k=YOUR_API_KEY" crossorigin="anonymous" defer></script>

2. ウィジェットを初期化する

手動の初期化は不要です — client.jsは自動的に初期化され、ウィジェット設定(テーマ、言語、バッジ)をダッシュボードの設定から読み込みます:

JavaScriptjavascript
// No init call needed — client.js bootstraps itself as soon as it loads
// and pulls your widget configuration (theme, language, badge) from the
// dashboard: App → API keys → [your key] → Widget.

設定オプション

apiKey
APIキー(必須)
lang
言語コードまたはブラウザ自動検出の場合は'auto'(デフォルト:'auto')。25言語に対応しています。
thresholdSuspicious
このスコアを下回るとチャレンジが発動します(デフォルト:0.6)
thresholdBlock
このスコアを下回るとリクエストがブロックされます(デフォルト:0.3)
telemetry
行動トラッキングを有効にします(デフォルト:true)
captchaUI
必要に応じてCAPTCHA UIを表示します(デフォルト:true)
fallbackCaptcha
数学CAPTCHAフォールバックを有効にします(デフォルト:true)
showBrandingBadge
「Protected by SilentShield」バッジを表示します(デフォルト:true)
zeroPii
Disable browser fingerprinting for maximum privacy (default: false). See Features → Zero-PII Mode.
debugOverlay
デバッグオーバーレイを表示します(デフォルト:false)
onVerdict
判定結果を受信した際に呼び出されるコールバック関数

シングルページアプリケーション(SPA)

クライアントサイドルーティング(React Router、Vue Routerなど)を使用するSPAの場合、SilentShieldはDOMの変更を自動的に監視し、新しいフォームを検出します。ページ遷移後の再初期化は不要です。

Nonceの取得

フォーム送信後、Nonceは隠しフィールドとして利用可能です:

HTMLhtml
const nonce = document.querySelector('input[name="behavior_nonce"]')?.value;