기본 브라우저 코드를 복원하는 방법

기본 코드는 브라우저 엔진에 포함된 기능이며 프로그래머가 정의하지 않은 기능입니다. Chrome과 같은 일부 브라우저에서는 콘솔에 함수를 입력하기만 하면 함수가 네이티브인지 확인할 수 있습니다(괄호로 호출하지 않음).


경우에 따라 일부 네이티브 코드를 덮어쓴 시나리오가 발생할 수 있습니다. 제3자 개발자로서의 경험에서 콘솔이 빈 함수로 덮어쓰여진 경우를 몇 번 보았습니다. 이것은 일반적으로 민감한 고객 정보가 표시되는 것에 대해 매우 신중한 고객이 수행합니다(그러나 진지하게 누군가가 이 정보를 정말로 찾고자 한다면 찾을 것입니다!). 작동하는 콘솔 없이 코드를 작성하는 것은 엄청난 고통이므로 콘솔의 기본 기능을 복원하는 좋은 사용 사례가 있었습니다. (이것은 로컬 개발용으로만 수행되었으며 실시간으로 배포되지 않았습니다!).

예를 들어 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>`);
}

간단한 메시지를 보는 데는 충분했지만 개체를 ​​확장할 수 있는 기능이 필요하므로 사용이 제한적이라는 사실을 금방 깨달았습니다. 하지만 이런 도전은 언제나 즐겁습니다. 🤪


내 블로그jsbits-yo.com에서 더 많은 #JSBits를 확인하십시오. 또는 나를 따르라!