Wappalyzer
というChrome拡張を使うとそのWebサイトがどんなフレームワーク、サービスから成り立っているのか解析してくれます。
今回は、興味本位で日頃お世話になっているWebサイトのフロントエンドフレームワークを解析させてみたいと思います。
判定結果
※ログイン後のコンソール画面でフレームワークを判定したWebサイトを含みます。
※筆者が普段閲覧しているサイトを挙げているだけなので大変偏りがあります。ご了承下さい。
React製
- www.dropbox.com
- app.slack.com
- jp.heroku.com
- prog-8.com
- auctions.yahoo.co.jp
- www.raspberrypi.org
- www.microsoft.com
- www.pixiv.net
ググると技術的な資料や記事がよく出てくるだけあって、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"
という記載が付与されています。コンパイル時に付与されたようです。
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の解析結果で表示されたサービス名をクリックすると、 そのサービスを利用しているドメイン名をトラフィックの多い順に並べてくれます。
試しにVue.jsを使っているドメインを出してみました。
po〇nhubもVue.jsらしい。いつもお世話になっています。