隠ぺいされた console.log を無理やり復活させる対症療法

~~完全に復活するわけではないですが。代替療法です。~~
後記：@ylqjk さんに完璧な方法教わったので追記しました。

状況

Webサイトによっては何かしらの理由（セキュリティ？）で console.log を無効にしているタイプのものがあります。たとえば Coincheck とか。

今回はこの console.log を有効にしなおす（ことと同等の）方法を紹介します。

※~~この際、人様のサイトでスクリプトを実行するモラルの低さには目をつぶっていただきたい。~~あくまでも研究資料です。
※今回は完全なる好奇心が行動原理です。すみません（と言っておく）

console.log を無効にする方法について

以下のようなスクリプトを実行してしまえば console.log は実質無効になります。

console.log = function(){};

Coincheck の該当ページでは以下のような記述が見受けられます。

<script>
if (console in window) {
  console.log = function() {}
} else {
  console = {};
  console.log = function() {}
}
</script>

console.log を対症療法的に復活させる方法

いろんな方法があるかと思いますが、基本的には console.log を上書きしなおせば良いのです。

プレーンな iframe から復元する方法

@ylqjk さんから教えてもらいました。

@kobake_ d=document,b=d.body,f=b.appendChild(d.createElement('iframe'));f .style.display="none";window.console=f.contentWindow.console;
— qk a.k.a. 夜クジャク (@ylqjk) 2016年11月7日

↑の引用だとたぶんTwitter文字数の制約上短縮かけてるので、要約したコードを以下に書きます。

(function(){
  var f = document.body.appendChild(document.createElement('iframe'));
  f.style.display = 'none';
  window.console = f.contentWindow.console;
})();

iframe 要素をページに追加して、iframe の contentWindow から汚染されていない console オブジェクトを取り出すという手法。完璧ですやん。

というわけなので
↓↓ここより下の情報はあんまり意味なくなったので見なくても良いです↓↓

独自ポップアップに出力する方法

今回はログ出力専用のポップアップウィンドウを表示し、そこに console.log の出力結果を表示していくことにします。

以下スクリプトをこれをそのまま Chrome Developer Tools Console に突っ込めば、ログ表示用のポップアップウィンドウが表示されます。

// ポップアップウィンドウを開く
var logWindow = window.open('', 'log-window', 'width=350,height=450');

// ヒアドキュメント構築用
function heredoc (f) {
  return f.toString().match(/\/\*\s*([\s\S]*?)\s*\*\//m)[1];
}

// ポップアップウィンドウに組み込むHTMLを生成
var html = heredoc(function(){/*
  <html>
  <head>
    <title>custom log window</title>
    <style>
      body{
        padding: 4px;
        position: relative;
      }
      #log-area{
        border: 1px solid #aaa;
        background-color: rgba(255, 255, 255, 0.8);
        width: 100%;
        height: 95%;
        potision: absolute;
        bottom: 4px;
        display: block;
        padding: 4px;
        font-size: 10pt;
        font-family: 'ＭＳ ゴシック';
      }
      .clear-log-frame{
        margin-top: -4px;
        margin-bottom: 4px;
      }
    </style>
    <script>
      function clearLog(){
        var textarea = document.getElementById('log-area');
        textarea.value = '';
      }
    </script>
  </head>
  <body>
    <div class="clear-log-frame"><a href="#" onclick="clearLog()">clear log</a></div>
    <textarea id="log-area"></textarea>
  </body>
  </html>
*/});

// ポップアップウィンドウに該当HTMLを組み込み
logWindow.document.clear();
logWindow.document.write(html);

// console.log をオーバーライド。
// これで console.log 出力はポップアップウィンドウ側に表示されることになる。
console.log = function(str){
  var textarea = logWindow.document.getElementById('log-area');
  textarea.value += str + "\n";
  textarea.scrollTop = textarea.scrollHeight;
};