【備忘録】create-react-app環境で使用される内部パッケージ nth-checkとpostcssの脆弱性への対応方法
2024.12.26はじめに
create-react-appで作成したReactプロジェクトでnpm auditを実行すると、内部パッケージに関する脆弱性警告が表示されることがあります。この記事では、これらの脆弱性警告の意味と適切な対応方法について解説したいと思います。
create-react-appの現状
create-react-appは2022年4月にv5.0.1を最後にリリースが止まっており、現在ではReact公式ドキュメントでもビルドツールの選択肢として紹介されていません。
このため、以下の課題が生じています：
- 今後これらの脆弱性に対する公式のサポートが見込めない
- かつてcreate-react-appで作成されたアプリケーション内に、脆弱性のあるパッケージが残り続ける可能性がある
本記事では、これらの課題に対する実践的な対応方法をご紹介します。
脆弱性の内容
npm audit結果
=> % npm audit 0:57:04
# npm audit report
nth-check <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/svgo/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/svgo/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/svgo
@svgr/plugin-svgo <=5.5.0
Depends on vulnerable versions of svgo
node_modules/@svgr/plugin-svgo
@svgr/webpack 4.0.0 - 5.5.0
Depends on vulnerable versions of @svgr/plugin-svgo
node_modules/@svgr/webpack
react-scripts >=2.1.4
Depends on vulnerable versions of @svgr/webpack
Depends on vulnerable versions of resolve-url-loader
node_modules/react-scripts
postcss <8.4.31
Severity: moderate
PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change
node_modules/resolve-url-loader/node_modules/postcss
resolve-url-loader 0.0.1-experiment-postcss || 3.0.0-alpha.1 - 4.0.0
Depends on vulnerable versions of postcss
node_modules/resolve-url-loader
8 vulnerabilities (2 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
npm notice
npm notice New major version of npm available! 10.1.0 -> 11.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0
npm notice Run npm install -g npm@11.0.0 to update!
npm notice
npm auditの結果、バージョン2.0.1以下のnth-checkと、バージョン8.4.31以下のpostcssにて脆弱性が発見されます。それぞれSeverityはhighとmoderateです。
nth-check は、CSSセレクタのパースに使用されるライブラリです。2.0.1以下のバージョンには、正規表現パターンの処理において潜在的なReDoS（Regular Expression Denial of Service）脆弱性が存在します。
postcss は、CSSの変換や最適化を行うためのツールです。8.4.31未満のバージョンには、 CSSのパース処理における脆弱性が報告されています。
react-scriptsは、create-react-app内で使用される開発・ビルドツールのセットです。 このreact-script内の依存パッケージ内で脆弱性が報告されているということですね。
nth-checkの脆弱性
より具体的にどの依存ライブラリ内で使用されているパッケージが2.0.1以下のnth-checkを使用しているかを調査します。
npm lsコマンドで依存関係を洗い出してみます。
npm ls nth-check
your-project@0.1.0 /Users/usename/your-project
└─┬ react-scripts@5.0.1 overridden
├─┬ @svgr/webpack@5.5.0
│ └─┬ @svgr/plugin-svgo@5.5.0
│ └─┬ svgo@1.3.2
│ └─┬ css-select@2.1.0
+ │ └── nth-check@1.0.2 // ここで、2.0.1以下のバージョンを使用している
react-scripts内の@svgr/webpackライブラリが使用しているsvgoパッケージ内で、バージョン1.0.2のnth-checkが使用されていることがわかります。
postcssの脆弱性
同様に、postcssの依存関係も確認してみます。
npm ls postcss
your-project@0.1.0 /Users/usename/your-project
└─┬ react-scripts@5.0.1 overridden
├─┬ css-loader@6.11.0
（省略）
├─┬ resolve-url-loader@4.0.0
+│ └── postcss@7.0.39 // ここで、8.43.1以下のバージョンを使用している
こちらもreact-scripts内のresolve-url-loaderが、バージョン7.0.39のpostcssを使用していることがわかります。
npm audit fix --force で解決を試みる
まず思いつく対応として、npm audit fix --forceで強制的にパッケージのアップグレードを試みる方法があります。
npm
audit fix --force
# react-scripts が 5.0.1 → 3.0.1 にダウングレードされる
このコマンドを実行すると、react-scriptsが5.0.1から古いバージョンの3.0.1にダウングレードされてしまい、さらに多くの新しい脆弱性が報告されてしまいました。そのため、別の対応策を検討する必要があります。
対応策
対応策を見る前に、まずこれらの脆弱性がどれほどアプリケーションに影響を及ぼすかを考察します。
結論これらの脆弱性警告は実際のアプリケーション状で問題になるとは考えにくいです。
というのも、nth-checkとpostcssはreact-scripts内の依存パッケージであり、開発環境でのみ使用される依存関係です。これらのパッケージは開発時のビルドプロセスでのみ使用され、本番環境にデプロイされるビルド成果物には含まれません。
つまり、作成した実際に動いているアプリ内で使用されているわけでなく、外部からの悪意のある入力を受け付けることはなくセキュリティ上のリスクは極めて低いと言えます。
これらの判断は、npm audit --productionを実行することで確認できます：
# 開発依存関係を含むすべての脆弱性をチェック
npm audit
# 脆弱性が報告される
# 本番環境の依存関係のみをチェック
npm audit --production
# 脆弱性は報告されない
これは、「npm audit is broken for front-end tooling by design」という内容でcreate-react-appのIssue上で議論されており、facebokk(meta)のリポジトリでのissueで多くの評価を得ていることからコミュニティの見解として信頼性はある程度高いと思われます。
このうえで、実際の対応案を考えていきます。
対応案① 「パッケージのオーバーライド」
package.jsonに overrides セクションを追加して強制的に依存ライブラリ内のパッケージをアップデートします。
"overrides": {
"nth-check": "^2.0.1",
"postcss": "^8.4.31"
},
これにより、該当パッケージをアップデートすることができ、脆弱性警告を解消できますが、一方で、パッケージの互換性の問題が発生し、ビルドツールの動作に影響を与える可能性があります。
実際にコミュニティ内の多くの人もoverrideで対応しているように見受けられます。
対応案② 「Viteへの移行」
create-react-appのサポート終了を考慮し、React公式も推しているモダンなビルドツールであるViteへの移行を検討することをお勧めします。現在でもアクティブなメンテナンスが実施されており、中長期的な依存パッケージ内の脆弱性の悩みを解消することができます。一方で、移行コストなどを考慮する必要があります。
対応案③ 「警告の無視」
単純に対応しないという対応案です。
前述の通り、これらの脆弱性は開発環境のビルドツールにのみ影響し、実際のアプリケーションには影響しないため、上記の理由を説明した上で警告を無視することも妥当な選択肢です。
おわりに
今回の調査で明らかになった脆弱性の影響範囲について、nth-checkとpostcssの脆弱性は開発環境のビルドツールにのみ存在し、本番環境のアプリケーションには影響しないことがわかりました。これはnpm audit --productionを実行することで確認することができます。
create-react-appのサポート終了に伴い、これらの脆弱性は今後も解消されない可能性が高いですが、実際のアプリケーションへの影響は限定的であるため、過度に心配する必要はありません。今回上げた対応案を、自身のプロジェクトの状況に応じて適切な選択してみてください。
以上、どなたかの参考になれば幸いです。
参考
