cutSpace - HTML圧縮ツール（オープンソース）

cutSpace

はじめに

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

ツールの作成

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

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

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

インストール

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

実行

Windows ユーザの方は、下記の中でお好きなのをどうぞ。（ちなみにコードは、UTF-8 \n です）

エクスプローラーで cutSpace フォルダを開き、上部のパンくずにと入力してコマンドプロンプトにと入力。
make.cmd のショートカットを作成し、「プロパティのリンク先」にのターゲットなどを追記する。
バッチファイルを作成する。

まとめ

HTML のガードについて。

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