Elementsタブ難読器

概要

Elementsタブ難読器 は、開発者ツールの「Elements」タブに表示されるテキストを難読化する JavaScript アプリケーションです。

注：Elementsタブ難読器は、ウェブページのソースコードを難読化するものではありません。ソースコードを難読化したい場合は、HTMLソースの難読化ページのような HTML難読化ツールを使用してください。

▼ 開発者ツールの「Elements」タブ

機能

Elementsタブ難読器は、開発者ツールの「Elements」タブにおいて、以下の3種類の難読化を行います：

<body> 内のすべてのテキストを難読化します。（注：テキストは選択できなくなります）
すべての <script> 要素を削除します。
すべての  を削除します。

▼ 難読化されたテキスト

デモ

このウェブページの Elementsタブは、Elementsタブ難読器によって難読化されています。難読化の結果を確認するには、開発者ツールの Elementsタブを開いてください。

Elementsタブを開くには、このウェブページの任意の場所を右クリックし、コンテキストメニューから検証または 要素を検証 を選択してください。

▼ 検証を選択

インストール

ウェブページにElementsタブ難読器をインストールするには、以下の手順に従ってください。

ダウンロードしたZIPファイルの中にある JavaScript ファイル etobf.js を見つけてください。
etobf.js をあなたのウェブサイトにアップロードしてください。
次の JavaScript タグをウェブページに追加してください。JavaScript ファイルへのパスを正しく調整してください。
```
<script src="http://JavaScript/ファイル/へ/の/パス/etobf.js" charset="UTF-8"></script>
```
（※ http:// または https:// のいずれか適切な方を使用してください。）

以上です！Elementsタブ難読器がウェブページにインストールされました。

インストールの強化

前のセクションでインストールした JavaScript が何らかの理由でウェブページから削除されると、Elements タブ内のテキストは当然ながら難読化されなくなります。そのため、JavaScript ファイルをウェブページから削除しにくくすることが重要です。以下に、削除を困難にするための、お勧めの方法を紹介します。

1 JavaScript ファイルを推測しにくい名前に変更する

Elementsタブ難読器の元のファイル名は etobf.js ですが、ランダムな名前(例： aieta35379-co7.js)に変更することで、Elements タブの難読化と関連付けられにくくします。

2 JavaScript ファイルの URL を絶対パスで指定する

以下のように JavaScript ファイルのソース URL を絶対パスで指定すると、ウェブページがローカル環境にダウンロードされて表示された場合でも JavaScript は機能します。

<script src="http://ファイル/へ/の/絶対パス" charset="UTF-8"></script>

ウェブページがローカルにダウンロードされる可能性を考慮することは重要です。なぜなら、ハッカーは通常、ページを自分のマシンにダウンロードした後、Elementsタブ難読器を取り除こうとするからです。

3 ウェブページがローカルで開かれた場合、ページのコンテンツを消去する

この方法は、あなたのウェブページがダウンロードされてローカル環境で開かれるケースに重点を置いています。

ハッカーがElementsタブ難読器の JavaScript を削除するのは、ページがサイト上にホストされている限り簡単ではありません。そのため、彼らはページをダウンロードし、ローカルで詳しく調べようとします。

オフラインでの閲覧を防いでも問題がない場合は、ページがローカルで開かれたときに HTML コンテンツをすべて削除する以下のスクリプトを使用することをおすすめします。これにより、ハッカーに Elements タブから情報を抽出する機会を与えません。

次のコードは、ホスト名が「www.yourdomain.com」と一致しない場合、ページの HTML コンテンツをクリアします。実装するには、まず「www.yourdomain.com」を実際に使用するドメイン名に置き換えてください。その後、コードをページの末尾(ただし、</body> タグの前)に挿入してください。

<script>
if(location.hostname!="www.yourdomain.com"){
	document.documentElement.innerHTML="";
}
</script>

これで、ウェブページが「www.yourdomain.com」以外、またはローカルで開かれた場合、ページの全コンテンツがクリアされます。

eto-apply と eto-exclude を使用した選択的難読化

デフォルトでは、Elementsタブ難読器は <body> 要素内のすべてのテキストを難読化します。難読化するテキストを指定したい場合は、以下のように、テキストを含む要素の class 属性に eto-apply を追加してください。

<div class="eto-apply">
	このテキストは難読化されます。
</div>

eto-apply は、1ウェブページ内に複数追加できます。ただし、追加する要素は <body> 要素内でなければいけません。 <head> 要素内の要素に eto-apply を追加することはできません。 eto-apply をまったく使用しない場合は、<body> 内のすべてのテキストが難読化されます。

一部のテキストを難読化から除外したい場合は、そのテキストを含む要素の class 属性に eto-exclude を追加してください。以下に例を示します。

<div class="eto-exclude">
	このテキストは難読化されません。
</div>

eto-apply と同様に、eto-exclude も <body> 要素内の要素に適用する必要があります。 eto-apply を使用している場合、eto-exclude は eto-apply 内で指定する必要があります。以下に例を示します。

<div class="eto-apply">
	このテキストは難読化されます。
	<div class="eto-exclude">
		このテキストは難読化されません。
	</div>
	このテキストは難読化されます。
</div>