AngularとReact：間接依存関係に潜むセキュリティリスク
2019年10月30日
0 分で読めますSnykの「State of JavaScript frameworks security report 2019」へようこそ。
このセクションでは、AngularとReactの間接依存関係に潜むセキュリティリスクを確認し、続いてAngular、Reactの順に直接依存関係も確認します。
このパートで調査したモジュールは、脆弱性のあるReactおよびAngularモジュールの完全な一覧ではありません。たとえば、ng-、angular-、react-など、独自の命名規則を持つモジュールもあり、今回実施したパターンベースの検索では検出されない可能性があります。
間接依存関係に潜むセキュリティリスク
ReactやAngularをベースとするプロジェクトの多くは、開発の出発点となるひな形を提供するスキャフォールディングツールを使って生成されます。Reactでは、JestテストフレームワークやCSSプロセッサなどのツールがあらかじめ組み込まれた、設定済みプロジェクトの雛形を作成するnpmパッケージ、create-react-appを使うのが一般的です。Angularでは、npmパッケージの@angular/cliが同様の役割を果たします。
ReactとAngularのひな形の依存関係の健全性とセキュリティ状況（全体的なセキュリティリスクを示す指標）を比較するため、サンプルプロジェクトを生成しました。結果はかなり良好で、どちらにも脆弱性を含む開発依存関係はありましたが、本番環境の依存関係にセキュリティ上の問題はありませんでした。
AngularまたはReactのひな形を使ってプロジェクトを開始すると、最初からコードに取り込まれるセキュリティ脆弱性は次のとおりです。
ひな形 | 脆弱性のあるモジュール | 間接的な脆弱性 | 間接的な脆弱性の深刻度 | 年間ダウンロード数 | 修正可能？ |
Angular | ReDoS | 低 | 94,559,055 | ✅ | |
Angular | ReDoS | 高 | 70,181,373 | ❌ | |
React | プロトタイプ汚染 | 高 | 1,005,518,049 | ✅ | |
React | MPL-2.0ライセンスの問題 | 高 | 89,291,454 | ❌ | |
React | プロトタイプ汚染 | 高 | 328,052,052 | ✅ | |
React | プロトタイプ汚染 | 高 | 629,781,760 | ✅ |
注目すべき点として、Angularは952個の依存関係に依存し、その中に脆弱性が2件含まれています。一方Reactは1,257個の依存関係に依存し、脆弱性が3件、ライセンス互換性に関する潜在的な問題が1件含まれています。
オープンソースソフトウェアのライセンスについて
ライセンスコンプライアンスは、セキュリティ上の問題とともに依存関係全体の健全性を左右する重要な要素と考えているため、スキャンにはライセンスチェックも含めています。ライセンスに関する結果は、スキャン前にライセンスポリシーで定義されていたデフォルト設定に基づいています。
その結果、生成されたReactプロジェクトはmdn-dataパッケージに依存しており、このパッケージはMozillaのコピーレフトライセンスであるMPL-2.0を使用していることがわかりました。mdn-data依存関係を含むオンプレミス環境などにReactアプリケーションを配布する場合は、プロジェクトが要件に準拠していることを確認するため、ライセンス要件を確認してください。
また、組織独自のポリシーに関する指針に基づいてプロジェクトをスキャンすることをおすすめします。ポリシーによっては、Reactの間接依存関係について追加の警告が出る場合があります。
脆弱な依存関係パスの修正
パスとは、オープンソース依存関係がプロジェクトに取り込まれる経路を指します。たとえば、Project AとProject Bという2つの直接依存関係があり、どちらもProject Cを依存関係として取り込むとします。Project CはProject AとProject Bの両方からインストールされるため、2つの異なるパスに関連付けられます。Project Cに脆弱性が含まれている場合、開発者は修正にあたり両方のパスを考慮する必要があります。
Reactでは、3件の脆弱性が16,293件の脆弱なパスに広がっています。依存関係チェーン内の多数のパッケージをアップグレードする必要があるため、パッケージをアップグレードして脆弱性を修正するのは大変な作業です。対照的に、Angularの脆弱性は2つの脆弱なパスを修正するだけで対応できます。
次の画像は、Reactのnpmパッケージcreate-react-appで生成したプロジェクトを2019年8月にセキュリティスキャンしたレポートから抜粋したものです。このレポートは、1件のセキュリティ脆弱性に対処する際に生じる依存関係チェーンの問題を示しています。
脆弱性を修正するには、依存関係チェーン全体で影響を受けるすべてのパッケージからlodashの新しいバージョンを取得する必要があります。
エコシステム全体でlodashが広く使われているため、最終的にその脆弱なバージョンは何千もの依存関係パスで使用されることになります。
Angularモジュールエコシステムの脆弱性
Angularエコシステムでは、モジュールの脆弱性は次の3つの領域で確認されています。
Angularエコシステムのモジュール
悪意のあるモジュールのバージョン
開発者向けツール Angularモジュールエコシステムを調査すると、ダウンロード数と関連する脆弱性の点で、次のモジュールが特に目立ちます。
モジュール名 | 脆弱性の種類 | 脆弱性の件数 | 脆弱性の深刻度 | 年間ダウンロード数 | 修正あり？ |
クロスサイトスクリプティング（XSS） | 1 | 中 | 6,275,854 | ❌ | |
クロスサイトスクリプティング（XSS） | 1 | 中 | 2,710,764 | ✅ | |
クロスサイトスクリプティング（XSS） | 3 | 中 | 2,203,913 | ✅ | |
サービス拒否（DoS） | 1 | 中 | 580,674 | ❌ | |
クロスサイトスクリプティング（XSS） | 1 | 中 |
| ✅ | |
アクセス制限の回避 | 1 | 中 |
| ✅ | |
クロスサイトスクリプティング（XSS） | 2 | 中 |
| ✅ | |
クロスサイトスクリプティング（XSS） | 1 | 中 |
| ❌ | |
クロスサイトスクリプティング（XSS） | 1 | 中 |
| ✅ | |
サービス拒否（DoS） | 1 | 高 | 4229 | ✅ |
これらの脆弱性が含まれるモジュールのダウンロード数を基準に脆弱性の種類を並べると、グラフの上位をXSS脆弱性が占めることがはっきりとわかります。これは、OWASP Top 10で示されている注意すべきWebセキュリティリスクとも一致します。
悪意のあるAngularモジュール
次のAngularモジュールで公開されていた、悪意のあるバージョンを合計3つ特定しました。angular-bmap、ng-ui-library、ngx-pica。
依存関係の健全性ページからもわかるように、angular-bmapは特に注目すべき点が少ないモジュールです。公開済みの8つのバージョンはすべて2017年9月までにリリースされています。それでも、angular-bmapのバージョン0.0.9には、フォームからパスワードやクレジットカードに関する機密情報を窃取し、攻撃者が管理するURL https://js-metrics.com/minjs に送信する悪意のあるコードが含まれていました。php?pl=。この悪意のあるバージョン0.0.9はnpmレジストリから削除されています。
Angularのbmapモジュールとは異なり、ng-ui-libraryは現在もメンテナンスされており、150を超えるバージョンが公開されています。そのうち7つは2019年に公開されたものです。しかし、ng-ui-libraryのバージョン1.0.987には、angular-bmapで確認されたものと同じ悪意のあるコードが含まれていることが判明しました。ng-ui-libraryのダウンロード数は現在も月間約400～3,000件に上ります。
クレジットカード情報を窃取する同じ悪意のあるコードを含むモジュールとして、ngx-picaの悪意のあるバージョンも見つかりました。ngx-picaは、ブラウザで画像をリサイズするAngular v5およびAngular v7対応のモジュールで、月間ダウンロード数は約800件です。
興味深いことに、これらの悪意のあるバージョンはすべてごく最近になって発見されました。コードが含まれたバージョンがリリースされてから1か月が経過していたにもかかわらず、いずれも2019年6月に公表されました。
Angular開発者向けツール
モジュールエコシステムの調査で、Angular、React、Vueなどを使って構築されたプロジェクトのシングルページアプリケーションリソースを配信する、汎用HTTPサーバーとして使われているモジュールを1つ発見しました。
angular-http-serverモジュールには、ディレクトリトラバーサルの脆弱性が2件見つかりました。どちらの脆弱性も該当バージョンが公開されてから1年が経過しており、すでに新しいバージョンが6つほど公開されています。メンテナーは、このツールを本番環境向けサービスとして使うことを推奨しないと明言していますが、今年に入ってダウンロード数は増加しており、2019年5月には20,670件が記録されました。
このAngular HTTPサーバー開発ツールの利用が広がっているため、この脆弱性には公開済みのエクスプロイトがあることを指摘しておきます。
Reactモジュールエコシステムの脆弱性
Angularと同様に、Reactエコシステムにも、過去に公開された悪意のあるモジュールがいくつか含まれていることがわかりました。次の図は、確認されたすべての脆弱なモジュールにおける脆弱性の種類と件数の内訳を示し、特に4つの悪意のあるパッケージ、react-datepicker- plus、react-dates-sc、awesome_react_utility、react- server-nativeを取り上げています。
4つの悪意のあるモジュールすべてに、クレジットカードなどの機密情報を窃取する同一の悪意のあるコードが含まれていました。この攻撃はReactエコシステムのモジュールにも影響を及ぼしました。
この事例は、オープンソースプロジェクトのメンテナーが、npmパッケージレジストリでサポートされている2要素認証（2FA）などの多要素認証を有効にすることがいかに重要かを改めて示しています。アカウントを第三者に侵害され、パッケージの悪意のあるバージョンを公開されることで、ユーザーを危険にさらす事態を防ぐためです。
まだ設定していない場合は、npmjs.orgの開発者アカウントで2FAを有効にし、その他のnpmセキュリティのベストプラクティスにも従うことを強くおすすめします。
Reactエコシステムで確認された、特に注目すべき脆弱なモジュール：
react-marked-markdownには深刻度の高いXSS脆弱性があり、修正プログラムはありません。しかし、このReactコンポーネントはJavaScriptのMarkdownライブラリmarkedをラップしたもので、依然として数千回ダウンロードされており、過去12か月の合計は65,790件に上ります。
preactをお使いの方は、preact-render-to-stringライブラリにご注意ください。バージョン3.7.2より前のすべてのバージョンにクロスサイトスクリプティングの脆弱性があります。このライブラリの利用は過去12か月で増加しており、同期間のダウンロード数は合計3,228,049件です。
Reactフロントエンドアプリケーションでツールチップを実装している方は、react-tooltipを利用しているかもしれません。このライブラリは2019年7月だけで、100万件近く（994,903件）ダウンロードされました。しかし、2018年9月に公表されたとおり、バージョン3.8.1より前のすべてのバージョンにクロスサイトスクリプティング攻撃を受ける脆弱性があります。
SVGを頻繁に扱う場合、react-svgを使っている可能性が高いでしょう。過去12か月のダウンロード数は1,446,442件です。2018年4月、セキュリティ研究者のRon Perris氏により、バージョン2.2.18より前のすべてのバージョンに影響する、深刻度の高いクロスサイトスクリプティング脆弱性が公表されました。
mui-datatablesでは、2019年3月にCSVインジェクションの脆弱性が公表されました。このReactライブラリはMaterial UIフレームワークをベースにしたテーブルデータ用UIコンポーネントを提供し、過去12か月で35万件を超えるダウンロード数を記録しています。
確認したReactの脆弱なモジュールをすべて追跡したところ、過去3年間にセキュリティ脆弱性が8件見つかりました。2017年に2件、2018年に6件、2019年は8月までに2件です。オープンソースを責任を持って利用し、脆弱性をできるだけ早く見つけて修正することが重要です。
注目：Next.jsのセキュリティ脆弱性
Next.jsはZEITが提供する人気のReactフレームワークです。Reactの知識を活用して、SEOに強いWebアプリケーション、サーバーサイドレンダリングアプリケーション、プログレッシブウェブアプリ（PWA）、さらにはElectronベースのアプリケーションを構築できます。
Next.jsは開発者の間で引き続き利用が広がっており、過去12か月間のダウンロード数は8,414,925件に達しました。プロジェクトの成長に伴い、セキュリティ状況を確認することがますます重要になっています。
2017年から2018年にかけて、Next.js Reactフレームワークに影響する深刻度の高いディレクトリトラバーサル脆弱性を3件、深刻度が中程度のクロスサイトスクリプティング脆弱性を2件確認しました。また、ZEITのセキュリティチームは5件すべての脆弱性に迅速に対処し、1週間以内にNext.jsフレームワークのアップグレードによる修正を提供した点も特筆すべきです。
全体として、ZEITは他のオープンソースプロジェクトも取り入れるべき、優れたセキュリティ対策を実践しています。特に注目すべき点は次のとおりです。
チームはセキュリティ上の問題の報告に迅速に対応し、速やかに修正をリリースしています。これにより、実際にセキュリティリスクが存在する期間を短くできます。ZEITはユーザーが脆弱性をすばやく緩和できるよう、アップグレード方法も提供しています。
セキュリティ上の問題が再発しないよう、チームはセキュリティユニットテストを作成しています。
リリースノートでは、セキュリティ関連情報やその影響、修正を適用して最新の状態を保つためにユーザーが必要な手順を明確に伝えています。
このプロジェクトでは、セキュリティ報告専用のメーリングリスト、責任ある情報開示ポリシー、問題を報告するための専用メールアドレスを設けています。
ZEITによるNext.jsフレームワークの管理は、優れたオープンソースセキュリティポリシーの好例です。ZEITはセキュリティを真剣に捉え、ポリシーと取り組みを通じてユーザー全体のセキュリティに真摯に取り組んでいます。こうした姿勢は、他のプロジェクトも取り入れるべきものです。
次のセクションのハイライトをご覧ください。
または、レポートの完全版をデジタル形式でダウンロードしてください。