JavaScript コンソールを閉じる-フロントエンドQ&A-php.cn

JavaScript コンソールを閉じる

WBOY

リリース： 2023-05-16 10:21:08

オリジナル

2320 人が閲覧しました

JavaScript コンソールを閉じる
フロントエンド開発者は、コードをデバッグするためにブラウザコンソール (コンソール) を使用することがよくあります。コンソールは、エラーメッセージ、ログ、パフォーマンス分析など、多くの役立つ情報を提供します。

ただし、実稼働環境では、コードとアプリケーションを保護するためにコンソールを無効にすることが必要になる場合があります。さらに、コンソールから API キー、機密データ、Cookie などの情報が漏洩する可能性があります。

この記事では、コンソールを閉じる方法、コンソールが表示されないようにする方法、およびその他の実用的な提案について説明します。

コードを使用してコンソールを無効にする

まず、コードを使用してコンソールを無効にする方法を見てみましょう。ブラウザではコンソールを開くことができますが、次のコードを使用してコンソールを無効にすることができます。

// 如果控制台被打开则重定向
if (typeof console !== "undefined") {
  console.log("控制台被禁用");
  console.clear();
  window.location.href = "about:blank";
}

ログイン後にコピー

上記のコードは、コンソールを監視し、表示されないようにします。コンソールが開かれると、空白のページにリダイレクトされます。

F12 を無効にする

コンソールを無効にすることに加えて、F12 を無効にすることもできます。 F12 ショートカットキーは、コンソールを開くためのデフォルトのオプションです。ほとんどの場合、ユーザーはこのショートカットキーを使用してコンソールを開きます。

ショートカットキーを無効にするには、HTML ファイルに次のコードを追加します。

<script>
    document.addEventListener("keydown", function(e) {
        // 禁用 F12
        if (e.keyCode === 123) {
            console.log("F12 键被禁用");
            e.preventDefault();
        }
    });
</script>

ログイン後にコピー

上記のコードは、F12 キーをリッスンし、このショートカットキーのデフォルト動作を防ぎます。

アプリケーションを運用環境にデプロイする前にコンソールログを削除してください

アプリケーションがコンソールログ出力に依存している場合は、未使用のコンソールステートメント、特に出力されるステートメントを削除する必要があります。機密情報をコンソールに送信します。

次のコードを使用して、コンソール出力ステートメントを削除できます:

// 删除 console.log()
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function() {};

// 删除 console.warn()
if (!window.console) window.console = {};
if (!window.console.warn) window.console.warn = function() {};

// 删除 console.error()
if (!window.console) window.console = {};
if (!window.console.error) window.console.error = function() {};

ログイン後にコピー

これにより、コンソールログ出力が削除されますが、他の方法でコンソールを開くことはできます。したがって、この解決策は完璧ではありません。

コンソールが開かないようにする

JavaScript コードを変更して、コンソールが開かないようにすることもできます。このアプローチは完璧ではありませんが、状況によっては機能する可能性があります。

以下は、このメソッドを実装するサンプルコードです:

var oldLogs = [];

// 在页面加载时禁止控制台并覆盖 console.log()
(function() {
    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    // 如果用户访问页面并且为 Chrome 浏览器，则禁用控制台
    if (isChrome) {
        setInterval(function() {
            // 如果控制台被打开，则刷新页面
            if((window.outerHeight - window.innerHeight) > 200){
                window.location.reload();
            }
        }, 1000);

        // 缓存先前的日志并覆盖 console.log()
        var oldLogs = [];
        if (!window.console) window.console = {};
        if (!window.console.log) window.console.log = function() {};
        if (!window.console.warn) window.console.warn = function() {};
        if (!window.console.error) window.console.error = function() {};
        window.console.log = function(log) {
            oldLogs.push(log);
        };
        window.console.warn = function(log) {
            oldLogs.push(log);
        };
        window.console.error = function(log) {
            oldLogs.push(log);
        };
    }
})();

ログイン後にコピー

上記のコードは、ユーザーが Chrome ブラウザを使用してページにアクセスしているかどうかを検出します。その場合は、コンソールを無効にして表示されないようにします。さらに、コンソールのログ出力を上書きし、後で呼び出せるように古いログを配列に保存します。

この方法は比較的安全ですが、Firefox や Safari などのブラウザでは実行できない可能性があります。

結論

実稼働環境ではコンソールをオフにすることは一般的ではありませんが、それでも必要な場合があります。コンソールを無効にすると、コードとアプリケーションが CSRF、XSS、DDoS などの攻撃から保護されます。ただし、これには注意し、セキュリティスイートを使用したりベストプラクティスに従うなど、コードとアプリケーションを保護するための他の手順を講じる必要があります。

最後に、コンソールを無効にするかどうかに関係なく、コンソールを賢く使用することでコードの品質とアプリケーションのパフォーマンスを向上させることができます。

以上がJavaScript コンソールを閉じるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。