ネイティブのブラウザーコードを元に戻す方法

ネイティブコードは、ブラウザのエンジンによって含まれていて、プログラマによって定義されていない機能です.Chromeのようなブラウザでは、単にコンソールに入力するだけで、関数がネイティブであるかどうかを確認できます.

時折、いくつかのネイティブコードが上書きされたシナリオに遭遇することがあります.サードパーティ製のdevとしての経験では、コンソールが空の関数に上書きされた例がいくつか見られました.これは通常、非常に慎重に表示されている機密の顧客情報について慎重にされているクライアントによって行われます(しかし真剣に、誰かが本当にこの情報を検索したい場合は、彼らは)!機能コンソールなしでコードを書くことを試みることは巨大な痛みです.(これはローカル開発のためだけに行われました.
例えば、Khols.com モバイルサイトには、すべてのコンソールメソッドが空の関数に上書きされます(エミュレータのモバイルサイトをシミュレートしてください).

それで、どのように我々はそれを元に戻すことができますか

function createConsoleProxy() {

  // Create dummy iframe to steal its fresh console object
  const iframe = document.createElement('iframe');

  // Add iframe to current window's scope in a hidden state
  iframe.id = 'console-proxy';
  iframe.style.display = 'none';
  document.body.insertAdjacentElement('beforeend', iframe);

  // Reassign value of console to iframe's console 
  const proxyIframe = document.querySelector('#console-proxy');
  window.console = proxyIframe.contentWindow.console;
}

入るとconsole.log; コンソールで.バム!それは“ネイティブ”の状態に戻る!

このメソッドが使用される前に、同僚はカスタムを作成することによってメッセージを見る巧妙な選択肢を思いつきましたlog() ユーザ入力を受け取り、本体に追加する関数

function log(msg) {
  const body = document.body;
  body.insertAdjacentHTML('afterbegin', `<div>${msg}</div>`);
}

これは簡単なメッセージを見るために十分に働きました、しかし、我々は我々がそれが限られた使用をしたように、我々がオブジェクトを広げる能力を必要とすると理解しました.しかし、このような課題は常に楽しいです.🤪
私のブログでJSBITより多くのチェックインをチェックしてください.jsbits-yo.com . または私に従ってください!