ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法
他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガー文で一時停止」と表示されソースコードが書き換えられて見られないというケースがある。これを再現してみたいので調べてみたところ「console-ban」というライブラリで実装できるみたい。以下に利用方法をメモ。
console-ban
GitHub
https://github.com/fz6m/console-ban
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
サンプル
https://taitan916.info/sample/console-ban/
開発者ツールを開くとソースコードが書き換えられ「開発者ツールの起動はNGです」と表示される筈。
利用方法
ソースコード
<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script> <script> ConsoleBan.init({ write: '<div>開発者ツールの起動はNGです</div>', }) </script>
リダイレクト設定
ソースコードの書き換えではなくリダイレクトさせたい場合は以下のような形になる。
<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script> <script> ConsoleBan.init({ //ソースコードを書き換える場合 //write: '<div>開発者ツールの起動はNGです</div>', //リダイレクトする場合 redirect: 'リダイレクト先を相対パスもしくはURLで指定', }) </script>
オプション
オプション項目についてはこちらのページを参照すること。
関連記事
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...
-
-
円形のプログレスバーをprogressbar.jsで実装する方法
円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法
あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...