🛡️

create-react-appでは脆弱性の警告が出るが無視して良い

2021/08/31に公開

本記事ではcreate-react-appのインストール時に表示される脆弱性の警告についての扱いについて解説しています。

create-react-appはreactアプリを簡単にセットアップするコマンドです。

Node.jsのパッケージマネージャであるnpmにはnpm auditという、依存パッケージに脆弱性があるかを調べるコマンドが存在します。

create-react-appでプロジェクトを作成し、npm auditを使い脆弱性が存在するかを調べるとcreate-react-appの本体であるreact-scriptが依存しているパッケージに脆弱性があることがわかります。

これらの警告はパッケージをインストールする時も表示され、あまり気分の良いものではありません。

また、GitHubが提供するDependabot alertsにおいても警告が表示されます。しかし、react-scriptが要求するバージョンと齟齬があるのでアップデートを行えないとも表示されています。

しかし、これらの警告は無視しても問題ないそうです。

なぜ警告を無視しても問題ないのか

結論から言えば、npm auditは不正確だからです。

これらの警告は、create-react-appのリポジトリでも多くに人がissueを立てています。

この問題に対してissue:announcementタグ付きで作者の一人である@gaearonさんがissueを建てました
https://github.com/facebook/create-react-app/issues/11174

このissueの中で「npm auditはフロントエンドでのツールとしては設計上壊れている(npm audit is broken for front-end tooling by design)」と書かれています。

これを詳細に説明している@gaearonさんの記事がこちらです。

https://overreacted.io/npm-audit-broken-by-design/

詳しくは記事を確認していただきたいのですが簡単にまとめると以下の通りになります。

  • npmの脆弱性レポートは重複が多い(create-react-appでは2/5が重複)
  • 脆弱性レポートで表示される「脆弱性」は脆弱性というには取るに足らないことが多い(詳しくは記事参照)
  • このような脆弱性レポートは初心者・アプリ開発者・メンテナーを不幸にする

脆弱性として表示されるものは、ビルドツールとしては関係ない場合がほとんどとのことです。

解決策

これを踏まえて、記事・create-react-appのissueでは次のような解決策が提示されています。

npmの設定ファイルpackage.jsonでreact-scriptdependenciesからdevDependenciesに移してください。その上で、npm audit --productionを使用するようにしてください。

理由は先ほど挙げた通り、ほとんどの警告はビルドツールにおいては関係のないものだからです。

この状態でもパッケージインストール時には警告が表示されます。無視しても構いませんが気になる場合はnpm install --no-auditとすることで無視できます。

issueでは最後に「もちろん、ビルドツールに脆弱性が存在する可能性はあります。実際に存在した場合には直ちに報告すればパッチがリリースされます。最悪のケースは本当の脆弱性が数多のどうでもいい脆弱性に埋もれてしまうことです。」とまとめられています。

Really, the worst problem is that when there is a real attack poisoning the build toolchain, we won't know about it because it will be buried underneath the 99.9% of false positives.

create-react-appの役割

本題とはそれますが、面白いissueがあったので紹介します。
https://github.com/facebook/create-react-app/issues/11180

create-react-appの開発チームはFacebookの社員ではなく、開発は自由時間で行われています[1]

このissueではcreate-react-appがボランティアに頼りすぎているのではないか?Facebookはプロジェクトをサポートするべきではないか?としています。

これに対して作者の一人である@gaearonさんは、次のように返信しています(長いので日本語訳してまとめています)

https://github.com/facebook/create-react-app/issues/11180#issuecomment-874748552

  • CRA(create-react-app)はNext.jsやGatsby, Viteなどのビルドツールがない時代にwebpackやbabelの設定を簡単に行うことを目的として始まった
  • CRAでは開発を簡単にするため設定なし・プラグインシステムなしに(意図的に)している。
  • 結果的にCRAはプロジェクトとして成功したと信じている
  • CRAは2.0以降メンテナンスモードに入っている
  • CRAの役割は限定的であり最適な選択ではない(パフォーマンスなどは考慮仕切れていない)
  • npm auditは誤検知が多いが警告が表示されることはFUD(不信感)を引き起こす
  • CRAに専門のチームがいないことへの不満はわかるがこれは私が意識的に選択したことであり、この成功はCRAの限られた機能と多くのボランティアによるもの
  • npm auditによるFUDの増加・@gaearonさん自身の多忙により問題が顕在化してきた
  • 具体的に何を解決して欲しいのか教えて欲しい

個人的にはCRAがFacebookのサポートを受けていないことは驚きでした。Reactのドキュメントでは公式っぽい雰囲気を感じていたので、公式にサポートされていると思っていました。

今後CRAがどのような方向に進むのかはわかりませんがより良い方向に進むことを願っています。

脚注
  1. https://github.com/facebook/create-react-app/discussions/11086#discussioncomment-956516 ↩︎

Discussion