😱
Wappalyzer を騙してみる

2023/12/09に公開
Chrome拡張
皆様 Wappalyzerをご存知ですか？

サイトに使用されている技術を確認出来たりと便利ですよね。
分からない方はこの記事を読んでみてください。
例えば、Zennでは以下の様な技術が使われてると分かります。


 騙すとどうなるのかこれを騙すとどうなるかを先に見せます。
この様に混沌とします。

Next.jsにNuxt.js、SvelteKit 等やり放題です。

他にもあるので見たい方は ame-x.net を確認してみてください。
( 実際にはAngular Universalを使用しています。 追記: 既にサイトを変更しました・・・ )

 どうやるのかまずは 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>
が入ります。

これも同じく検知している訳です。
じゃあ騙すにはそのフレームワーク固有のタグとかヘッダー、変数を定義すれば良いのね
その通りです。

 どうやって探すのかいちいちフレームワークが使われているサイトを探して実験して・・・

は時間がかかりすぎます。

そこで GitHubを活用することが出来ます。
https://github.com/dochne/wappalyzer
ここにソースが有ります。

このリポジトリに絞って
repo:dochne/wappalyzer {調べたい技術名}
とすると簡単に見つけられます。

例えば TailWindCSS だと
これが検索結果に出ます。
https://github.com/dochne/wappalyzer/blob/471c2fb0b093973c098bd1855b89c8cde4997479/src/technologies/t.json#L495
"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を指定すると防げます。
これでほとんどのフレームワークで騙せます。

 ヘッダーやその他の騙し方タグの他にも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やNode.jsが必要です。

これらも技術一覧に自動的に含まれます。
"implies": [
      "React",
      "Webpack",
      "Node.js"
]
技術単体として検出方法が無い場合でもここから検出できるようになっています。
今まで紹介した物は、逆に検出されたくない場合の対策にも使えると思います。

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

楽しい(？) Wapplyzerライフを 🙏
騙すとどうなるのか

どうやるのか

どうやって探すのか

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

impliesとは？

終わりに

Discussion
