cutSpace
桜

はじめに

記事「コードの難読化で、お持ち帰り禁止!」で難読化に興味を持ち、調べてみると結構利用されているようです。
そこで、言語処理ツールは、パーサ(構文解析器)の出来が美しさを左右するため、腕の見せどころとして挑戦することにしました。

ツールの作成

下記の様にモジュール分けし開発に着手しましたが、
対応すべきケースが多く問題が発生しそうなので、(2-3) を統合し一気に処理しました。
(「√2 - プログラムコンテスト」で、AWKで C言語を圧縮した時は、制限を設けたため問題は発生しませんでした ^^);

  1. 行の結合 : \(backslash)
  2. 文字列の解析 : "String"、'String'、`back quote` (テンプレートリテラル)、/regex/ (割り算と競合するため APIの調査が必要です)、HTMLのタグ以外の部分は、当然 文字列の概念がありません。
  3. コメントの削除 : <!-- -->、/* */、 // Line comment
  4. 行の分割と結合(最後の仕事として、コードをリファクタリングし (2-4) を統合しました)
  5. 空白の圧縮 (HTMLは、タグの文字列も圧縮)、スクリプト、CSS('}' の直前のセミコロンを削除)
    (やることは、単純ですが、(2-4) と共に最大規模のモジュールで、正規表現とパラメータのみで駆動します)

3言語を相手にした作業は、見かけによらず高難易度でしたが、完成後に眺めると、力を出し切った爽快感で、いい感じです。
勝因は、シンプルなモジュールの組み合わせです。
成果物は、オープンソースで配布します。(コードリーディングに最適です。7モジュール、1k step)

インストール

  1. Java をダウンロード(環境を汚さない .zip を推奨、複数の Javaもインストールできます)「Java Downloads」
  2. cutSpace をダウンロード「cutSpace - HTML圧縮ツール (Compression tool)」 (コマンドを添付しています)
  3. cutSpace フォルダ中の makefile の JAVAHOME 変数に Javaホームパスを設定する。

実行

Windows ユーザの方は、下記の中でお好きなのをどうぞ。(ちなみにコードは、UTF-8 \n です)
  1. エクスプローラーで cutSpace フォルダを開き、上部のパンくずに と入力してコマンドプロンプトに と入力。
  2. make.cmd のショートカットを作成し、「プロパティのリンク先」に のターゲットなどを追記する。
  3. バッチファイルを作成する。

まとめ

HTML のガードについて。
  1. 画像の保存の無効化
    「画像の保存」と「ドラッグ&ドロップ」の無効化は、イメージタグに CSS で「POINTER-EVENTS: NONE;」を設定。
  2. ソース表示の無効化
    右ボタン「ページのソースを表示」と「スクリーンショット」の無効化は、<body> タグに「STYLE="MARGIN: 0;"」「onContextMenu="return false;"」
    ※ しかしブログなどでテンプレートを使用している場合は、<body> に手が出せません。また使い勝手が悪くなるため、推奨出来ません。
  3. また、OS のスクリーンショット機能には、手が出せません。
  4. Chrome、Edge、Firefox などでは、URLの先頭に「VIEW-SOURCE:」と入力するとソースコードが表示されます (メニュー→その他のツール→ページのソースを表示、+でも可)
  5. htmlの難読化(空白・コメント圧縮)の目的は、難読化と言うよりは、可視性と軽量化によるスピードアップですね。
  6. Scriptのローカル変数、関数名の難読化。
  7. Scriptの文字定数の暗号化。

参考 HP. として「THE WHITE HOUSE」を調べました。
特定の画像ダウンロードの制御 (1)およびスクリプトの圧縮 (5)を行っています。
(コードは、見かけによらず複雑で、SVGを多用しています。また SVGタグの文字列内で改行しているのを初めて見ました ^^);
また、HTML コメントで求人案内が乗っているので有名です。(10行目)

終わりに

開発中にタグ中の"文字列"の "周辺の空白を削除すると言う荒業を思いつきました。 <tag foo="" bar=""> → <tag foo=""bar="">
ブラウザは、正常動作しますが、W3Cチェッカーが(ワーニングでなく)エラーになるため諦めかけましたが実装しました。(オプション -x)

お願い、ツールが気に入って頂けましたら、コメントのタイトル欄に☆をお願いします。(△ ニックネーム、本文、パスワード)

おまけ

## gawk -f cutSpace.awk <input.html> > <output.html>
BEGIN { IGNORECASE = 1
}
    {
    if (!pre)
        sub(/^[ \t]+/, "")
    sub(/[ \t]+$/, "")
    if (match($0, "</pre>")) pre = 0
    nl = pre ? "<br>" : " "
    if (match($0, "<pre")) pre = 1
    if ("" != $0) {
        printf "%s%s", $0, nl
        print $0 > "/dev/stderr"
    }
}
※ JavaScript の ';' 抜けには、対応していません。
「Blog top」 2022.4.22