早見用
外部プラグインを入れるだけで(scriptタグを1個書くだけで)名前を付けて保存をするとCSSとJavascriptが消失する仕組みの紹介。
Javascriptでbodyだけをdocument.writeした後にCSSと他のJavascriptを読み込むと、実現可能。
HTMLだけで配布するツールやゲーム、デモページでは、「開発者ツールでソースを見られたくない」「名前を付けて保存されても構造を分かりにくくしたい」と考えることがあります。
もちろん、Webページとして配信する以上、ブラウザで動作しているコードを完全に隠すことはできません。しかし、ページの構造を再構築することで、元のHTMLをそのまま見にくくしたり、解析の手間を増やしたりすることはできます。
ただし、ソースを表示にまだ対応できていません。javascriptが有効な時くらいは対応出来れば完璧ですが、恐らく難しいです。indexeddbに特定の文字を入れて新しいタブで開いて、自身は前の画面に戻る等を駆使して対応することになりそうですが、恐らく難しいです。
今回はそれ以外に関して使えるであろうJavaScriptプラグインの作り方を紹介します。
※下記のような方向性もありますが、面倒ですしSEOに弱いです。ただ文字として解釈できないランダムなbit列を入れれたら、セキュリティはプラグインより高いです
オンラインにプラグインを公開する環境が私に無いため、こんな公開プラグインがあると良いよね的な紹介になります。
誰かが公開すれば、スクリプトタグを記述するだけで使えるようになります。(名前を付けて保存やデベロッパーツールを使いにくくできます)
方向性は下記のイメージです。(方向性としては2個目以降のscriptタグのようなプラグインを作ります。作り直し等を実装する必要あり)
名前を付けて保存をすると、CSSとJavascriptが消失している事が分かります。これが外部プラグインを読み込むだけで実装されるのです。
紹介するプラグインについて
このプラグインは、ページの読み込み後にHTML・CSS・JavaScriptを解析し、画面を再構築する仕組みです。
通常のHTMLをそのまま表示するのではなく、
- CSSを一度回収する
- JavaScriptを解析する
- bodyを作り直す
- CSSを再適用する
- JavaScriptを再実行する
という流れでページを生成します。
これにより、最終的なHTMLは最初とは異なる構造になり、元のコードを追いにくくできます。
## 処理の流れ
今回作成するプラグインは、次のような流れで動作します。
- 現在のHTMLを取得する
- body・CSS・JavaScriptを抽出する
- id・class・nameなどを新しい名前へ変換する
- CSS内のセレクタも同じように変換する
- JavaScript内のDOM参照も変換する
- bodyだけで画面を再構築する
- CSSを再適用する
- JavaScriptを実行する
このように、一度すべて組み立て直すことで、初期HTMLとは異なる状態でページが動作します。
## idやclassを変換する理由
HTMLだけを書き換えても、
<div id="menu">
が
<div id="menu2">
になった場合、
document.getElementById("menu")
は動かなくなります。
そのため、
- HTML
- CSS
- JavaScript
のすべてで同じ変換を行う必要があります。
例えば、
menu
↓
menu2
という対応表（変換マップ）を作成し、
HTML・CSS・JavaScriptのすべてに適用します。
JavaScriptの変換例
例えば、
document.getElementById("button")
は、
document.getElementById("button2")
へ変換します。
また、
querySelector("#menu")
↓
querySelector("#menu2")
querySelector(".item")
↓
querySelector(".item2")
など、よく使われるDOM取得方法を対象にします。
## CSSも同じように変換する
例えば、
#menu{
}
.item{
}
は、
#menu2{
}
.item2{
}
へ変換します。
HTML・CSS・JavaScriptが一致していれば、画面は問題なく動作します。
外部ファイルとして利用する
このプラグインは、
のようにheadのできるだけ上で読み込むだけで利用できます。
ページ側では、
rewriteBodyOnly(function(){
initApp();
initButtons();
});
のように、body再構築後に実行したい処理を書くだけです。
このプラグインのメリット
- HTMLだけで配布するツールへ導入しやすい
- bodyだけを再生成できる
- CSS・JavaScriptも自動で再構築できる
- イベントリスナーを再設定しやすい
- 元のHTML構造をそのまま残さない
- 外部JS一つで導入できる
注意点
このプラグインは、ソースコードを完全に隠すものではありません。
ブラウザ上で動作している以上、JavaScriptやCSSは最終的には取得可能です。
また、JavaScript内のすべてのDOM参照を自動変換できるわけではありません。動的に生成されたセレクタや特殊なライブラリの処理などは、個別の対応が必要になる場合があります。
そのため、このプラグインは「解析を困難にする」「元のHTML構造を追いにくくする」ことを目的とした補助ツールとして利用するのが適しています。
名前を付けて保存と開発者ツールに強く、ソースを表示には弱い感じです。
まとめ
HTML・CSS・JavaScriptを一度解析してから再構築することで、通常のHTMLページとは異なる構造で画面を表示できます。
完全な保護にはなりませんが、HTMLのみで配布するツールやゲーム、デモページなどでは、元のソース構造をそのまま見せたくない場合に役立つアプローチです。プラグイン化しておけば、headから読み込むだけでさまざまなページへ簡単に導入できます。