いつも見ているあのWebサイトはどんなフレームワークでできているんだろう

WappalyzerというChrome拡張を使うとそのWebサイトがどんなフレームワーク、サービスから成り立っているのか解析してくれます。

Wappalyzer - Chrome ウェブストア

今回は、興味本位で日頃お世話になっているWebサイトのフロントエンドフレームワークを解析させてみたいと思います。

f:id:tansantktk:20201119203102p:plain

判定結果

※ログイン後のコンソール画面でフレームワークを判定したWebサイトを含みます。
※筆者が普段閲覧しているサイトを挙げているだけなので大変偏りがあります。ご了承下さい。

React製

ググると技術的な資料や記事がよく出てくるだけあって、React製の割合は大きいです。 イメージ的にヤフオクがReact製だったのは驚き。

Vue.js製

Vue.jsもReactに次いでよく使われています。

Ruby on Rails

Railsは終わった等という話を巷で聞いたりしますが、GitHubの存在感は強いですね。

Angular製(AngularJS, Angular2~)

自社製なだけあってGoogle関連のサービスはAngularが多いですが、他社はあまり使ってない印象。 自分は業務でメインに使っているんですが…悲しい…😢

Polymer製

Polymerというフレームワーク自体を初めて知りました。Google製のフロントエンドフレームワークらしいですね。

Riot製

こちらも珍しいフレームワーク。調べてみると軽量で扱いやすい部分がウリのようです。

ASP.NET

ラズパイ関連の部品購入でいつもお世話になっている秋月電子さん。 .NETはバックエンドで使うイメージでしたがフロントエンドでも使われていました。

Wappalyzerはどうやってフレームワークを判定しているのか

さて分析してみたは良いのですが、一体Wappalyzerは何を持って結果を出力しているでしょうか。

WappalyzerはOSSですのでGitHubで中身を覗くことができます。

GitHub - AliasIO/wappalyzer: Identify technology on websites.

README.mdによると

Specification

A long list of regular expressions is used to identify technologies on web pages. Wappalyzer inspects HTML code, as well as JavaScript variables, response headers and more.

Patterns (regular expressions) are kept in src/technologies.json.

HTML, JavaScript, レスポンスヘッダを正規表現で判定しているとのことです。 src/technologies.json正規表現パターンがリストアップされているようですので、試しにAngularの判定ルールを見てみます。

technologies.json

...
    "Angular": {
      "cats": [
        12
      ],
      "description": "Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google.",
      "dom": {
        "[ng-version]": {
          "attributes": {
            "ng-version": "^([\\d.]+)\\;version:\\1"
          }
        }
      },
      "excludes": [
        "AngularDart",
        "AngularJS"
      ],
      "icon": "Angular.svg",
      "js": {
        "ng.coreTokens": "",
        "ng.probe": ""
      },
      "website": "https://angular.io"
    },
...

ng-versionという記述がありますが、これはAngular固有のDOM要素の属性(Attribute)です。 Angularアプリのindex.htmlのapp-rootタグには、自動的にng-version属性が付与されます。

Chromeの開発者ツールでhtmlを確認するとng-version="5.2.11"という記載が付与されています。コンパイル時に付与されたようです。 f:id:tansantktk:20201119194244p:plain

Wappalyzerはこのng-version="5.2.11"の部分からフレームワークがAngularであり、バージョンが5.2.11であることを判断しています。

ちなみにAngularは執筆時点で11.0.1がstable versionです。完全に時代についていけていません😭
Angularは半年に1回という猛烈なスパンでメジャーアップデートをかけてくるので、まあアプデは次でいいや…といった具合に対応が億劫になるのです…。 (セキュリティ絡みのトラブル回避の為、フレームワークのアップデート対応もサボらずやっていきましょう。)

Wappalyzerにフレームワークを検知されないよう隠蔽したい

結論から言うとAngularの場合、隠蔽できませんでした。
フックメソッドのngOnInit()中でthis.elementRef.nativeElement.removeAttribute("ng-version");を実行することで、 html上からバージョン表記を葬り去ることはできるのですが、Wappalyzerの判定の方が先に実行されてしまうようで無意味でした。

Angularの父、Miško Hevery氏によればバージョンの付与については意図的なもので、AuguryのようなツールからAngularのページであることを判定する為のものだそうです。

This is there intentionally, so that tools such an augury, can detect that it is an angular page and can provide useful UI.
Remove ng-version from the DOM generated in Production Mode · Issue #16283 · angular/angular · GitHubより

ちなみにAuguryはAngularのデバッグ用のChrome拡張で、Componentの構造やプロパティの状態をグラフィカルに確認できるツールです。
chrome.google.com 正直、私の場合はVSCodeのデバッガで事足りることが多く、あまり使ったことは無いですね。 バージョンを付与するか否かの選択肢くらいは開発者に用意してくれても良いのでは…。

Nginx, Apacheについてはレスポンスヘッダをデフォルトの記述から変更することで回避することが出来るようです。
How to hide technologies from Wappalyzer - Wappalyzer

Wappalyzerの判定結果は悪意を持った技術者にとっては、バージョン表記から脆弱性を見つける為のヒントになってしまうことがありますので 隠蔽できるフレームワーク、サービスであるなら対策をしておいた方が良いかと思います。

その他

Wappalyzerの解析結果で表示されたサービス名をクリックすると、 そのサービスを利用しているドメイン名をトラフィックの多い順に並べてくれます。

f:id:tansantktk:20201117221511p:plain

試しにVue.jsを使っているドメインを出してみました。 po〇nhubもVue.jsらしい。いつもお世話になっています。