勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

  JavaScript

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガー文で一時停止」と表示されソースコードが書き換えられて見られないというケースがある。これを再現してみたいので調べてみたところ「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>

オプション

オプション項目についてはこちらのページを参照すること。

 - JavaScript

  関連記事

JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法

だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...