令和最新版 Wappalyzer を騙してみた

この記事は1年前に投稿した記事のリメイクです。

皆様 Wappalyzerをご存知ですか？
サイトに使用されている技術を確認出来たりと便利ですよね。

1年前に記事を出した時より、格段に普及しているように感じます。

さて、実際に使ってみましょう。
Zenn では以下の様な技術が使われてると分かります。

騙すとどうなるのか

これを騙すとどうなるかを先に見せます。

この様に混沌とします。
Next.js に Nuxt.js、SvelteKit 等やり放題です。
こんなん見たら腰抜けちゃいますよね

どうやるのか

まずは Wappalyzer の仕組みを知る必要が有ります。
結論から言うと Wappalyzer は DOM 上にあるタグ(linkタグやcdnのスクリプトタグやフレームワーク固有のid等)、グローバルに宣言されている変数、更にはヘッダー等からも確認しています。

Astro は初期状態で head に以下の様な要素が入ります。(現在は違います。)

<meta name="generator" content="Astro vX.X.X">

これを Wappalyzer は検知して
Astro の version X.X.X だなと判断している訳です。

NuxtJS であれば、root の要素に

<div id="__nuxt">
  ...children
</div>

が入ります。
これも同じく検知している訳です。

Apache の Server: Apache ~ も同じです。

じゃあ騙すにはそのフレームワーク固有のタグとかヘッダー、変数を定義すれば良いのね

その通りです。

補足しておくと、Dns, Cookie, Robots なども見られます。

どうやって探すのか

いちいちフレームワークが使われているサイトを探して実験して・・・
これは時間がかかりすぎます。

そこで GitHub を活用することが出来ます。

https://github.com/dochne/wappalyzer

ここにソースが有ります。
このリポジトリに絞って

repo:dochne/wappalyzer {調べたい技術名}

とすると簡単に見つけられます。
例えば TailWindCSS だと

これが検索結果に出ます。

https://github.com/dochne/wappalyzer/blob/206b81ff73111aa98af217f35b8f3003e2730617/src/technologies/t.json#L486-L505

"Tailwind CSS": {
    "cats": [
      66
    ],
    "css": "--tw-(?:rotate|translate|space-x|text-opacity|border-opacity)",
    "description": "Tailwind is a utility-first CSS framework.",
    "dom": {
      "link[rel='stylesheet'][href*='tailwind']": {
        "attributes": {
          "href": "tailwindcss[@|/](?:\\^)?([\\d.]+)(?:/[a-z]+)?/(?:tailwind|base|components|utilities)(?:\\.min)?\\.css\\;version:\\1"
        }
      }
    },
    "icon": "tailwindcss.svg",
    "js": {
      "tailwind": ""
    },
    "scriptSrc": "\\.tailwindcss(?:tailwind-config-cdn)?\\.(?:com|js)",
    "website": "https://tailwindcss.com/"
  }

なんとなく察せると思いますが、
"css": "--tw-(?:rotate|translate|space-x|text-opacity|border-opacity)",
この部分は CSS の名前空間に以下のプロパティが含まれているかをチェックします。

"dom": {
      "link[rel='stylesheet'][href*='tailwind']": {
        "attributes": {
          "href": "tailwindcss[@|/](?:\\^)?([\\d.]+)(?:/[a-z]+)?/(?:tailwind|base|components|utilities)(?:\\.min)?\\.css\\;version:\\1"
        }
      }

この部分は tailwindcss が含まれる stylesheet が読み込まれているかをチェックします。

"scriptSrc": "\\.tailwindcss(?:tailwind-config-cdn)?\\.
この部分は TailwindCSS のcdn版のurlが読み込まれているかをチェックする部分です。

後者を利用すれば、
<script src="https://cdn.tailwindcss.com" />
とすれば騙せるわけです。
しかしこれでは余計な通信が発生します。

なので
<script src="https://cdn.tailwindcss.com" type="text/fake" />
存在しない出鱈目なtypeを指定すると防げます。

これでほとんどのケースで、Wappalyzer を騙せます。

ヘッダーやその他の騙し方

タグの他にも headers や他の物を騙す必要が有る場合があります。

"Next.js": {
    "cats": [
      12,
      18,
      22,
      57
    ],
    "cpe": "cpe:2.3:a:zeit:next.js:*:*:*:*:*:*:*:*",
    "description": "Next.js is a React framework for developing single page Javascript applications.",
    "headers": {
      "x-powered-by": "^Next\\.js ?([0-9.]+)?\\;version:\\1"
    },
    "icon": "Next.js.svg",
    "implies": [
      "React",
      "Webpack",
      "Node.js"
    ],
    "js": {
      "__NEXT_DATA__": "",
      "next.version": "^(.+)$\\;version:\\1"
    },
    "website": "https://nextjs.org"
  }

"headers": {
      "x-powered-by": "^Next\\.js ?([0-9.]+)?\\;version:\\1"
}

この部分はヘッダーに Next.js X.X.X;version: XXXが含まれているかを確かめています。
(Xは数字です。)

"js": {
      "__NEXT_DATA__": "",
      "next.version": "^(.+)$\\;version:\\1"
}

これは __NEXT_DATA__という変数があるかを確かめ、
next.versionからバージョンを抽出しています。

impliesとは？

その技術を動かすのに必要な技術です。
Next.js であれば当然 React が必要です。
これらも技術一覧に自動的に含まれます。

"implies": [
      "React",
      "Webpack",
      "Node.js"
]

技術単体として検出方法が無い場合でもここから検出できるようになっています。

今回紹介した物は、逆に検出されたくない場合の対策にも使えると思います。

皆様ご存知、Hono というフレームワークには「secureHeaders」という設定するだけでセキュリティ用のヘッダーを弄ってくれるミドルウェアがあります。
https://github.com/honojs/hono/blob/main/src/middleware/secure-headers/secure-headers.ts#L223
ここではサーバー側で使ってる技術が推測されないように、デフォルトで「X-Powered-By」が消される処理が書いてあります。

このようにフレームワーク固有のものを隠蔽すれば良いのです。

終わりに

これで大体のフレームワークやライブラリを任意に表示させることが出来ます。

良ければいいね共有お願いします 🤲