2024-06-08 ================================================================================ 【状況】 -------------------------------------------------------------------------------- HObfusの使用において、以下のようなエラーメッセージが、console.logに現れた。 -------------------------------------------------------------------------------- VM62:3 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write -------------------------------------------------------------------------------- ================================================================================ 【出現条件】 -------------------------------------------------------------------------------- これは次の条件で現れる。 (1) Chromeのみで現れる。FireFoxでは現れない。同じwebkitベースのEdgeでも現れない。 This is a Chrome specific issue. It appears on Chrome only. It won't show up in FireFox and Edge. (2) ページをロードした最初の回では現れず、ページをリロードした時に現れる。 You get this error message on broser's console when you reload the page that uses HObfus. (3) ただし、前もってDevToolsを開けておいたページに、HObfusを使うページを開いて、ロード、及びリロードしても、[Violation]エラーは起きない。 -------------------------------------------------------------------------------- 確実にエラーメッセージを出すには。。。 [1] ページをduplicateする。新しくできたタブには、DevToolsは開いていない。 [2] この時点、いくらリロードしても最終の結果は変わらない。 [3] DevToolsは開いて、consoleをみる。まだエラーメッセージは出ていない。 [4] DevToolsは開いたままでリロードする。 [5] エラーメッセージは出る。 ※ DevToolsを開いた時のページがなんであるか重要である。 DevToolsを開いた時のページがHObfusでなく、後でHObfusをページを入れた場合、リロードしてもエラーメッセージは出てこない。一方、DevToolsを開いた時のページがHObfusの場合、リロードすればエラーメッセージが出てくる。 -------------------------------------------------------------------------------- 【もっともシンプルな方法で出現させる】エラーメッセージを引き起こす、さらに一般的な方法を示す。以下のソースを持つページを用意する。 -------------------------------------------- -------------------------------------------- このページを開いた後、DevToolsを開いてリロードすれば、エラーメッセージがでる。他のページでDevToolsを開いて、そこに上記のページを表示してリロードしてもエラーメッセージは出てこない。またDevToolsを開けずにリロードして、それからDevToolsを開けてもエラーメッセージは見つからない。つまりこのエラーメッセージは、DevToolsを開いてリロードの実験を行っている者のみが見れるのである。 ================================================================================ 【問題点】 -------------------------------------------------------------------------------- 出現の仕方が派手ではないので、気がつきやすい問題ではない。しかし、無視しずらい問題が２点ある。問題点１：このエラーメッセージにはリンクがあり、それをクリックすると、 JavaScriptのソースコードを表示して、 document.writeを行っているところに赤線を引く。コードは難読化されているとはいえ、全体の構成がよく見えてしまう。問題点２：もう一つの点は、document.write()が強く非推奨になっていることである。 https://developer.mozilla.org/en-US/docs/Web/API/Document/write Warning: Use of the document.write() method is strongly discouraged. document.write()がブラウザから削除される可能性は著しく低いが、長い目でみた場合、他の方法で代換えすることが望ましい。 ================================================================================ 【解決策の方向性】 -------------------------------------------------------------------------------- 方向性１： docement.write()を使い続ける案１： console.log()に出てくるエラーメッセージを何かしらのタイミングでクリアする。案２：問題のエラーメッセージは、ページロードでは現れず、ページリロードで現れる。この点を深く調べて、エラーメッセージが出なくなる条件を探す。方向性２： docement.write()を使わず他の方法を探す。案１： innerHTML/outerHTML 短所：入力したテキスト内にある